Новые возможности формы в HTML 5

Пост навеян недавно попавшимся мне шаблоном, который нужно было натянуть на самописный движок. В шаблоне был декларирован доктайп HTML 5, но возможности 5-ой версии языка разметки почему-то не использовались. Поэтому хочу рассказать начинающим верстальщикам о некоторых вещах, которые сделают ваш сайт более дружелюбным, семантичным и быстрым.

1. Атрибут placeholder.

Для примера посмотрите на рисунок ниже, и вспомните как это делалось раньше.

Текст, который должен быть внутри поля, ставился с помощью атрибута value. Но если для поля указывался тип password, то все символы, введенные в поле, заменяются кружочками-маркерами, а вебмастерам приходилось изобретать различные костыли. Используя HTML 5, достаточно указать новый атрибут placeholder:

<input type="password" name="password" placeholder="Enter password"/>

2. Type=”email”.

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

Поскольку у пользователей iPhone небольшие экранчики и маленькая клавиатура, для ввода символа @ или точки они должны лишний раз переключать тип вводимых символов. Но только не в том случае если вы укажете input type=”email”.

3.Type=”time”.

А также date, datetime, datetime-local, month и week – т.е. все что имеет отношение к дате и времени. Скриншоты для каждого приводить не буду, лишь скажу что умница айфон и здесь автоматически переключит клавиатуру. А для настольных компьютеров появится удобное поле с выбором даты, смотрите сами:

Нравится? А ведь это всего одна строка:

<input type="datetime" name="datetime" />

4.Type=”number”.

Скажу по секрету, поскольку я занимаюсь в основном магазинами, это мое любимое нововведение. Сколько времени было потрачено на написание громоздских скриптов только из-за того, что раньше не существовало type=”number”… Наверняка вам знакомы различные выборки в магазинах или на досках обьявлений, когда нужно было подобрать товар или обьект по заданным параметрам “от” и “до”, например по цене. Как это делалось раньше? Десятки и даже сотни строк кода, затем отладка “чтобы во всех браузерах работало”… Забудьте этот страшный кошмар.

Как и в предыдущем примере, здесь достаточно всего одной строки:

<input type="number" name="number" value="00" min="1" max="10" step="1"/>

5. Псевдоклассы valid и invalid.

Посмотрите скриншот моей формы для комментирования (а еще лучше оставьте комментарий, чтобы увидеть вживую ).

Раньше для того чтобы подсказать пользователю, что поле заполнено неправильно вебмастера использовали огромные скрипты. С HTML 5 все намного проще – для разных типов полей мы можем использовать псевдоклассы valid и invalid. Форма из примера меняет свой цвет с помощью всего двух строк:

#commentform #email:invalid {background: #fdd;}
#commentform #email:valid {background: #dfd;}

А вся прелесть в том, что указывать данные псевдоклассы можно для любого типа форм, предусмотренных в HTML 5. И напоследок о грустном. Грустным у нас будет не только internet explorer, но Firefox для некоторых типов полей. Причем если за разработчиков последнего можно не переживать – скорее всего профиксят, то с микрософт до 9-ой версии включительно ситуация не столь радужная. Думаю что каждый вебмастер должен решить, какие технологии использовать – устаревшие или перспективные.

Данная публикация доступна также на других языках:
Українська: Нові можливості форм в HTML 5
English: New features of HTML5 form

Popularity: 14%

Добавлено 30 марта 2013
Рубрика: Сайтостроителю
Метки: HTML, браузер