Атрибут type HTML тега <input>
HTML тег <input>Значение и применение
Атрибут type (HTML тега <input>), в зависимости от указанного значения задает какой вид поле ввода примет.
Поддержка браузерами
Поддержка атрибута:
| Атрибут |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| type | Да | Да | Да | Да | Да | Да |
Поддержка значений:
| Значение | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| button | Да | Да | Да | Да | Да | Да |
| checkbox | Да | Да | Да | Да | Да | Да |
color | 20.0 | 29.0 | 17.0* | Нет | Нет | 14.0 |
| date | 20.0 | Нет | 10.1 | Нет | Нет | 12.0 |
| datetime-local | 20.0 | Нет | 10.1 | Нет | Нет | 13.0 |
| email | 5.0 | 4.0 | 10.1 | 3.2 | 10.0 | 12.0 |
| file | Да | Да | Да | Да | Да | Да |
| hidden | Да | Да | Да | Да | Да | Да |
| image | Да | Да | Да | Да | Да | Да |
| month | 20.0 | Нет | 10.1 | Нет | Нет | 12.0 |
| number | 6.0 | 29.0 | 10.1 | 5.0 | 10.0 | 12.0 |
| password | Да | Да | Да | Да | Да | Да |
| radio | Да | Да | Да | Да | Да | Да |
| range | 4.0 | 23.0 | 10.1 | 3.1 | 10.0 | 12.0 |
| reset | Да | Да | Да | Да | Да | Да |
| search | 4.0 | 4.0 | 12.1 | 5.1 | 10.0 | 12.0 |
| submit | Да | Да | Да | Да | Да | Да |
| tel | 5.0 | 4.0 | 10.1 | 3.2 | 10.0 | 12.0 |
| text (по умолчанию) | Да | Да | Да | Да | Да | Да |
| time | 20.0 | Нет | 10.1 | Нет | Нет | 13.0 |
| url | 5.0 | 4.0 | 10.1 | 3.2 | 10.0 | 12.0 |
| week | 20.0 | Нет | 10.1 | Нет | Нет | 12.0 |
Синтаксис:
<input type = "button | checkbox | color | date | datetime-local | email | file | hidden | image | month | number | password | radio | range | reset | search | submit | tel | text | time | url | week">
Значения атрибута
| Значение | Описание |
|---|---|
| button | Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта. |
| checkbox | Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка. |
| color | Элемент управления для задания цвета (определяет палитру цветов). |
| date | Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время. |
| datetime-local | Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс. |
| email | Определяет поле для ввода адреса электронной почты. |
| file | Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут accept HTML тега <input>, чтобы определить типы файлов, которые пользователь может выбрать. |
| hidden | Элемент управления, который определяет скрытое поле ввода. |
| image | Элемент управления, который определяет графическую кнопку "отправить форму" (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота). |
| month | Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс. |
| number | Элемент управления для ввода числа с плавающей точкой. |
| password | Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле. |
| radio | Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель. |
| range | Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
|
| reset | Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию. |
| search | Определяет однострочное текстовое поле для ввода строки поиска |
| submit | Определяет кнопку отправки формы |
| tel | Определяет элемент управления для ввода телефонного номера. |
| text | Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов). Это значение по умолчанию. |
| time | Определяет элемент управления для ввода времени без указания часового пояса (hh:mm). |
| url | Определяет поле для ввода абсолютного URL-адреса. |
| week | Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута type</title> </head> <body> <form> Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br> Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br> <button type = "submit">Далее</button> </form> </body> </html>
В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
