Атрибут type
Влад Мержевич
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
3.0+
1.0+
4.0+
1.0+
1.0+
1.0+
1.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 и получаемый вид поля формы.
| Тип | Описание | Вид |
|---|---|---|
| button | Кнопка. | |
| checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе |
| file | Поле для ввода имени файла, который пересылается на сервер. | |
| hidden | Скрытое поле. Оно никак не отображается на веб-странице. | |
| image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. | |
| password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. | |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе |
| reset | Кнопка для возвращения данных формы в первоначальное значение. | |
| submit | Кнопка для отправки данных формы на сервер. | |
| text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |
В HTML5 добавлены новые значения, представленные в табл. 2.
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
Поддержка этих значений браузерами показана в табл. 3.
Табл. 3. Поддержка браузерами значений HTML5 Значение
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
color
21.0+
11.01+
date
5.0+
10.62+
5.0+
5.0+
datetime
5.0+
10.62+
5.0+
5.0+
datetime-local
5.0+
10.62+
5.0+
5.0+
email
10.0
5.0+
10.62+
5.0+
4.0+
2.3+
3.1+
month
5.0+
10.62+
5.0+
5.0+
number
10.0
6.0+
10.62+
5.0+
2.3+
4.0+
range
10.0
5.0+
10.62+
5.0+
23.0+
5.0+
search
10.0
5.0+
11.01+
5.0+
4.0+
4.0+
tel
10.0
5.0+
11.01+
5.0+
4.0+
3.1+
time
5.0+
10.62+
5.0+
5.0+
url
10.0
5.0+
10.62+
5.0+
4.0+
2.3+
3.1+
week
5.0+
10.62+
5.0+
5.0+
Значение по умолчанию
text
Пример 1
HTML5IECrOpSaFx
<!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="images/imgbutton.gif"></p>
</form>
</body>
</html>Пример 2
HTML5IECrOpSaFx
<!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>