Что такое type в html

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

Атрибут type определяет тип элемента ввода.

Тип по умолчанию — text.

Этот атрибут не является обязательным, однако лучше всегда определять его.

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

В HTML5 для атрибута type были добавлены следующие новые значения: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, url.

Синтаксис атрибута

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

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

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

HTML форма с двумя разными элементами ввода — текстовое поле и кнопка отправки данных на сервер:

Источник

Что такое type в html

Если атрибут type не указан, то по умолчанию используется тип «text».

Поддержка браузеров

Синтаксис

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

Значение	Описание
button	Определяет кликабельную кнопку (в основном используется с JavaScript для активации скрипта)
checkbox	Определяет флажок
color	Определяет выбор цвета
date	Определяет элемент управления датой (год, месяц, день (без времени))
datetime-local	Определяет контроль даты и времени (год, месяц, день, время (без часового пояса)
email	Определяет поле для адреса электронной почты
file	Определяет поле выбора файла и кнопку «Обзора» (для загрузки файлов)
hidden	Определяет скрытое поле ввода
image	Определяет изображение как кнопку отправки
month	Определяет контроль месяца и года (без часового пояса)
number	Определяет поле для ввода номера
password	Определяет поле пароля
radio	Определяет переключатель
range	Определяет элемент управления диапазоном (например, ползунок)
reset	Определяет кнопку сброса
search	Определяет текстовое поле для ввода строки поиска
submit	Определяет кнопку отправки
tel	Определяет поле для ввода телефонного номера
text	По умолчанию. Определяет однострочное текстовое поле
time	Определяет элемент управления для ввода времени (без часового пояса)
url	Определяет поле для ввода URL
week	Определяет контроль недели и года (без часового пояса)

Еще примеры

Тип ввода: button

Кнопка, которая активирует JavaScript при нажатии на нее:

Тип ввода: checkbox

Флажки позволяют пользователю выбрать один или несколько вариантов из ограниченного числа вариантов:

У меня есть велосипед

У меня есть машина

Тип ввода: color

Выбрать цвет из палитры цветов:

Тип ввода: date

Определить дату контроля:

Тип ввода: datetime-local

Определить контроль даты и времени (без часового пояса):

Тип ввода: email

Определить поле для адреса электронной почты (будет автоматически проверяться при отправке):

Тип ввода: file

Определить поле выбора файла и кнопку «Обзор. » (для загрузки файлов):

Тип ввода: hidden

Определить скрытое поле (невидимое пользователю).

Скрытое поле часто хранит запись базы данных, которая должна быть обновлена при отправке формы:

Тип ввода: image

Определить изображение как кнопку отправки:

Тип ввода: month

Определить контроль месяца и года (без часового пояса):

Тип ввода: number

Определить поле для ввода номера (вы также можете установить ограничения на то, какие номера принимаются):

Для указания ограничений используйте следующие атрибуты:

Тип ввода: password

Определить поле пароля (символы маскируются):

Тип ввода: radio

Переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов:

Тип ввода: range

Определить элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие числа принимаются с атрибутами min, max и step:

Для указания ограничений используйте следующие атрибуты:

Тип ввода: reset

Определить кнопку сброса (сброс всех значений формы к значениям по умолчанию):

Совет: Используйте кнопку сброса осторожно! Это может раздражать пользователей, которые случайно активируют кнопку сброса.

Тип ввода: search

Определить поле поиска (например, поиск по сайту или поиск в Google):

Тип ввода: submit

Определить кнопку отправки:

Тип ввода: tel

Определить поле для ввода телефонного номера:

Тип ввода: text

Определить два однострочных текстовых поля, в которые пользователь может вводить текст:

Тип ввода: time

Определите элемент управления для ввода времени (без часового пояса):

Тип ввода: url

Определить поле для ввода URL:

Тип ввода: week

Определите контроль недели и года (без часового пояса):

Источник

Атрибут type

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

Синтаксис

Значения

В табл. 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.

Источник