Руководство по новым типам input в HTML5

В HTML5 было введено несколько новых типов <input>, например электронная почта (email), дата (date), время (time), цвет (color), диапазон (range) и т. д., чтобы сделать формы более интерактивными. Однако, если браузер не сможет распознать эти новые типы <input>, он будет обрабатывать их как обычные текстовые поля.

В этом разделе мы кратко рассмотрим каждый из новых типов <input>:

Еще был введен тип datetime, но на данный момент он уже устарел.

Input type Color

Тип color позволяет пользователю выбрать цвет из палитры и возвращает значение цвета в шестнадцатеричном формате (#rrggbb). Если вы не укажете значение, по умолчанию вернется #000000 — это черный цвет.

Посмотрим следующий пример, чтобы понять, как это работает:

<form>
    <label for="mycolor">Select Color:</label>
    <input type="color" value="#00ff00" id="mycolor">
</form>

Input type Date

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

Значение даты включает год, месяц и день, но не время.

<form>
    <label for="mydate">Select Date:</label>
    <input type="date" value="2019-04-15" id="mydate">
</form>

Input type Datetime-local

Тип datetime-local позволяет пользователю выбирать как локальную дату и время, включая год, месяц и день, так и время в часах и минутах.

Посмотрим следующий пример, чтобы понять, как это работает:

<form>
    <label for="mydatetime">Choose Date and Time:</label>
    <input type="datetime-local" id="mydatetime">
</form>

Input type Email

Тип email позволяет пользователю вводить адрес электронной почты. Он очень похож на стандартный тип ввода текста, но если он используется в сочетании с атрибутом required, браузер будет искать шаблон электронной почты, чтобы обеспечить правильное форматирование адреса.

Посмотрим на примере:

<form>
    <label for="myemail">Enter Email Address:</label>
    <input type="email" id="myemail" required>
</form>

Input type Month

Тип month позволяет пользователю выбрать месяц и год из выпадающего календаря.

Значением является строка в формате «YYYY-MM», где YYYY — четырехзначный формат года, а MM — номер месяца. Давайте посмотрим пример, чтобы увидеть, как это работает:

<form>
    <label for="mymonth">Select Month:</label>
    <input type="month" id="mymonth">
</form>

Input type Number

Тип number может использоваться для ввода числового значения. Вы также можете разрешить пользователю вводить только допустимые значения, используя дополнительные атрибуты min, max и step.

Следующий пример позволит вам ввести числовое значение от 1 до 10.

<form>
    <label for="mynumber">Enter a Number:</label>
    <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>

Input type Range

Тип range может использоваться для ввода числового значения в указанном диапазоне. Он работает очень похоже на number, но предлагает более простое управление для ввода чисел.

Посмотрим на примере:

<form>
    <label for="mynumber">Select a Number:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>

Input type Search

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

Поле поиска обычно ведет себя как обычное текстовое поле, но в некоторых браузерах, таких как Chrome и Safari, как только вы начинаете вводить текст в поле, в правой части поля появляется небольшой крестик, который позволяет быстро очистить поле поиска. Давайте посмотрим на примере:

<form>
    <label for="mysearch">Search Website:</label>
    <input type="search" id="mysearch">
</form>

Input type Tel

Тип tel можно использовать для ввода номера телефона.

Браузеры изначально не поддерживают проверку ввода tel. Однако вы можете использовать атрибут placeholder, чтобы помочь пользователям ввести телефонный номер в правильном формате или указать регулярное выражение для проверки ввода с помощью шаблона. Давайте посмотрим на пример:

<form>
    <label for="myphone">Telephone Number:</label>
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>

Input type Time

Тип time можно использовать для ввода времени (часы и минуты).

Браузер может использовать 12- или 24-часовой формат для ввода времени, основываясь на настройках времени локальной системы пользователя.

<form>
    <label for="mytime">Select Time:</label>
    <input type="time" id="mytime">
</form>

Input type URL

Тип url может использоваться для ввода URL или веб-адресов.

Вы можете использовать атрибут multiple для ввода более одного URL. Кроме того, если указан атрибут required, браузер автоматически выполнит проверку, чтобы убедиться, что в поле вводится только текст, соответствующий стандартному формату для URL. Давайте посмотрим, как это работает:

<form>
    <label for="myurl">Enter Website URL:</label>
    <input type="url" id="myurl" required>
</form>

Input type Week

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

Посмотрим следующий пример, чтобы понять, как это работает:

<form>
    <label for="myweek">Select Week:</label>
    <input type="week" id="myweek">
</form>