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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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=""> Указывает тип ввода для отображения на дисплее