Список типов полей input | Все виды input type

Тип input Описание

text Обычный текст

Поддерживаемые атрибуты:

autocomplete list maxlength name pattern placeholder readonly required size value

Пример:

<input type="text">

1	<input type="text">

Ваше имя:

email HTML5 e-mail адрес (требует ввода знака - '@')

Поддерживаемые атрибуты:

autocomplete list maxlength multiple name pattern placeholder readonly required size value

Пример:

<input type="email">

1	<input type="email">

Email:

tel HTML5 Номер телефона (при вводе на мобильных устройствах включается цифровая клавиатура)

Поддерживаемые атрибуты:

autocomplete list maxlength name pattern placeholder readonly required size value

Пример:

<input type="tel">

1	<input type="tel">

Телефон:

url HTML5 URL адрес (требует ввода точки и названия протокола)

Поддерживаемые атрибуты:

autocomplete list maxlength name pattern placeholder readonly required size value

Пример:

<input type="url">

1	<input type="url">

Адрес сайта:

password Пароль (прячет вводимые символы под звездочкой - '*')

Поддерживаемые атрибуты:

autocomplete list maxlength name pattern placeholder readonly required size value

Пример:

<input type="password">

1	<input type="password">

Пароль:

number HTML5 Число (добавляет элементы управления - стрелочки)

Поддерживаемые атрибуты:

autocomplete list maxlength max min name placeholder readonly required size step value

Пример:

<input type="number" step="1" min="18" max="100">

1	<input type="number" step="1" min="18" max="100">

Возраст:

search HTML5 Текст для поиска (отличие от обычного text только в стилистике)

Поддерживаемые атрибуты:

autocomplete list maxlength name pattern placeholder readonly required size value

Пример:

<input type="search">

1	<input type="search">

Поиск:

datetime-local HTML5 Локальные дата и время (добавляет элементы управления: календарь и часы)

Поддерживаемые атрибуты:

autocomplete list max min name readonly required step value

Пример:

<input type="datetime-local">

1	<input type="datetime-local">

Время регистрации:

date HTML5 Дата (добавляет элементы управления и календарь)

Поддерживаемые атрибуты:

autocomplete list max min name readonly required step value

Пример:

<input type="date">

1	<input type="date">

Дата рождения:

month HTML5 Месяц и год (добавляет элементы управления и календарь)

Поддерживаемые атрибуты:

autocomplete list max min name readonly required step value

Пример:

<input type="month">

1	<input type="month">

Месяц:

week HTML5 Номер недели (добавляет элементы управления и календарь)

Поддерживаемые атрибуты:

autocomplete list max min name readonly required step value

Пример:

<input type="week">

1	<input type="week">

Номер недели:

time HTML5 Время, часы и минуты (добавляет элементы управления)

Поддерживаемые атрибуты:

autocomplete list max min name readonly required step value

Пример:

<input type="time">

1	<input type="time">

Время подъема:

range HTML5 Регулятор выбора заданных значений

Поддерживаемые атрибуты:

autocomplete list max min name readonly required step value

Пример:

<input type="range" min="0" max"100" step="2">

1	<input type="range" min="0" max"100" step="2">

Громкость:

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

Поддерживаемые атрибуты:

checked name required value

Пример:

<input type="radio" name="gender" value="Женщина" >
<input type="radio" name="gender" value="Мужчина" >

1 2	<input type="radio" name="gender" value="Женщина" > <input type="radio" name="gender" value="Мужчина" >

Укажите пол.

Женщина:
Мужчина:

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

Поддерживаемые атрибуты:

checked name required value

Пример:

<input type="checkbox" name="airplane" value="Самолет" >
<input type="checkbox" name="car" value="Автомобиль" >
<input type="checkbox" name="train" value="Поезд" >
<input type="checkbox" name="ship" value="Корабль" >

Выберите транспорт.

Самолет:
Автомобиль:
Поезд:
Корабль:

color HTML5 Поле для выбора цвета

Поддерживаемые атрибуты:

autocomplete list name value

Пример:

<input type="color" value="#A6E22A">

1	<input type="color" value="#A6E22A">

Выберите цвет:

file Поле для загрузки файла

Поддерживаемые атрибуты:

accept multiple name required value

Пример:

<input type="file" accept="jpg,png,gif">

1	<input type="file" accept="jpg,png,gif">

image Изображение для отправки формы на сервер (аналог типу submit)

Поддерживаемые атрибуты:

alt formaction formenctype formmethod formnovalidate formtarget name placeholder value

Пример:

<input type="image" alt="Отправить форму" src="send.png" >

1	<input type="image" alt="Отправить форму" src="send.png" >

Отправить форму:

submit Кнопка отправки формы на сервер

Поддерживаемые атрибуты:

formaction formenctype formmethod formnovalidate formtarget name value

Пример:

<input type="submit" value="Отправить">

1	<input type="submit" value="Отправить">

reset Кнопка для очистки полей. Если в поле есть значение по умолчанию то будет оно будет вставлено вместо очистки.

Поддерживаемые атрибуты:

name value

Пример:

<input type="reset" value="Очистить форму">

1	<input type="reset" value="Очистить форму">

button Обычная кнопка (по умолчанию ничего не делает)

Поддерживаемые атрибуты:

name value

Пример:

<input type="button" value="Кнопка">

1	<input type="button" value="Кнопка">

hidden Скрытое поле с текстом

Поддерживаемые атрибуты:

name value

Пример:

<input type="hidden" value="Секретные данные">

1	<input type="hidden" value="Секретные данные">

Список атрибутов полей input

Кэширование SVG-спрайта в localStorage