HTML. Элемент формы <input>

Элемент html-формы <input>, его основные типы и атрибуты. Примеры отображения некоторых типов элемента <input> на веб-странице и взаимодействие с ними.

Элемент формы <input>

<input> — это элемент управления html-формы, который отображает объект (поле ввода), указанный в атрибуте type.

Элемент формы <input> можно рассматривать как коллекцию дочерних элементов управления (полей ввода) различных типов, предназначенных для ввода данных на веб-странице.

Синтаксис указания типа возвращаемого объекта для элемента <input>:

Типы элемента <input>

Все типы элемента <input>, предназначенные для использования в html:

Тип элемента <input> Возвращаемый объект
button командная кнопка, запускающая какой-либо сценарий
checkbox флажок, позволяющий выбрать несколько вариантов из предложенных, в том числе ноль вариантов
color поле с палитрой, позволяющей выбрать цвет
date поле со средством выбора даты (календарем)
datetime-local поле со средством выбора даты и времени
email поле для ввода email, который может автоматически проверяться при отправке
file кнопка, открывающая диалог выбора файла, и поле для отображения выбранного файла
hidden скрытое поле для служебной информации, которое не отображается на веб-странице
image кнопка для отправки данных формы на обработку в виде изображения
month поле со средством выбора месяца и года
number поле со счетчиком для выбора чисел
password поле для ввода пароля с маскировкой символов звездочками или кружками
radio переключатель, позволяющий выбрать только один вариант из нескольких
range элемент управления для ввода числа в виде отрезка с ползунком
reset кнопка сброса, возвращающая все значения элементов формы к значениям по умолчанию
search поле поиска — обычное текстовое поле, но с кнопкой очистки содержимого
submit кнопка для отправки данных формы на обработку
tel поле для номера телефона, которому можно задать шаблон для проверки введенного значения
text однострочное текстовое поле (тип элемента <input> по умолчанию)
time поле со средством выбора времени
url поле для ввода URL-адреса, которое, в зависимости от поддержки браузера, может автоматически проверяться при отправке
week поле со средством выбора недели и года

Стоит отметить, что отдельные из перечисленных выше типов элемента <input>, поддерживаются не всеми браузерами.

Несмотря на то, что скрытое поле hidden не отображается на веб-странице, оно доступно и может быть отредактировано с помощью инструментов разработчика любого браузера или функции «Просмотр исходного кода».

Атрибуты элементов управления

Основные атрибуты элемента <input> и других элементов управления, предназначенные для использования в html:

Атрибут Описание
autofocus указывает, что поле ввода должно автоматически получать фокус при загрузке веб-страницы
checked указывает, что поле ввода должно быть выбрано при загрузке веб-страницы (для type="checkbox" и type="radio" )
disabled отключает поле ввода
max максимальное значение для поля ввода
maxlength максимальное количество символов для поля ввода
min минимальное значение для поля ввода
multiple разрешает вводить в поле ввода более одного значения (для type="email" и type="file" )
pattern регулярное выражение для проверки введенного значения в поле ввода
placeholder подсказка, описывающая ожидаемое значение поля ввода
readonly указывает, что поле ввода доступно только для чтения
required указывает, что поле ввода является обязательным для заполнения
size ширина поля ввода в символах
step определяет шаг (интервал чисел) для числовых полей ввода
value значение по умолчанию для поля ввода

Для элемента type="image" есть атрибуты height и width, которые задают высоту и ширину изображения.

Примеры

Для проведения тестов с элементами управления формы, используйте файл test.html.

Пример 1

Выбор цвета с помощью элемента ввода <input type="color">, определение числового значения выбранного цвета и запись его в элементы формы <output> и <input>:

Результат:

Нажмите и выберите цвет:

Вывод значения цвета в элемент output: 0

Вывод значения цвета в элемент input:


Пример 2

Автоматический вывод значения элемента управления <input type="range"> в элемент формы <input>:

Результат:

Передвиньте ползунок элемента range:

-100 100

Значение элемента range:


Кнопка «Сбросить» (элемент <input type="reset">) вернет всем элементам управления формы значения по умолчанию.

Пример 3

Выбор значения из списка с помощью переключателя и автоматическое отображение значения выбранного элемента в текстовом поле <input>:

Все опции одного переключателя должны иметь одно имя, так как переключатели с разными именами могут быть выбраны все одновременно и будут работать как флажки.

Выберите слово из списка:

Бокал

Ведро

Кубик

Лунка

Ступа


С помощью атрибута checked значением блока переключателей по умолчанию выбрана опция со словом «Лунка».

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.