html атрибут type

Атрибут type повідомляє браузеру, до якого типу належить елемент форми.

Без задання використовується тип: text.

Нотатка:	Атрибут `type` працює у всіх основних браузерах. Проте, не всі `input` типи працють у цих браузерах.
Порада:	Це не обов'язковий атрибут, але краще його вказати.
Порада:	Android для типу `number` не підтримує атрибути `step` , `min` і `max` .

Синтаксис

<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">

Атрибут type може отримувати 23 значення :

button: Кнопка.
checkbox: Прапорці. Дозволяють вибрати більше одного варіанту із запропонованих.
color: Віджет для вибору кольору.
date: Поле для вибору календарної дати.
datetime-local: Елемент управління для введення дати і часу без часового поясу.
email: Поле для ведення адреси електронної пошти. Перед відправкою перевіряється, що вхідний значення містить або порожній рядок, або дійсну адресу електронної пошти.
file: Поле для введення імені файлу, який пересилається на сервер. Використовуйте атрибут accept, щоб визначити типи файлів, які елемент керування може вибрати.
hidden: Приховане поле. Воно не відображається на веб-сторінці.
image: Поле із зображенням. При натисканні на малюнок дані форми відправляються на сервер.
month: Вибір місяця.
number: Введення чисел.
password: Звичайне текстове поле, але відрізняється від нього тим, що всі символи показуються зірочками. Призначено для того, щоб ніхто не підгледів який ви вводите пароль.
radio: Перемикачі. Використовуються, коли слід вибрати один варіант з кількох запропонованих.
range: Повзунок для вибору чисел в зазначеному діапазоні. Елемент управління для введення числа, точне значення якого не має значення. Цей тип управління використовує такі значення за замовчуванням, якщо відповідні атрибути не вказані:

min: 0

max: 100

value: min+ ( max- min) / 2

step: 1
reset: Кнопка для повернення даних форми в початкове значення.
search: Поле для пошуку.
submit: Кнопка для відправки даних форми на сервер.
tel: Для телефонних номерів.
text: Текстове поле. Призначене для введення данних за допомогою клавіатури.
time: Для часу.
url: Поле для редагування URL-адреси. Вхідне значення перевіряється на наявність URL-адресу перед поданням на сервер.
week: Поле для введення дати, що складається з номера тижневого року та номера тижня без часового поясу.
datetime: Визначає дату і час.

Переглядач
color	20+	29+	11+	11.5+	-	14+
datetime	20+	-	-	10.1+	11+	-
type	1+	+	-	10.1+	12+	3+
datetime-local	20+	-	-	10.1+	11+	-
email	5+	4+	5+	10.1+	10+	11+
month	20+	-	-	10.1+	13	-
range	4+	23+	3.1+	10.1+	11+	10+
number	6+	29+	5+	10.1+	11+	10+
search	5+	4+	5+	10.1+	11+	10+
tel	5+	4+	5+	10.1+	11+	10+
time	20+	57+	-	-	13+	-
url	8+	4+	6+	15+	11+	10+
radio	1+	1+	1+	1+	10+	2+
week	20+	-	-	10.1+	13+	-
date	20+	57+	-	10.1+	13+	-
password	1+	1+	1+	1+	2+	1++

Переглядач
type	1+	1+	1+	1+

Мобільних переглядачів ще не додано.

Приклади

Приклад 1
Приклад 2

Найпростіший приклад використання HTML атрибута type теґа <input>




  See the Pen 


  input.type_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Приклад використання HTML атрибута type теґа <input>(можливе некоректне спрацювання з мобільних пристроїв)




  See the Pen 


  input.type2_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

У HTML5 з'явилися наступні input типи: color, date, datetime-local, month, week, time, email, number, range, search, tel та url.

Різниця між XHTML та HTML

Немає жодної різниці.

HTML довідник

HTML Теґи