Другие поля для ввода дат

Поля для задания даты и времени уже поддерживаются в этих браузерах.

В предыдущих заданиях мы уже использовали поля с типами date и time, но существуют и другие типы полей для ввода дат:

datetime	выбор даты с указанием времени (c учетом временной зоны)
datetime-local	выбор даты с указанием времени (без учета временной зоны)
week	выбор порядкового номера недели в году и года
month	выбор месяца и года

Используем поле для выбора месяца в нашей форме. А для выбора числа используем уже знакомый тип number.

Если браузер не поддерживает поле для ввода месяца, то вместо него отображается обычное текстовое поле.

Выбор из диапазона

Поле для выбора из диапазона значений уже поддерживаются в этих браузерах

В нашей форме обязательно должна быть возможность выбрать количество дней, на которое будет осуществляться бронирование. Для этой цели подходит тип поля range.

Такое поле выглядит как шкала с ползунком и позволяет выбрать число из некоторого интервала значений.

Пример записи:

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

Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений. А атрибут step устанавливает величину шага изменения значения.

Область для вывода результата

Область для вывода результата уже поддерживаются в этих браузерах

Чтобы видеть количество дней в брони, используем новый HTML5-тег <output>.

Тег <output> представляет собой область, куда выводятся какие-либо результаты вычислений, обычно полученные при помощи JavaScript.

Пример записи:

<output name="sum">[значение по умолчанию]</output>

Значение по умолчанию при этом можно не задавать, тогда область вывода будет пустой.

В этом задании мы добавим в форму область вывода, в которой будет отображаться количество дней, выбранное с помощью поля-ползунка.

Группировка полей формы

Когда формы становятся очень большими, возникает потребность зрительно отделить одни поля от других. Для группировки полей используется тег fieldset.

Пример:

<fieldset> <input type="text"> <input type="text"> <input type="text"></fieldset><fieldset> <textarea></textarea></fieldset>

По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS можно изменить его внешний вид.

Также для каждой группы можно добавить её заголовок. Для этого внутрь тега fieldsetнадо поместить тег legend:

<fieldset> <legend>Заголовок группы</legend> <input type="text"></fieldset>

Паттерны значений полей

Паттерны значений полей уже поддерживаются в этих браузерах.

Итак, у нас готова форма бронирования отеля, но чтобы отправиться в Норвегию, Кексику нужно получить визу.

Естественно, ему лень идти в консульство и лично предъявлять там усы, лапы и хвост, поэтому он решает создать ещё одну форму, которая сможет отправить все необходимые данные по получению визы прямиком в лапы норвежского посла.

Ни для кого не секрет, что основным кошачьим документом является котопаспорт, в котором зафиксированы окрас кота, его личные данные и гастрономические предпочтения.

Поэтому первым делом добавим в форму поле для номера котопаспорта. Это обычное текстовое поле, но с ограничениями на формат номера, чтобы не злить лишний раз норвежского посла ошибками и опечатками.

Чтобы добавить автоматическую проверку формата номера в поле, используем атрибут pattern, в котором с помощью регулярного выражения опишем требуемый формат.

Подробнее о регулярных выражениях можно почитать, например, на Википедии.

Поле ввода телефона

Для получения визы нужно сообщить и номер телефона Кексика, поэтому добавим в форму ещё одно поле с типом tel.

Новый тип поля tel появился в HTML5 и отвечает за ввод телефонных номеров.

Также воспользуемся атрибутом pattern, чтобы исключить ошибки при заполнении формы.

В мобильных браузерах при фокусе на такое поле появляется клавиатура, позволяющая вводить только цифры и символы телефонных номеров.

 

⇐ Предыдущая1234567

Поделиться: