Атрибут 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. Указание местной даты и времени. |
| Добавлен в 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
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого атрибута, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера .
Синтаксис
Значения
В качестве значения используется MIME-тип — text/css .
Значение по умолчанию
Обязательный атрибут
Обязателен в HTML4 и XHTML, не нужен в HTML5.
HTML 4.01 IE Cr Op Sa Fx
Тег STYLE, атрибут type a:link < color: #003366; >a:visited < color: #660066; >a:hover < color: #800000; >a:active Lorem ipsum dolor sit amet
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут type
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Обязательный атрибут
Значения
В табл. 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.
| Значение | 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+ | |||
| 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+ |
Значение по умолчанию
HTML5 IE Cr Op Sa Fx
Тег input, атрибут type HTML5 IE Cr Op Sa Fx
Тег input, атрибут type Введите число от 1 до 10
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут type HTML тега ul
Атрибут type определяет вид маркера для использования в неупорядоченном HTML списке.
-
не поддерживается в HTML5.
Используйте стили CSS. Например, .
Синтаксис атрибута
Значения атрибута
| Значение | Описание |
|---|---|
| disc | Заполненный круг. Значение по умолчанию |
| circle | Незаполненный круг |
| square | Заполненный квадрат |
Пример использования атрибута
Атрибут type с неупорядоченным HTML списком: