HTML5 для веб-дизайнеров - Кит Джереми

Типы полей ввода

В HTML5 стало намного больше вариантов атрибута type элемента input. Здесь нужно заасфальтировать столько тропок, что это похоже на строительные работы после того, как по лесу в панике пробежала толпа дачников.

Поиск

Элемент input со значением “search” в атрибуте type будет вести себя примерно так же, как элемент ввода со значением “text” атрибута type:

<label for="query">Поиск</label>

<input id="query" name="query" type="search">

Единственная разница между “text” и “search” состоит в том, что браузер может отображать поле для поиска иначе для того, чтобы соответствовать стилю полей поиска в операционной системе. Именно так делает Safari (рис. 4.04).

Рис. 4.04. Safari устанавливает стили полей поиска в соответствии с Mac OS

Контакты

В HTML5 добавилось три новых типа type для особенных типов контактов: e-mail-адресов, веб-сайтов и номеров телефонов:

<label for="email">Email-адрес</label>

<input id="email" name="email" type="email">

<label for="website">Вебсайт</label>

<input id="website" name="website" type="url">

<label for="phone">Телефон</label>

<input id="phone" name="phone" type="tel">

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

Разработчики Safari уверяют, что их браузер поддерживает эти новые типы ввода, но при быстром взгляде на форму в десктоп-браузере не видно никаких различий с простым использованием type="text". Однако, если вы начнете работать с этой же формой в Mobile Safari, различия станут очевидными. Браузер показывает разные экранные клавиатуры в зависимости от значения атрибута type (рис. 4.05).

Тонко сделано, Webkit, тонко.

Рис. 4.05. Mobile Safari показывает разные экранные клавиатуры в зависимости от значения атрибута type

Ползунки

Большое количество JavaScript-библиотек предлагают набор виджетов, которые можно использовать в веб-приложениях. Они отлично работают – пока включен JavaScript. Было бы прекрасно, если бы пользователям не приходилось скачивать JavaScript-файл каждый раз, когда мы хотим добавить интересный элемент управления на нашу страницу.

Классический пример – ползунок. До сих пор нам приходилось использовать JavaScript для того, чтобы эмулировать этот в каком-то смысле интерактивный элемент. В HTML5 благодаря type="range" можно воспользоваться элементом управления, встроенным в браузер:

<label for="amount">Почем опиум для народа?</label>

<input id="amount" name="amount" type="range">

Safari и Opera на данный момент поддерживают этот тип элемента ввода, предлагая похожие элементы управления (рис. 4.06).

Рис. 4.06. Тип ввода range в Safari и Opera

По умолчанию элемент ввода принимает значения от нуля до ста. Вы можете поставить свои собственные минимальные и максимальные значения с помощью атрибутов min и max:

<label for="rating">Ваша оценка</label>

<input id="rating" name="rating" type="range" min="1" max="5">

Для пользователей Safari и Opera все здорово и прекрасно; другие браузеры просто будут выводить обычное текстовое поле. Это, наверное, нормально, но вы, пожалуй, захотите использовать запасное решение на JavaScript для браузеров, которые не поддерживают type="range".

Проверка

Для того чтобы проверить, есть ли в браузере встроенная поддержка типов ввода, нужен прием, похожий на проверку на поддержку атрибута. Опять же вам нужно будет создать в памяти «фантомный» элемент input. Затем вы устанавливаете атрибут type на то значение, которое хотите проверить.

После этого вы запрашиваете значение свойства type, и если получаете значение “text”, то вы знаете, что браузер не поддерживает то значение, которое вы установили.

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

function inputSupportsType(test) {

var input = document.createElement('input');

input.setAttribute('type',test);

if (input.type == 'text') {

return false;

} else {

return true;

}

}

Теперь вы можете использовать эту функцию, чтобы удостовериться, что JavaScript-widget будет исполняться только в тех браузерах, которые не поддерживают определенный тип элемента как встроенный:

if (!inputSupportsType(‘range’)) {

// Код запасного решения на JavaScript.

}

Встроенный в браузер элемент ввода будет, разумеется, грузиться быстрее, чем решение на JavaScript, которому нужно ждать, пока загрузится вся DOM. Встроенный в браузер элемент управления будет также более доступен для технологий специальных возможностей, чем элемент, который написан на JavaScript, хотя – что весьма странно – элементом range в Safari на данный момент нельзя управлять с клавиатуры!

Счетчики

Встроенный в браузер элемент управления range не показывает пользователю свое внутреннее значение. Вместо этого номер переводится в графическое представление ползунка. Это отлично для определенных типов данных. Другие типы данных предназначены для того, чтобы пользователь мог видеть и выбирать числовое значение. Здесь на помощь приходит type="number":

<label for="amount">Почем опиум для народа?</label>

<input id="amount" name="amount" 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 вместе с годом.

Использовать типы ввода даты и времени достаточно просто:

<label for="dtstart">Дата начала</label>

<input id="dtstart" name="dtstart" type="date">

Opera реализует эти типы ввода с помощью своей запатентованной технологии, заставляющей все выглядеть безобразно (рис. 4.08).

Рис. 4.08. Встроенное в Opera отображение календаря – совершенно безобразное

Как обычно, браузеры, которые не поддерживают эти типы ввода, откатятся на запасной вариант – покажут обычное текстовое поле ввода. В этом случае вы можете попросить своих пользователей вводить дату и время в формате ISO или же использовать JavaScript-библиотеку по выбору, чтобы сгенерировать виджет. Убедитесь, что вы сначала проверяете встроенную поддержку этого типа в браузере:

if (!inputSupportsType('date')) {

// Сгенерировать виджет календаря.

}

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

Выбор цвета