Атрибут type

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

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
Значение	Internet Explorer				Chrome				Opera				Safari				Firefox
Значение	6.0	7.0	8.0	9.0	8.0	9.0	10.0	11.0	9.6	10.0	10.60	11.0	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
color
date
datetime
datetime-local
email
number
range
search
tel
time
url
month
week

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

text

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

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 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="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

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

HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

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

Если вам понравились материалы сайта, вы можете поддержать сайт, купив справочник по HTML в формате CHM, в виде набора HTML-файлов или в формате PDF за 30 р.