Тип ввода >number – гибрид >text и >range. Он позволяет пользователям вводить значения напрямую, как поле text, но также позволяет браузерам проверить, что в поле вводятся только численные значения, как в элементе управления >range.
Дата и время
Один из самых популярных JavaScript-виджетов – виджет выбора даты в календаре. Вы знаете, как это выглядит: вы бронируете билет на самолет или создаете мероприятие – и вам нужно выбрать дату. Выплывает небольшой календарик, из которого вы можете выбрать дату.
Все эти виджеты календаря выполняют одну и ту же функцию, но вы увидите, что они реализованы на каждом сайте слегка по-разному. Встроенный в браузер виджет календаря позволит сгладить несоответствия и уменьшить нагрузку на когнитивные способности пользователя во время процесса выбора даты.
HTML5 вводит целую уйму типов полей ввода специально для даты и времени:
• >date предназначен для года, месяца и дня.
• >datetime предназначен для года, месяца и дня вместе с часами, минутами, секундами и информацией о временной зоне.
• >datetime-local – то же самое, но без информации о временной зоне.
• >time – только часы, минуты и секунды.
• >month – год и месяц, но без дня.
Все эти типы ввода будут записывать временные величины в какой-либо части стандартного формата YYYY-MM-DDThh: mm: ss.Z (Y – год, M – месяц, D – день, h – час, m – минута, s – секунда, а Z – временная зона). Возьмем, например, дату и время, когда закончилась Первая мировая война, в 11:11 11 ноября 1918 года:
• >date: 1918-11-11
• >datetime: 1918-11-11T11:11:00+01
• >datetime-local: 1918-11-11T11:11:00
• >time: 11:11:00
• >month: 1918-11
Типа ввода >year нет, хотя существует тип ввода >week, который принимает число от 1 до 53 вместе с годом.
Использовать типы ввода даты и времени достаточно просто:
>
>type="date">
Opera реализует эти типы ввода с помощью своей запатентованной технологии, заставляющей все выглядеть безобразно (рис. 4.08).
>Рис. 4.08. Встроенное в Opera отображение календаря – совершенно безобразное
Как обычно, браузеры, которые не поддерживают эти типы ввода, откатятся на запасной вариант – покажут обычное текстовое поле ввода. В этом случае вы можете попросить своих пользователей вводить дату и время в формате ISO или же использовать JavaScript-библиотеку по выбору, чтобы сгенерировать виджет. Убедитесь, что вы сначала проверяете встроенную поддержку этого типа в браузере:
>if (!inputSupportsType('date')) {
> // Сгенерировать виджет календаря.
>}
Даже самый элегантно написанный виджет для календаря на JavaScript требует довольно сложного кода, чтобы сгенерировать таблицу дней и обработать события по выбору даты. Встроенные в браузер виджеты календаря должны быть намного более легкими и быстрыми, не говоря уже о том, что они будут соответствовать друг другу на разных сайтах.
Выбор цвета
Пожалуй, самый амбициозный элемент в HTML5, заменяющий JavaScript-виджет, – тип ввода >color. Он принимает значение в знакомом шестнадцатеричном формате: >#000000 – черный,