HTML тег input
Тег <input> определяет поле HTML формы, куда пользователь может вводить данные.
Тег <input> используется внутри тега <form> для декларации элементов управления вводом, которые позволяют пользователям вводить какие-либо данные.
В зависимости от атрибута type элементы управления вводом могут быть разных типов.
Тег <input> не может содержать какой-либо контент, он может содержать только атрибуты.
Для определения метки для элемента <input> используется элемент <label>.
Разница между HTML 4.01 и HTML5
В HTML5 атрибут align не поддерживается.
В HTML5 у тега <input> появилось несколько новых атрибутов, а у атрибута type несколько новых значений.
Различия между HTML и XHTML
В HTML тег <input>
Атрибуты тега <input>
| Атрибут | Описание |
|---|---|
| accept | Определяет тип файлов, которые принимает сервер |
| align | Определяет горизонтальное выравнивание содержимого элемента |
| alt | Определяет альтернативный текст, если элемент не удается отобразить |
| autocomplete | Включает/отключает автозаполнение элемента |
| autofocus | Автоматически передает фокус элементу |
| checked | Включает/выключает элемент ввода |
| disabled | Отключает поле ввода |
| form | Определяет к какой форме относится элемент ввода |
| formaction | Определяет, куда будут отправлены данные формы |
| formenctype | Определяет способ кодировки отправляемых на сервер данных формы |
| Определяет метод отправки на сервер данных формы | |
| formnovalidate | Отключает встроенную проверку корректности введенных данных формы |
| formtarget | Определяет, куда загружать ответ сервера после отправки данных формы |
| height | Определяет высоту элемента ввода |
| list | Ссылается на элемент со списком предопределенных значений |
| max | Определяет максимально допустимое для ввода значение |
| maxlength | Определяет максимальное количество символов допустимое для ввода в текстовое поля |
| min | Определяет минимально допустимое для ввода значение |
| multiple | Позволяет в элемент <input> вводить больше одного значения |
| name | Определяет имя элемента ввода |
| pattern | Определяет регулярное выражение, по которому проверяются вводимые данные |
| placeholder | Определяет «заполнитель» для текстового поля |
| readonly | Определяет, что поле формы должно быть только для чтения |
| required | Определяет поле формы, как обязательное для заполнения |
| size | Определяет ширину в символах элемента ввода |
| src | Определяет URL изображения для элемента ввода |
| step | Определяет шаг изменения числа для элемента ввода |
| type | Определяет тип элемента ввода |
| value | Определяет значение для элемента ввода |
| width | Определяет ширину элемента ввода |
Общие атрибуты
Тег <input> поддерживает общие атрибуты и атрибуты-события.
HTML пример
HTML форма с тремя полями ввода данных — двумя текстовыми и одной кнопкой отправки данных:
<form action='demo_form.asp'>
Имя: <input type="text" name="fname"><br>
Фамилия: <input type="text" name="lname"><br>
<input type="submit" value="Отправить">
</form>
Атрибут list тега | HTML справочник
HTML тег <input>Значение и применение
Атрибут list (HTML тега <input>) определяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента <datalist>.
Поддержка браузерами
Синтаксис:
<input list = "datalist_id">
Значения атрибута
| Значение | Описание |
|---|---|
| datalist_id | Значение атрибута должно соответствовать идентификатору элемента <datalist>. |
Отличия HTML 4.01 от HTML 5
Атрибут считается новым в HTML 5.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута list HTML тега <input>.</title> </head> <body> <form action = "#"> <!-- адрес передачи данных при отправке формы (относительный, либо абсолютный URL)--> <fieldset> <!--группируем элементы формы--> <legend>Составление маршрута</legend> <!--заголовок для элемента <fieldset> --> Город отправления: <select> <!--раскрывающийся список--> <option label = "Владивосток"> <option label = "Анапа"> <option label = "Москва"> <option label = "Смоленск"> <option label = "Якутск"> </select> <p>Аэропорт назначения: <input type = "text" list = "airports"> <!-- ссылаемся на список предопределенных вариантов --> </p> <datalist id = "airports"> <!--Список предопределенных вариантов для ввода--> <option value = "VVO" label = "Владивосток"> <option value = "MEM" label = "Анапа"> <option value = "VKO" label = "Москва Внуково"> <option value = "LNX" label = "Смоленск"> <option value = "YKS" label = "Якутск"> </datalist> <input type = "submit" value = "подтвердить"> <!--кнопка отправки формы --> </fieldset> </form> </body> </html>
В этом примере используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>). Список предопределенных вариантов мы подключили атрибутом list внутри однострочного текстового поля (тег <input>).
Элементом списков выступает тег <option>. Если в списках используется атрибут label, то текст надписи, которая указывает значение параметра берется из него. Если значение атрибута label не указано, то этим значением выступает содержимое элемента <option>, при этом необходимо использовать закрывающий элемент </option>.
Обращаю Ваше внимание, что если в списке предопределённых вариантов (<datalist>) используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>.
Результат нашего примера:
Пример использования атрибута list HTML тега <input>.HTML тег <input>Атрибут src тега | HTML справочник
HTML тег <input>Значение и применение
Атрибут src (HTML тега <input>) задает URL-адрес изображения, которое используется в качестве кнопки отправки.
Атрибут используется только с элементами управления, которые определяют графическую кнопку «отправить форму» (<input type = «image»>). Является обязательным атрибутом.
Поддержка браузерами
Синтаксис:
<input src = "URL">
Значения атрибута
| Значение | Описание |
|---|---|
| URL | Определяет URL-адрес изображения, которое используется в качестве кнопки отправки. Допускается использование как абсолютных, так и относительных адресов. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута src HTML тега <input></title> </head> <body> <form> Login: <input type = "text" name = "login"><br><br> <input type = "image" src = "../../images/right2.png" alt = "submit" width = "40" height = "40"> </form> </body> </html>
В данном примере мы создали элемент управления, который определяют графическую кнопку «отправить форму» (<input type = «image»>). В атрибуте src элемента мы указали относительный путь к файлу с изображением, в атрибуте alt указали альтернативный текст, для того случая если изображение по каким-то причинам не будет загружено. Размеры изображения в пикселях мы задали с использованием атрибутов width (ширина) и height (высота).
Результат нашего примера:
Пример использования атрибута src HTML тега <input> (путь к файлу с изображением).HTML тег <input>Атрибут multiple тега | HTML справочник
HTML тег <input>Значение и применение
Логический атрибут multiple (HTML тега <input>) указывает, что пользователь может ввести более одного значения в элементе (только для <input type = «file»> и <input type = «email»>).
При использовании <input type = «file»>, чтобы выбрать несколько файлов необходимо при выборе зажать кнопку Shift, или Ctrl. Если логический атрибут multiple отсутствует, то вы сможете выбрать только один файл, независимо от того зажат у вас Shift, или Ctrl. Если атрибут указан, то текст кнопки изменяется с «выберите файл» на «выбрать файлы», после выбора браузер отображает количество выбранных файлов.
При использовании <input type = «email»> необходимо перечислить несколько адресов электронной почты через запятую. Если логический атрибут multiple отсутствует, то браузер выведет сообщение, что поле не может содержать символ «,» (запятая).
Поддержка браузерами
Синтаксис:
<input multiple = "multiple">
Значения атрибута
| Значение | Описание |
|---|---|
| multiple | Значение атрибута требуется только в XHTML. |
Отличия HTML 4.01 от HTML 5
Атрибут multiple считается новым в HTML 5.Пример использования
<!DOCTYPE html> <html> <head> <title>Использование атрибута multiple HTML тега <input></title> </head> <body> <form> <!-- создаем форму --> <input type = "file" name = "files" multiple> <!--поле для выбора файлов --> <input type = "email" name = "emails" multiple> <!-- поле для ввода адресов электронной почты --> <input type = "submit" value = "отправить"> <!-- кнопка для отправки формы --> </form> </body> </html>
В данном примере мы создали форму (HTML тег <form>). Внутри формы мы поместили три элемента управления <input>, которые позволяют выбрать несколько файлов, указать несколько адресов электронной почты и отправить нашу форму. Обратите внимание, что без логического атрибута multiple мы могли бы выбрать только один файл, и указать только один адрес электронной почты.
Результат нашего примера:
Пример использования атрибута multiple HTML тега <input>HTML тег <input>