Диапазон числовых значений

Поле типа search

Задание 1.

Создать поле для поиска информации и проследить его отображение в разных браузерах.

Рисунок 1 – листинг кода задания 1.

Вы видите, что теперь у input есть специальный тип search, который отвечает за поиск информации. Однако, в разных браузерах это поле будет отображаться по-разному. Вот, как отображение происходит в браузере Mozilla:

Рисунок 2 – отображение в браузере Mozilla Firefox

Вы видите, что отображается данное поле, как обычное поле ввода.

Однако, в Chrome появляется уже опция удаления введенных символов и очистки содержимого.

Рисунок 3 – отображение в Chrome.

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

Задание 2.

Самостоятельно пропишите в css файле для элемента input[type=”search”] закругленные углы.

В результате у Вас должно получиться следующее:

Рисунок 4 – поисковая форма с закругленными углами.

В HTML5 данное значение input имеет важное семантическое значение, а также дает большой функционал в CSS, с которым мы будем знакомиться позже. Однако, у Вас может возникнуть логичный вопрос – зачем использовать данное поле, если оно визуально выглядит в браузере абсолютно также, как и текстовое. Во-первых, визуализация стилей в браузере схожих с опциями операционной системы, обычно создано для удобства обычных пользователей. Во-вторых, поле поиска (обозначенное типом) позволяет вспомогательным устройствам вернее и точнее передавать сигналы и информацию с помощью этого элемента формы.

Контактная форма

В HTML5 создали специальные типы для input – email, site, tel. Теперь автоматически проверка будет происходить во время ввода информации человеком и не нужно дописывать вспомогательные скрипты.

Задание 1.

Создадим контактную форму, которая будет содержать 3 поля – email, телефон, сайт, а также кнопку отправления.

Рисунок 5 – листинг кода задания 1

Напоминаю Вам, что элемент fieldset служит для группировки элементов формы и является тут вспомогательным. Браузеры заключают элементы внутри fieldset в рамку. Элемент legend используется для создания заголовка группы элементов формы. Идет всегда после fieldset. Данные атрибуты прописаны еще в HTML4.

Во время тестирования формы, Вы сможете увидеть, что если вводить некорректную информацию, она будет подсвечена красным цветом:

Рисунок 6 – подсветка неправильно введенных данных

Однако, если все данные введены корректно, то форма выглядит иначе:

Рисунок 7 – форма с корректно введенными данными

Рисунок 8 – некорректная отправка данных в Google Chrome

C помощью элемента title можно добавлять собственные сообщения об ошибке. Данный элемент прописывается внутри input.

Задание 2.

Самостоятельно создайте для каждого из полей сообщения об ошибках.

Дата и время.

Безусловно важным атрибутом в некоторых форма является выборка даты и времени. Для элемента input появляются новые значения datetime.

Задание 1.

Создать поле в текущей форме с выбором даты и времени.

Рисунок 9 – листинг кода формы с выбором даты и времени

В Google Chrome данные отображаются максимально удобно:

Рисунок 10 – отображение формы в Google Chrome

Рисунок 11 – отображение формы в Google Chrome

В Mozilla же форма не работает.

Задание 2.

Совместите параметры datetime, создав новое поле для ввода

Помимо этого, у input существуют для данного типа дополнительные возможности – это ввод параметров min и max. Таким образом, человеку предлагается выбрать удобное время для звонка, допустим, с 10 утра до 10 вечера.

Задание 3.

Создайте дополнительно для полей типа date и time значения min и max, помните, что дата вводится в формате – «гггг-мм-дд», а время – 01:00.

Численный ввод

Для того, чтобы пользователь мог указывать нужное число товаров в корзине, либо вводить числовую информацию используется значение input number. Строго это число должно быть целым, никакого использования плавающей точки.

Задание 1.

С использованием новых параметров добавить на форму новое поле.

Рисунок 12 – листинг кода задания 1

Рисунок 13 – вид в браузере

Как Вы можете видеть, с помощью счетчика можно добавить или наоборот уменьшить количество выбранных товаров. Если же будет введена буква или другой недопустимый символ, то будет выдана ошибка при отправке. Если браузер не распознает данное поле, то покажет обычное текстовое.

У данного типа есть также дополнительные атрибуты, такие, как min, max, а также step. Step помогает определить шаг, который будет увеличиваться при нажатии на ползунок. Например, некоторые товары продаются попарно и для них step=”2”.

Задание 2.

Добавьте самостоятельно в форму минимальное значение, равное 2 и максимальное, равное 120, а также выставьте шаг равный двум.

Диапазон числовых значений

Для того, чтобы создать скроллинг, позволяющий выбрать некоторое числовое значение для элемента input появилось новое значение range.

Задание 1.

Создать ползунок для оценки товара с помощью range. Выставить на нем минимальные и максимальные значения, а также шаг.

Рисунок 14 – листинг кода задания 1

В браузере это выглядит следующим образом:

Рисунок 15 – отображение в браузере

Если же браузер не распознает технологию, он выдаст текстовое поле.

Выбор цвета.

Иногда пользователю необходимо выбрать цвет. Такое бывает при покупке одежды. Для этого существует специальное значение input – color. Данные в этом поле будут отображаться в RGB формате.

Задание 1.

Создайте поле, благодаря которому можно будет выбрать цвет.

Рисунок 16 – листинг кода задания 1.

Теперь для того, чтобы выбрать нужный мне цвет, мне нужно обратиться в палитру:

Рисунок 17 – выбор цвета в браузере

Раскрывающийся список.

В HTML5 имеется элемент datalist. Данный элемент применяется для создания списка различных значений и для управляемого ввода. Присваивание значений возможно по примеру использования элемента select. Также важным параметром является связь datalist с элементом input.

Визуально функции datalist похожи на функции автозаполнения.

Задание 1.

Необходимо создать для пользователя список возможных вариантов доставки с помощью разворачивающегося списка:

Рисунок 18 – листинг кода задания 1

Будьте внимательны, используйте только те имена, которые Вы дали элементам изначально.

В браузере отображение будет таким:

Рисунок 19 – отображение задания в браузере

Задание 2.

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

У Вас должна получиться следующая форма:

Рисунок 20 – результат работы самостоятельного задания

Обязательные поля формы

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

Задание 1.

Сделать поле email обязательным для заполнения.

Рисунок 21 – листинг кода задания 1

Далее для проверки я заполняю все поля, кроме e-mail. Вот, что говорит мне браузер:

Рисунок 22 – сообщение об ошибке от браузера

Задание 2.

Сделайте самостоятельно обязательными также поля сайт и телефон.