Атрибут type HTML тега <input>

HTML тег <input>

Значение и применение

Атрибут type (HTML тега <input>), в зависимости от указанного значения задает какой вид поле ввода примет.

Поддержка браузерами

Поддержка атрибута:

АтрибутChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
typeДаДаДаДаДаДа

Поддержка значений:

ЗначениеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
buttonДаДаДаДаДаДа
checkboxДаДаДаДаДаДа
colorhtml520.029.017.0*НетНет14.0
datehtml520.0Нет10.1НетНет12.0
datetime-localhtml520.0Нет10.1НетНет13.0
emailhtml55.04.010.13.210.012.0
fileДаДаДаДаДаДа
hiddenДаДаДаДаДаДа
imageДаДаДаДаДаДа
monthhtml520.0Нет10.1НетНет12.0
numberhtml56.029.010.15.010.012.0
passwordДаДаДаДаДаДа
radioДаДаДаДаДаДа
rangehtml54.023.010.13.110.012.0
resetДаДаДаДаДаДа
searchhtml54.04.012.15.110.012.0
submitДаДаДаДаДаДа
telhtml55.04.010.13.210.012.0
text (по умолчанию)ДаДаДаДаДаДа
timehtml520.0Нет10.1НетНет13.0
urlhtml55.04.010.13.210.012.0
weekhtml520.0Нет10.1НетНет12.0

Синтаксис:

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

Значения атрибута

ЗначениеОписание
button
Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox

Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
colorhtml5
Элемент управления для задания цвета (определяет палитру цветов).
datehtml5
Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-localhtml5
Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
emailhtml5
Определяет поле для ввода адреса электронной почты.
file
Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут accept HTML тега <input>, чтобы определить типы файлов, которые пользователь может выбрать.
hidden
Элемент управления, который определяет скрытое поле ввода.
image
Элемент управления, который определяет графическую кнопку "отправить форму" (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами widthhtml5 (ширина) и heighthtml5 (высота).
monthhtml5
Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
numberhtml5
Элемент управления для ввода числа с плавающей точкой.
password
Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio

Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
rangehtml5
Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
  • min = "0"
  • max = "100"
  • value = min + (max - min) / 2, или min (если max меньше чем min)
  • step = "1"
reset
Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
searchhtml5
Определяет однострочное текстовое поле для ввода строки поиска
submit
Определяет кнопку отправки формы
telhtml5
Определяет элемент управления для ввода телефонного номера.
text
Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов).
Это значение по умолчанию.
timehtml5
Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
urlhtml5
Определяет поле для ввода абсолютного URL-адреса.
weekhtml5
Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута type</title>
</head>
<body>
	<form>
		Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
		Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
		<button type = "submit">Далее</button>
	</form>
</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholderhtml5), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Пример использования атрибута type HTML тега <input> (значения text и password).
Пример использования атрибута type HTML тега <input> (значения text и password).
HTML тег <input>