<input> / Атрибут type

Описание

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

Синтаксис

HTML	<input type="button\|checkbox\|file\|hidden\|image\|password\|radio\|reset\|submit\|text">
XHTML	<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
Значение	IE	Edge	Chrome	Opera	Safari	Firefox	Android
color		14	20	11.5		29	4.4
date		13	20	10.1			4.4
datetime		11	20	10.1			4.4
datetime-local		11	20	10.1			4.4
email	10	11	5	10.1	5	4	3
month		13	20	10.1			4.4
number	10	11	6	10.1	5	29	4
range	10	11	4	10.1	3.1	23	4.3
search	10	11	5	10.1	5	4	2.3
tel	10	11	5	10.1	5	4	2.3
time		13	20	10.1			4.4
url	10	11	8	15	6	4	4
week		13	20	10.1			4.4

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

text

Пример 1. Элементы формы

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>
  <form action="handler.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="images/imgbutton.gif"></p>
  </form>
 </body>
</html>

Пример 2. Ползунок

<!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>

Примечание

Chrome с версии 20.0 начал поддерживать значения date, datetime и datetime-local в виде виджета календаря.

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
3	1	1	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

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

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

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