Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Улучшения форм в HTML 5

20 марта 2011 г.

В справочнике HTML 5 есть мегаполезные улучшения в отношении форм. Уже давно можно использовать и радоваться, не дожидаясь повсеместного внедрения в браузерах.

Очевидные проблемы со старыми формами

У HTML4-форм есть известные проблемы:

  • Для установки фокуса на первом элементе формы надо писать кусок js'а.
  • Чтобы забить дефолтное значение в элементе, необходимо написать фрагмент js-кода.
  • Для выбора цвета или календаря надо тащить какую-то известную компоненту, либо что-то писать самому.
  • Даже установка обязательных полей  валидация требуют JavaScript-механизмов.

Эти и многие другие, более мелкие, задачи решают расширения в HTML 5. Плохо, что ещё далеко не всё поддержано даже в самых последних версиях браузеров. Тем не менее, разные улучшения можно применять без проблем.

Установка фокуса в элементах формы при загрузке страницы

Раньше для автоматического фокусирования на элементе формы (напр., логине в форме авторизации) приходилось писать как-то так:

<input name="login" id="form-login">
<script type="text/javascript">
document.getElementById('form-login').focus();
</script>

Теперь всё проще и понятнее:

<input name="login" id="form-login" autofocus>

Автофокус: (демонстрация автофокуса, перейти вверх страницы)

Значения-подсказки (placeholder)

В некоторых случаях (напр., в поле поисковой формы) хочется указать значение, которое должно исчезать при фокусировке на данном поле. Раньше делали так:

<input name="query" id="form-query" value="поиск по сайту" onfocus="this.value = ''" onblur="this.value = 'поиск по сайту'">

Уже можно делать иначе, через атрибут placeholder. Ещё и значение по умолчанию не будет передаваться на сервер, это бонус.

<input name="query" id="form-query" value="" placeholder="поиск по сайту">

Placeholder:

Цвет и календарь

Издревле для выбора цвета (компонент color picker) и календаря применялись какие-то в меру громоздкие библиотеки. Примеры приводить не буду, их легко нагуглить. Теперь же всё удобнее и компактнее:

<input name="color" id="form-color" value="#FFFFFF" type="color">
<input name="date" id="form-date" value="2011-01-01" type="date">

Выбор цвета:

Календарь:

Обязательные поля и валидация

Я уже писал заметку про атрибут required. Про валидацию в HTML5 можно сказать то, что появились дополнительные штуки для упрощения этого процесса на клиенте. И если даже в браузере они не поддержаны, у вас всегда же есть ещё и надёжная серверная валидация, правда?

Как сейчас можно валидировать:

<input name="email" id="form-email" value="" type="email">
<input name="tel" id="form-tel" value="" type="tel" pattern="\d{10}">
<input id="postcode" name="postcode" type="number" min="000000" max="999999" value="123456" maxlength="6">

Email:

Телефон:

Почтовый индекс:

Вообще, все новые типы полей можно посмотреть в документации. Дополнительно обязательно полистайте Web Forms - Dive Into HTML5.

Что где поддерживается?

Вышеприведённые улучшения работают полностью в последних версиях браузера Opera, частично в Webkit-браузерах (Safari и Chrome). В Mozilla Firefox 3.6 и Internet Explorer 9 никак не поддерживаются новые типы и атрибуты форм.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet