HTML5 для веб-дизайнеров
- Краткая история языка разметки
- Модель HTML5
- Мультимедиа
- Формы 2.0
- Семантика
- HTML5 и современные условия
Когда браузеры стали поддерживать JavaScript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover и необходимость в скриптах для многих ситуаций первого плана отпала.
Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций, для которых прежде требовался JavaScript.
Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.
Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.
Текст-заглушка
Существует распространенный шаблон для оформления поисковых форм:
- Если поле пусто — вставить туда текст-заглушку.
- Когда поле в фокусе — убрать заглушку.
- Если пользователь оставил поле незаполненным и убрал фокус — вернуть ее.
При этом заглушка обычно выделяется немного более светлым цветом, чем вводимый в поле текст, что достигается при помощи CSS, JavaScript, или сочетания обоих.
В HTML5 все это реализуется при помощи простого параметра placeholder:
<label for="hobbies">Your hobbies</label>
<input id="hobbies" name="hobbies" type="text" placeholder="Owl stretching">
Так это будет выглядеть в браузере. Owl stretching — текст по умолчанию, приведенный в качестве примера.
В тех браузерах, что поддерживают этот атрибут, он работает прекрасно, но их пока не так много. Вам решать, что делать с остальными. В принципе, можно не напрягаться и не делать ничего совсем — данная функция все-таки хоть и удобна и приятна, но не жизненно важна. Но как вариант, можно разработать JavaScript-альтернативу; в этом случае сначала нужно будет убедиться, что браузер действительно не поддерживает placeholder.
Вот пример простой функции, которая проверяет поддержку определенного параметра:
function elementSupportsAttribute(element,attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
}
Она создает «фантомный» элемент в памяти — не на самой странице, — и затем смотрит, есть ли у прототипа этого элемента свойство с тем же же названием, что и параметр, которые вы проверяете. Функция вернет либо true, либо false.
С ее помощью вы можете подсунуть альтернативный код только для тех браузеров, которые не поддерживают данную возможность HTML5:
if (!elementSupportsAttribute('input','placeholder')) {
// Заглушка при помощи JavaScript описывается здесь.
}
Автофокус
«Привет, я функция автофокуса. Я знакома вам по таким ролям, как Google: мне повезет и Twitter: What’s happening?»
Этот шаблон очень прост и относительно легко реализуется в JavaScript. Суть его в том, что, когда страница загружена, нужно автоматически поставить фокус на определенном поле.
HTML5 позволяет использовать для этого булев параметр autofocus:
<label for="status">What's happening?</label>
<input id="status" name="status" type="text" autofocus>
Проблема только в том, что эта функция может ужасно раздражать. Очень часто, листая страницы в интернете, я использую клавишу пробела для быстрой прокрутки содержимого. На сайтах вроде Твиттера с этим автофокусом, я часто обнаруживаю, что вместо прокрутки заполняю поле пробелами.
Логика того, зачем этот параметр включен в спецификацию, вполне ясна, но он не идеален в плане юзабилити. Потому я советую его использовать аккуратно и только в случае явной пользы и при минимальной вероятности неудобств.
Одним из преимуществ переложения роли выполнения этой функции со скриптов на разметку состоит в том, что теоретически пользователи смогут ее отключать в настройках своего браузера. Ни один браузер, впрочем, пока это не позволяет, но все еще впереди. Как бы там ни было, сейчас она может быть отключена только вместе с JavaScript вообще — не самое лучшее решение; все равно что выкалывать себе глаза, чтобы избежать слишком яркого света.
Так же как и с параметром placeholder можно проверить наличие поддержки автофокуса в браузере и, при необходимости, добавить альтернативный код на JavaScript:
if (!elementSupportsAttribute('input','autofocus')){
document.getElementById('status').focus();
}
Параметр autofocus можно применить не только к элементам input, но к любым другим типам полей, например textarea или select. И, разумеется, только единожды на странице.
Required
JavaScript часто используется для проверки заполненности формы на стороне клиента. Снова, часть этой задачи теперь переложена на HTML5. Теперь можно указать, что определенное поле обязательно к заполнению при помощи булева параметра required.
<label for="pass">Ваш пароль</label>
<input id="pass" name="pass" type="password" required>
Теоретически, наличие незаполненного поля с этим параметром само себе должно не дать пользователю отправить данные на обработку. Но хотя пока браузеры этого и не делают, его все равно можно интегрировать для привычной обработки форм JavaScript-ом. Просто теперь вместо отбора элементов по, скажем class=«required», можно искать их по конкретно параметру required.
Автозаполнение
Современные браузеры не столько просто отображают веб-страницы, но и стараются повысить юзабилити, безопасность и удобство пользования ими. Функция автозаполнения форм — пример такого подхода. Большую часть времени она довольно полезна, но иногда может немного раздражать или даже быть потенциальным риском для безопасности. Я не против, когда браузер запоминает мои контактные данные, но я бы не хотел, чтобы он хранил логин и пароль от моего банковского счета на случай, если компьютер украдут.
HTML5 позволяет отключить автозаполнение как для отдельного поля, так и для целой формы. Параметр autocomplete — не булев, хоть и принимает всего два значения: on и off.
<form action="/selfdestruct" autocomplete="off">
По умолчанию он установлен на on, таким образом позволяя браузерам использовать автозаполнение без ограничений.
Как уже сказано, его так же можно добавить и к выборочным полям:
<input type="text" name="onetimetoken" autocomplete="off">
В данном случае, не существует никакой JavaScript альтернативы, так что эта функция — не упрощение существующих моделей, а вещь новая, работающая напрямую с фичами браузеров.
Может показаться странным, что ее включили в HTML5, учитывая, что она не особо распространена. Но она вполне оправдана, принимая во внимание угрозу для безопасности, которая может скрываться за автозаполнением; так что теперь его можно отключать при необходимости.
Datalist
Новый элемент datalist позволяет скрестить стандартный input с элементом select. Добавив параметр list, можно затем создать список предустановленных вариантов выбора:
<label for="homeworld">Ваша родная планета</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
<option value="Меркурий">
<option value="Венера">
<option value="Земля">
<option value="Марс">
<option value="Юпитер">
<option value="Сатурн">
<option value="Уран">
<option value="Нептун">
</datalist>
Это позволяет пользователям выбрать вариант из списка или добавить свой, если его там нет. Очень удобно для ситуаций, в которых обычно требуется вставлять дополнительное поле «Другое, укажите ниже».
Удобный гибрид.
В случае если браузер не поддерживает datalist, такое поле будет функционировать как обычный input.
Новые input-ы
Параметр type элемента input был значительно расширен в HTML5. Здесь так много натоптанных троп, которые надо замостить, — прямо как строительство сети хайвеев на грибном месте.
Поиск
Элемент input с значением search в type работает точно так же, как и тот, что со значением text.
<label for="query">Поиск</label>
<input id="query" name="query" type="search">
Единственная разница — для search предполагается, что браузер будет отображать поле немного по-другому, придерживаясь общего стиля оформления поисковых полей в операционной системе.
Так это, например, делает Safari.
Контактные данные
Cуществуют три новых значения параметра type для разных типов контактных данных: адресов электронной почты, сайтов и номеров телефонов.
<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 — том, что на мобильных устройствах Apple, — разница станет заметной. Вид экранной клавиатуры будет отличаться для разных полей:
Новые типы импутов в Mobile Safari.
Мелочь, а приятно.
Ползунки (те, что «слайдеры»)
Многие JavaScript-библиотеки имеют встроенные разного рода виджеты, которые можно использовать в веб-приложениях. Они работают неплохо; если включен JavaScript, конечно. Но было бы здорово, если б пользователям не приходилось загружать файл скриптов каждый раз, когда мы хотим добавить каких-то особых элементов управления в нашу форму.
Классический пример — ползунок. До настоящего момент его невозможно было создать без помощи JavaScript. Теперь, с HTML5, он существует как родной браузеровский input с type=«range».
<label for="amount">Сколько хотите?</label>
<input id="amount" name="amount" type="range">
Так выглядит input типа range в Safari и Opera.
По умолчанию, диапазон этого поля: от нуля до ста. Минимальное и максимальное значения можно задать при помощи параметров min и max соответственно.
<label for="rating">Ваша оценка</label>
<input id="rating" name="rating" type="range" min="1" max="5">
Это все хорошо работает в Safari и Opera — другие браузеры отобразят просто текстовое поле. Это не столь плохо, и мы знаем, что при желании для них всегда можно добавить альтернативную реализацию данного контрола через JavaScript, используя ту проверочную функцию, что я уже приводил выше.
Естественно, скриптовые решения потребуют больше времени на загрузку и будут менее доступны для дополнительной обработки другими средствами, чем «родные» элементы DOM. Впрочем, по непонятным причинам, тот же range в Safari в данный момент нельзя подружить с клавиатурой… Надеюсь, скоро починят.
Счетчик
Поле с типом range не отображает точное значение, выбранное пользователем, а лишь визуально представляет относительное число на ползунке. Для некоторых случаев это подходит, в других же важна точность — возможность ввести конкретное значение. Для этого есть type=«number».
<label for="amount">Сколько хотите?</label>
<input id="amount" name="amount" type="number" min="5" max="20">
Браузеры добавляют к такому полю кнопки «плюс—минус», делая его эдаким гибридом между типами text и range.
Дата и время
Один из наиболее популярных JavaScript-виджетов — всплывающий календарь, позволяющий выбрать нужную дату. Как на большинстве сайтов для бронирования авиабилетов, к примеру.
Можно заменить, что на разных сайтах эти календари реализованы слегка по-разному, потому было бы неплохо иметь одно общее для браузера решение, которое устранит эту непоследовательность и необходимость на исследование нюансов разного интерфейса в каждом отдельном случае.
В HTML5 доступна целая горсть разных типов полей для ввода даты и времени:
date — для года, месяца и числа.
datetime — год, месяц, число, плюс часы, минуты, секунды и указание часового пояса.
datetime-local — то же самое, но без указания часового пояса.
time — часы, минуты, секунды.
month — год и месяц (без числа).
Все эти типы запишут отрезок времени в ISO формате 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">Start date</label>
<input id="dtstart" name="dtstart" type="date">
Opera справляется с реализацией возможностей этих новых полей, но выглядят они в ней не сказать что очень привлекательно…
Как обычно, браузеры, не поддерживающие эту технологию, отобразят простое текстовое поле. В этом случае вы можете либо указать в инструкции для пользователей, в каком формате они должны ввести дату, или же вставить виджет для скриптового календаря. Опять же, не забудьте сначала проверить его встроенную поддержку:
if (!inputSupportsType('date')) {
// Код виджета для календаря.
}
Даже самый красиво написанный календарь такого рода на JavaScript потребует довольно большой объем кода для генерации таблицы дней и обработки событий по их выбору. Встроенная поддержка этой возможности должна работать быстрее и надежнее, не говоря о том, что устранит разнобой в оформлении.
Пипетка
Пожалуй, одним из самых смелых заменителей виджетов, представленных в HTML5, является тип поля color. Он принимает значения в виде цветовых кодов в шестнадцатеричном формате: #000000 для черного, #FFFFFF для белого, и так далее.
<label for="bgcolor">Фоновый цвет</label>
<input id="bgcolor" name="bgcolor" type="color">
Задумка в том, чтобы добавить наконец в браузеры встроенные «пипетки», вроде тех, что есть почти во всех других приложениях на вашем копьютере. Пока что она не поддерживается ни одним браузером, но если до этого дойдет, это будет весьма клево.
Так что в этом случае пока следует пользоваться JavaScript-решениями, но не забывать все равно проверять встроенную поддержку — чтобы не прозевать момент, когда время таки придет.
Сделай сам
Все эти новые типы ввода служать для двух целей: они позволяют браузерам иметь специально оформленные или настроенные поля для определенных видов данных, и знать как проверять валидность этих данных. Описанные нововведения HTML5 покрывают большую часть распространенных ситуаций, но в какой-то момент вам веротяно может понадобиться создать валидируемое поле ввода, следующее своим особым принципам.
Хорошая новость в том, что это можно реализовать, используя параметр pattern, где можно обозначить, какой вид данных вы запрашиваете. Плохая новость в том, что вам придется использовать регулярные выражения.
<label for="zip">Почтовый индекс США</label>
<input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">
Большую часть времени параметр pattern вам вряд ли будет нужен. Если же вы решите его задействовать — я вам сочувствую.
Взгляд в будущее
Введение новых видов веб-форм дает HTML5 заметный толчок вперед. Они перекладывают значительную часть бремени, обычно возлагаемого на JavaScript, на плечи HTML5. В данный момент мы еще на переходной стадии — не все из нововведений подерживаются браузерами, и избавиться от JavaScript совсем мы тут пока не можем. Но светлое будущее уже явно не за горами, мы видим первые его лучи и можем в них понежиться.
Валидация форм на стороне клиента теперь станет намного проще — хоть и, понятное дело, всецело полагаться на нее все равно нельзя; нужно не забывать проверять данные и на стороне сервера. Плюс, для многих «нестандартных» пока еще способов ввода данных теперь будут «родные» решения, не требующие от пользователей загрузки дополнительных скриптовых библиотек.
Я уверен, вы видите все преимущества встроенных в браузеры календарей и ползунков, но вижу в ваших глазах и закономерный вопрос «Можно ли к ним применить CSS-стили?»
К сожалению, на данный момент ответ скорее — «нет». Над этим работает CSS Working Group.
Это может разубедить вас в целесообразности их использовать вообще. Если конкретные реализации новых фич в браузерах не выглядят привлекательно для вас, вы можете продолжать использовать вместо них скриптовые виджеты.
Но я хочу, чтобы вы задали себе вопрос «А нужно ли к ним применять свои стили?» Ведь многим из нас не нравится, когда горе-разработчики или -дизайнеры навязчиво заставляют нас отказывать от своих привычек и исследовать изобретенные ими интерфейсы, которые, по их мнению, лучше, стандартных (что совсем не всегда факт). Зачем же поощрать эту порочную практику введения пользователей в заблуждение?
Лично я хотел бы видеть конкуренцию браузеров за самые удобные и красивые решения для веб-форм HTML5. Такую войну браузеров я бы с удовольствием поддержал.
Окей, с формами покончено. В следующей части мы примемся за новую, аппетитную семантику HTML5.