Атрибут type
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
<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.
| Значение | ||||||
| color | 14 | 20 | 11.5 | 11 | 29 | |
| date | 13 | 20 | 10.1 | 57 | ||
| datetime | 11 | 20 | 10.1 | |||
| datetime-local | 11 | 20 | 10.1 | |||
| 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
Редакторы: Влад Мержевич
