Новые типы ввода в HTML5

В этой главе подробно рассматриваются эти новые типы ввода:

Примечание:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • число
  • range
  • search
  • tel
  • time
  • url
  • week

Не все основные браузеры поддерживают новые типы ввода, но вы уже можете использовать их во всех основных браузерах. Даже если они не поддерживаются, они всё равно будут отображаться как обычные текстовые поля.Не все основные браузеры поддерживают новые типы ввода, но вы уже можете использовать их во всех основных браузерах. Они всё равно будут отображаться как обычное текстовое поле, даже если они не поддерживаются.

Тип ввода: color

Тип color используется в полях ввода для выбора цветов, как показано ниже:

Opera Safari Chrome Firefox Internet Explorer

Пример

Выберите цвет из палитры:

Выберите любимый цвет: <input type="color" name="favcolor">

Попробуйте »

Тип ввода: date

Тип date позволяет выбрать дату с помощью средства выбора даты.

Opera Safari Chrome Firefox Internet Explorer

Пример

Определите элемент управления датой:

День рождения: <input type="date" name="bday">

Попробуйте »

Тип ввода: datetime

Тип datetime позволяет выбрать дату (время UTC).

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите элемент управления датой и временем (местное время):

День рождения (дата и время): <input type="datetime" name="bdaytime">

Попробуйте »

Тип ввода: datetime-local

Тип datetime-local позволяет выбрать дату и время (без часового пояса).

OperaSafariChromeFirefoxInternet Explorer

Пример

Укажите дату и время (без часового пояса):

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

Попробуйте »

Тип ввода: email

Тип email используется для полей ввода, которые должны содержать адреса электронной почты.

OperaSafariChromeFirefoxInternet Explorer

Пример

При отправке формы поле email автоматически проверяет значение на корректность:

Электронная почта: <input type="email" name="email">

Попробуйте »

Примечание:Браузер Safari на iPhone поддерживает тип ввода email и предоставляет сенсорную клавиатуру, которая его дополняет (добавляя опции @ и .com).

Тип ввода: month

Тип month позволяет выбрать месяц.

OperaSafariChromeFirefoxInternet Explorer

Пример

Укажите месяц и год (без часового пояса):

День рождения (месяц и год): <input type="month" name="bdaymonth">

Попробуйте »

Тип ввода: number

Тип number используется для полей ввода, которые должны содержать числовые значения.

Вы также можете задать ограничения на числа, которые могут быть приняты:

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите числовое поле ввода (с ограничениями):

Количество (от 1 до 5): <input type="number" name="quantity" min="1" max="5">

Попробуйте »

Используйте следующие атрибуты, чтобы задать ограничения для типа number:

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

Попробуйте со всеми атрибутами ограниченийПопробуйте

Тип ввода: range

Тип range используется для полей ввода, которые должны содержать диапазон числовых значений.

Тип range отображается в виде ползунка.

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите поле ввода с ползунком (не требующее очень точных значений):

<input type="range" name="points" min="1" max="10">

Попробуйте »

Используйте следующие атрибуты, чтобы задать ограничения для типа number:

  • max - Для установки максимального значения
  • min - Для установки минимального значения
  • step - Для установки допустимого числового интервала
  • value - Для установки значения по умолчанию

Тип ввода: search

Тип search используется для полей поиска, например для поиска по сайту или поиска в Google.

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите поле поиска (аналогично поиску по сайту или поиску в Google):

Поиск в Google: <input type="search" name="googlesearch">

Попробуйте »

Тип ввода: tel

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите поле ввода номера телефона:

Номер телефона: <input type="tel" name="usrtel">

Попробуйте »

Тип ввода: time

Тип time позволяет выбрать время.

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите поле ввода типа time (без часового пояса):

Выберите время: <input type="time" name="usr_time">

Попробуйте »

Тип ввода: url

Тип url используется для полей ввода, которые должны содержать URL-адреса.

При отправке формы поле url автоматически проверяет значение.

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите поле ввода URL:

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

Попробуйте »

Примечание:Браузер Safari на iPhone поддерживает тип ввода url и предоставляет сенсорную клавиатуру, которая его дополняет (добавляя опции .com).

Тип ввода: week

Тип week позволяет выбрать неделю и год.

OperaSafariChromeFirefoxInternet Explorer

Пример

Определите неделю и год (без часового пояса):

Выберите неделю: <input type="week" name="week_year">

Попробуйте »

HTML5 <input> Tag

Тег Описание
<input> Описание элемента input
Другие расширения