САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Тип ввода



В этой главе описаны различные типы ввода данных элемента <input>.


Тип ввода Текст

<input type="text"> определяет однострочное поле ввода текста:

Пример

<form>
 Имя:<br>
 <input type="text" name="firstname"><br>
 Фамилия:<br>
 <input type="text" name="lastname">
</form>
Редактор кода »

Вот как код HTML будет отображаться в браузере:

Имя:

Фамилия:


Тип ввода Пароль

<input type="password"> определяет поле ввода пароля:

Пример

<form>
 Имя пользователя:<br>
 <input type="text" name="username"><br>
 Пароль пользователя:<br>
 <input type="password" name="psw">
</form>
Редактор кода »

Вот как код HTML будет отображаться в браузере:

Имя пользователя:

Пароль пользователя:

Символы в поле ввода пароля маскируются (отображаются звездочками или кругами).


Тип ввода Отправить

<input type="submit"> определяет кнопку для представления данных формы обработчика формы.

Обработчик формы обычно представляет собой серверную страницу со сценарием обработки входных данных.

Обработчик формы указывается в форме с помощью атрибута action:

Пример

<form action="/action_page.php">
 Имя:<br>
 <input type="text" name="firstname" value="Микки"><br>
 Фамилия:<br>
 <input type="text" name="lastname" value="Маус"><br><br>
 <input type="submit">
</form>
Редактор кода »

Вот как код HTML будет отображаться в браузере:

Имя:

Фамилия:


Если нажмете на кнопку value="Отправить", получите текст по умолчанию:

Пример

<form action="/action_page.php">
 Имя:<br>
 <input type="text" name="firstname" value="Микки"><br>
 Фамилия:<br>
 <input type="text" name="lastname" value="Маус"><br><br>
 <input type="submit" value="Отправить">
</form>
Редактор кода »

Тип ввода Сброс

<input type="reset"> определяет кнопку сброса, которая сбросит все значения формы, к значениям по умолчанию:

Пример

<form action="/action_page.php">
 Имя:<br>
 <input type="text" name="firstname" value="Микки"><br>
 Фамилия:<br>
 <input type="text" name="lastname" value="Маус"><br><br>
 <input type="submit" value="Отправить">
 <input type="reset">
</form>
Редактор кода »

Вот как код HTML будет отображаться в браузере:

Имя:

Фамилия:


Если Вы измените входные значения и затем нажмите кнопку "Сбросить", то данные формы будут сброшены и назначены по умолчанию.


Тип ввода Радиокнопки

<input type="radio"> определяет радиокнопки.

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

Пример

<form>
 <input type="radio" name="gender" value="мужчина" checked> Мужчина<br>
 <input type="radio" name="gender" value="женщина"> Женщина<br>
 <input type="radio" name="gender" value="другие"> Другие
</form>
Редактор кода »

Вот как код HTML будет отображаться в браузере:

Мужчина
Женщина
Другие

Тип ввода Флажки

<input type="checkbox"> определяет флажки.

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

Пример

<form>
 <input type="checkbox" name="vehicle1" value="Велосипед"> У меня есть велосипед<br>
 <input type="checkbox" name="vehicle2" value="Автомобиль"> У меня есть автомобиль
</form>
Редактор кода »

Вот как код HTML будет отображаться в браузере:

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

Тип ввода Кнопка

<input type="button"> определяет кнопку:

Пример

<input type="button" onclick="alert('Привет Мир!')" value="Нажми на меня!">
Редактор кода »

Вот как код HTML будет отображаться в браузере:


Типы ввода HTML5

Добавлены несколько новых типов ввода HTML5:

  • color - цвет
  • date - дата
  • datetime-local - дата_время-локальная
  • email - электронная почта
  • month - месяц
  • number - число
  • range - диапазон
  • search - поиск
  • tel - телефон
  • time - время
  • url - url-адрес
  • week - неделя

Новые типы входных данных, которые не поддерживаются в старых браузерах, будут вести себя как <input type="text">.


Типы ввода Цвет

<input type="color"> используется для полей ввода, которые содержат цвет.

Выбор цвета может отображаться в поле ввода в зависимости от поддержки браузера.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Выберите любой цвет:
 <input type="color" name="favcolor">
</form>
Редактор кода »

Типы ввода Дата

<input type="date"> используется для поля ввода, которые содержат дату.

Выбор даты может отображаться в поле ввода в зависимости от поддержки браузера.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Дата рождения:
 <input type="date" name="bday">
</form>
Редактор кода »

Можно также добавить ограничения к датам:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Введите дату до 1980-01-01:
 <input type="date" name="bday" max="1979-12-31"><br>
 Введите дату, после 2000-01-01:
 <input type="date" name="bday" min="2000-01-02"><br>
</form>
Редактор кода »

Тип ввода Дата_время-локальная

<input type="datetime-local"> указывает поле ввода даты и времени без часового пояса.

Выбор даты_время может отображаться в поле ввода в зависимости от поддержки браузера.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Дата рождения (дата и время):
 <input type="datetime-local" name="bdaytime">
</form>
Редактор кода »

Тип ввода Электронная почта

<input type="email"> используется для полей ввода адреса электронной почты.

Адрес электронной почты может быть автоматически проверена при отправке в зависимости от поддержки браузера.

Некоторые смартфоны распознают тип электронной почты и добавляют к клавиатуре ".com" для того чтобы соответствовать входному сигналу электронной почты.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 E-mail:
 <input type="email" name="email">
</form>
Редактор кода »

Тип ввода Месяц

<input type="month"> позволяет пользователю выбрать месяц и год.

Выбор даты может отображаться в поле ввода в зависимости от поддержки браузера.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Дата рождения (месяц и год):
 <input type="month" name="bdaymonth">
</form>
Редактор кода »

Тип ввода Число

<input type="number"> определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера применить.

В следующем примере отображается числовое поле ввода, где можно ввести значение от 1 до 5:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Числа (от 1 до 5):
 <input type="number" name="quantity" min="1" max="5">
</form>
Редактор кода »

Ограничения ввода

Ниже приведен список некоторых распространенных ограничений ввода (некоторые атрибуты являются новыми в HTML5):

Атрибуты Описание
disabled Указывает, что поле ввода должно быть отключено
max Задает максимальное значение для поля ввода
maxlength Указывает максимальное число символов для поля ввода
min Задает минимальное значение для поля ввода
pattern Задает регулярное выражение для проверки входных значений
readonly Указывает, что поле ввода доступно только для чтения (изменение невозможно)
required Указывает, что поле ввода (должны быть заполнено)
size Задает ширину (в символах) поля ввода
step Задает законные числовые интервалы для поля ввода
value Задает значение по умолчанию для поля ввода

Дополнительные сведения об ограничениях ввода см. в следующей главе.

В следующем примере отображается числовое поле ввода, где можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию - 30:

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Числа:
 <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Редактор кода »

Тип ввода Диапазон

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

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 <input type="range" name="points" min="0" max="10">
</form>
Редактор кода »

Тип ввода Поиск

<input type="search"> используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Поиск Google:
 <input type="search" name="googlesearch">
</form>
Редактор кода »

Тип ввода Телефон

<input type="tel"> используется для поля ввода телефонного номера.

Выбор телефона в настоящее время поддерживается только в Safari 8.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Телефон:
 <input type="tel" name="usrtel">
</form>
Редактор кода »

Тип ввода Время

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

Выбор времени проверяется в поле ввода в зависимости от поддержки браузера

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Выберите время:
 <input type="time" name="usr_time">
</form>
Редактор кода »

Тип ввода Url-адрес

<input type="url"> используется для полей ввода содержания URL-адреса.

В поле URL-адрес проверяется автоматически при отправке в зависимости от поддержки браузера.

Некоторые смартфоны распознают тип URL-адреса и добавляют к клавиатуре ".com", для соответствия входного URL-адреса.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Добавить домашнюю страницу:
 <input type="url" name="homepage">
</form>
Редактор кода »

Тип ввода Неделя

<input type="week"> позволяет пользователю выбрать день недели и год.

Выбор даты отобразится в поле ввода в зависимости от поддержки браузера.

Opera Safari Chrome Firefox Internet Explorer

Пример

<form>
 Выберите неделю:
 <input type="week" name="week_year">
</form>
Редактор кода »


Атрибут Типа ввода HTML

Тег Описание
<input type=""> Указывает тип ввода для отображения на дисплее