Атрибут type

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

Синтаксис

<input type="button | checkbox | file | hidden | image | password | radio | reset | submit | text |
  color | date | datetime-local | email | number | range | search | tel | time | url | month | week">

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

Табл. 1. Значения type
Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. Пиво Чай Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звёздочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. Пиво Чай Кофе
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.

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

text

Пример

<!DOCTYPE html> <html lang="ru"> <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.png" width="120"></p> </form> </body> </html> <!DOCTYPE html> <html lang="ru"> <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>

Браузеры

3 12 1 4 1 1
3 1 6 1

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

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

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