Улучшения форм в 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="поиск по сайту">

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

Издревле для выбора цвета (компонент 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">

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

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

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