Атрибут 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
Значение
color142011.51129
date132010.157
datetime112010.1
datetime-local112010.1
email1011510.154
month132010.1
number1011610.1529
range1011410.13.123
search1011510.154
tel1011510.154
time132010.157
url101181564
week132010.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.

Браузеры ?

Браузеры

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

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

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

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

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