
Новые возможности формы в 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: 15%
Добавлено 30 марта 2013
Рубрика: Сайтостроителю
Метки: HTML, браузер
Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!
Также рекомендую публикации, похожие на "Новые возможности формы в HTML 5"


datot.ru
100% валидность, кроссбраузерность, модный “резиновый” ассиметричный дизайн. Три варианта страниц - главная, страница с категориями и страница с материалами. [...]1 комментарий
1 комментарий
RSS feed for comments on this post.
Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.