Атрибут type

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

Табл. 1. Значения type
Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. Пиво Чай Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.  
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. Пиво Чай Кофе
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения, представленные в табл. 2.

Табл. 2. Значения type в HTML5
Тип Описание
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.

Поддержка этих значений браузерами показана в табл. 3.

Табл. 3. Поддержка браузерами значений HTML5
Значение
color 14 20 11.5 11 29
date 13 20 10.1 57
datetime 11 20 10.1
datetime-local 11 20 10.1
email 10 11 5 10.1 5 4
month 13 20 10.1
number 10 11 6 10.1 5 29
range 10 11 4 10.1 3.1 23
search 10 11 5 10.1 5 4
tel 10 11 5 10.1 5 4
time 13 20 10.1 57
url 10 11 8 15 6 4
week 13 20 10.1

Значение по умолчанию

text

Пример

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>input, атрибут type</title> </head> <body> <form action="input10.php"> <p><input type="radio" name="drink" value="rad1"> Пиво<Br> <input type="radio" name="drink" value="rad2"> Чай<Br> <input type="radio" name="drink" value="rad3"> Кофе</p> <p><input type="image" src="image/imgbutton.gif"></p> </form> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>input, атрибут type</title> </head> <body> <form> <p>Введите число от 1 до 10</p> <p><input type="range" min="1" max="10"></p> </form> </body> </html>

Примечание

Android для типа number не поддерживает атрибуты step, min и max.

Браузеры

3 12 1 1 1 1
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 24.03.2018
Редакторы: Влад Мержевич