if (!inputSupportsType(‘range’)) {
}
Встроенный в браузер элемент ввода будет, разумеется, грузиться быстрее, чем решение на JavaScript, которому нужно ждать, пока загрузится вся DOM. Встроенный в браузер элемент управления будет также более доступен для технологий специальных возможностей, чем элемент, который написан на JavaScript, хотя – что весьма странно – элементом range в Safari на данный момент нельзя управлять с клавиатуры!
Встроенный в браузер элемент управления range не показывает пользователю свое внутреннее значение. Вместо этого номер переводится в графическое представление ползунка. Это отлично для определенных типов данных. Другие типы данных предназначены для того, чтобы пользователь мог видеть и выбирать числовое значение. Здесь на помощь приходит type="number":
type="number" min="5" max="20">
Позволяя пользователю напрямую ввести значение в текстовое поле, браузеры также выводят элементы управления для того, чтобы пользователь мог уменьшить и увеличить значение (рис. 4.07).
Тип ввода 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 – черный, #FFFFFF – белый.
План таков, что браузеры должны реализовать встроенные диалоги выбора цвета – точно такие же, какие есть практически в каждом другом приложении на вашем компьютере. Пока ни один браузер этого не реализовал, но когда они это сделают, будет, ну, решительно круто.
А пока вы можете использовать решение на JavaScript, но не забудьте проверять на встроенную поддержку, ваш код застрахован на будущее для браузеров завтрашнего дня.
