Что означает кнопка input
Атрибут значения элементов elements’ value содержит строку DOMString , которая используется в качестве метки кнопки.
input type="button" value="Нажми на меня" />
Если вы не укажете value , вы получите пустую кнопку:
input type="button" />
Использование кнопок
Элементы не имеют поведения по умолчанию (их двоюродные братья, (en-US) и (en-US) используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.
Простая кнопка
Мы начнём с создания простой кнопки с обработчиком события click (en-US) , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):
form> input type="button" value="Запустить ПК" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Запустить ПК") button.value = "Выключить ПК"; paragraph.textContent = "ПК запущен!"; > else button.value = "Запустить ПК"; paragraph.textContent = "ПК выключен."; > >
Сценарий получает ссылку на объект HTMLInputElement (en-US), представляющий в DOM, сохраняя этот параметр в переменной button . Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US) .
Добавление сочетаний клавиш на кнопки
Сочетания клавиш, также известные как клавиши доступа и их эквиваленты на клавиатуре, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — точно так же, как вы сделали бы с любым , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .
В этом примере, s это специфичная клавиша доступа (ты должен нажать s плюс конкретные клавиши-модификаторы для вашей комбинации браузера и операционной системы; вы можете увидеть полный список на странице accesskey).
form> input type="button" value="Включить ПК" accesskey="s" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Включить ПК") button.value = "Выключить пк"; paragraph.textContent = "ПК включён!"; > else button.value = "Включить ПК"; paragraph.textContent = "ПК выключен."; > >
Примечание: Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам пришлось бы предоставлять эту информацию таким образом, чтобы это не противоречило дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о том, что такое ключи доступа к сайту).
Выключенные / Включённые кнопки
Чтобы выключить кнопку необходимо просто добавить на неё глобальный атрибут disabled , вот так:
input type="button" value="Я выключена" disabled />
Вы можете включать и отключать кнопки во время выполнения, просто установив disabled вместо true или false . В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью button.disabled = true . А setTimeout() затем функция используется для возврата кнопки обратно в ее включённое состояние через две секунды.
input type="button" value="Enabled" />
const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() button.disabled = true; button.value = "Выключена"; window.setTimeout(function () button.disabled = false; button.value = "Включена"; >, 2000); >
Если атрибут disabled не указан, то кнопка наследует своё disabled состояние из своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как элемет, и затем установить disabled на контейнер.
Приведенный ниже пример показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled устанавливается в при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.
fieldset> legend>Button grouplegend> input type="button" value="Button 1" /> input type="button" value="Button 2" /> input type="button" value="Button 3" /> fieldset>
const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() fieldset.disabled = true; window.setTimeout(function () fieldset.disabled = false; >, 2000); >
Примечание: Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенние состояния из одного при загрузке разных страниц. Используйте атрибут autocomplete для управления этой функцией.
Валидация
Кнопки не участвуют в проверке валидации; они не имеют реальной ценности для валидации.
Примеры
div class="toolbar"> input type="color" aria-label="select pen color" /> input type="range" min="2" max="50" value="30" aria-label="select pen size" />span class="output">30span> input type="button" value="Clear canvas" /> div> canvas class="myCanvas"> p>Добавьте подходящий фолбэк здесь.p> canvas>
body background: #ccc; margin: 0; overflow: hidden; > .toolbar background: #ccc; width: 150px; height: 75px; padding: 5px; > input[type="color"], input[type="button"] width: 90%; margin: 0 auto; display: block; > input[type="range"] width: 70%; > span position: relative; bottom: 5px; >
let canvas = document.querySelector(".myCanvas"); let width = (canvas.width = window.innerWidth); let height = (canvas.height = window.innerHeight - 85); let ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); let colorPicker = document.querySelector('input[type="color"]'); let sizePicker = document.querySelector('input[type="range"]'); let output = document.querySelector(".output"); let clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) return (degrees * Math.PI) / 180; > // update sizepicker output value sizePicker.oninput = function () output.textContent = sizePicker.value; >; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = function (e) curX = window.Event ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = window.Event ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); >; canvas.onmousedown = function () pressed = true; >; canvas.onmouseup = function () pressed = false; >; clearBtn.onclick = function () ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); >; function draw() if (pressed) ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); > requestAnimationFrame(draw); > draw();
Спецификации
| Specification |
|---|
| HTML Standard # button-state-(type=button) |
Browser compatibility
BCD tables only load in the browser
Смотрите также
- и HTMLInputElement (en-US) интерфейс, который его реализует.
- Более современный элемент .
- Совместимость свойств CSS (en-US)
Что такое input в HTML5?
HTML тег позволяет создавать различные поля ввода или же выбора значения для html-форм. При использовании тега input без дополнительных атрибутов будет создано простейшее текстовое поле. Закрывающий тег не требуется.
При помощи атрибута type вы можете указать каким полем будет этот input , к примеру:
- password — создание поля для ввода пароля;
- text — создания простейшего текстового поля;
- email — создания поля для ввода email;
- hidden — создания скрытого поля;
- checkbox — создания поля для проставления галочки;
- radio — создания поля с возможностью выбрать вариант;
- button — создание кнопки;
- submit — создание кнопки с перезагрузкой страницы;
- reset — создание кнопки для очистки формы;
- file — создание кнопки выбора файла с компьютера;
- color — создание поля для выбора цвета;
- time — создание поля для выбора даты;
- image — создание поля с изображением;
Это лишь часть тех возможных значений атрибута type , которые вы можете применить на своем сайте.
Атрибуты:
- type — задает значение (тип) поля;
- form — нужен для связки поля с формой по id;
- checked — устанавливает поставлена ли галочка или же выбрана radio кнопка по умолчанию;
- disabled — отключает поле для ввода или любой другой взаимосвязи с ним;
- placeholder — текст подсказки прямиком в поле;
- readonly — возможно указать что поле не будет возможным для редактирования пользователем;
- required — устанавливает обязательное ли это поле или нет;
- value — устанавливается значение поля.
Пример:
Форма с полями
Что значит кнопка INPUT на пульте телевизора? Что будет, если нажать?
Сдаётся мне, input означает «вход». И такая кнопка на пульте телевизора позволяет выбирать источник сигнала: антенное гнездо, RCA («тюльпаны»), разъём SCART, HDMI (и который из них, если их несколько) или USB. Или что там у этого телевизора можно обнаружить.
Допустим, у вас постоянно включена антенна, через HDMI вы подключили ноутбук. С помощью кнопки Input выбираете порт HDMI как активный источник сигнала, смотрите себе кино или играете в игру, глядя в телик, а потом снова жмёте Input, выбираете антенну и вот у вас на экране обычное ТВ.
автор вопроса выбрал этот ответ лучшим
комментировать
в избранное ссылка отблагодарить
Vlad-44 [249K]
3 года назад
Кнопка input на телевизоре управляет входами видеосигнала поступающего на телевизор. При нажатии на неё открывается меню со всеми возможными источниками видеосигнала. Я на своём телевизоре пользуюсь двумя HDMI и USB. К HDMI подключена приставка расширяющая возможности телевизора, телевизор превращается в Смарт-телевизор, он может с такой приставкой заходить в интернет, почти как компьютер. Более продвинутый видеопроигрователь позволяет смотреть фильмы в любой кодировке, которые сам телевизор воспроизводить отказывается. По USB к телевизору постоянно подключен внешний HDD, на 4 ТБ, на нём любимые фильмы, сериалы. Когда уезжаю в санаторий, жесткий диск беру с собой, там всегда будет чем развлечься!
Что означает кнопка input
Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ) и кнопка с изображением ( image ). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
Атрибуты
accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. accesskey Переход к элементу с помощью комбинации клавиш. align Определяет выравнивание изображения. alt Альтернативный текст для кнопки с изображением. autocomplete Включает или отключает автозаполнение. autofocus Устанавливает фокус в поле формы. border Толщина рамки вокруг изображения. checked Предварительно активированный переключатель или флажок. disabled Блокирует доступ и изменение элемента. form Связывает поле с формой по её идентификатору. formaction Определяет адрес обработчика формы. formenctype Устанавливает способ кодирования данных формы при их отправке на сервер. formmethod Сообщает браузеру каким методом следует передавать данные формы на сервер. formnovalidate Отменяет встроенную проверку данных на корректность. formtarget Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. list Указывает на список вариантов, которые можно выбирать при вводе текста. max Верхнее значение для ввода числа или даты. maxlength Максимальное количество символов разрешенных в тексте. min Нижнее значение для ввода числа или даты. multiple Позволяет загрузить несколько файлов одновременно. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. pattern Устанавливает шаблон ввода. placeholder Выводит подсказывающий текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. size Ширина текстового поля. src Адрес графического файла для поля с изображением. step Шаг приращения для числовых полей. tabindex Определяет порядок перехода между элементами с помощью клавиши Tab. type Сообщает браузеру, к какому типу относится элемент формы. value Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx6
Тег INPUT Ваше имя:
Каким браузером в основном пользуетесь: Internet Explorer Opera Firefox
Комментарий
Результат данного примера показан на рис. 1.
Рис. 1. Вид элементов формы в браузере
Статьи по теме
- Адрес электронной почты
- Блокирование элементов форм
- Ввод чисел
- Веб-адрес
- Выбор цвета
- Загрузка файлов
- Защита от дурака
- Календарь
- Кнопки
- Однострочное текстовое поле
- Отправка данных формы
- Переключатели
- Подсказывающий текст
- Поле для пароля
- Поле для поиска
- Поле для телефона
- Поле с изображением
- Ползунок
- Проверка технологий HTML5
- Скрытое поле
- Сумасшедшие формы
- Флажки
- Шаблон ввода данных