Улучшите ваши формы с помощью HTML5!

Оригинал: http://dev.opera.com/articles/view/improve-your-forms-using-html5/

Перевод: Влад Мержевич

HTML  в действительности не обновлялся с версии 4 выпущенной ещё в 1998 году. Однако сообщество WHATWG работает над HTML с 2004 года, а затем передаёт материалы в W3C, где они становятся спецификацией HTML5. В этой статье показаны некоторые новые функциональные возможности форм HTML5 предлагаемые в главе Web Forms 2. Опера поддерживает Web Forms 2, начиная с версии 9.5 или более поздней версии.

autofocus и другие атрибуты

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

<form action="" method="get">
  <p><label>Поиск: <input name=search type="text" id="search"></label></p>
  <script>document.getElementById('search').focus()</script>
  <!-- остальная форма -->
</form>

Может быть написан с использованием новой функциональности следующим образом:

<form>
 <p><label>Поиск: <input name=search autofocus></label></p>
 <!-- остальная форма -->
</form>

Часть кода была удалена из примера и заменена новым атрибутом autofocus. Атрибут autofocus фактически убирает необходимый элемент <script> и атрибут id у <input>, который используется скриптом. Атрибут method может быть опущен для элемента <form>, потому что форма использует запрос GET по умолчанию. Кроме того, значение text используется для <input> по умолчанию. В Web Forms 2 вы можете также опустить атрибут action когда он содержит пустую строку. Действительно, это даст вам тот же результат.

Валидация форм

В настоящее время веб-разработчики используют классные скрипты для валидации формы на стороне клиента. Скоро вы сможете просто написать следующее:

<form>
 <p><label>Имя: <input name=name required></label></p>
 <p><label>E-mail: <input name=email type=email required></label></p>
 <p><label>Адрес: <input name=url type=url></label></p>
 <p><label>Комментарий: <textarea name=comment required></textarea></label></p>
 <p><input type=submit value=Поехали!></p>
</form>

Я утверждаю, что это читается почти так же как английский! Когда пользователь пытается отправить форму, пользовательский агент проверяет что все условия выполняются, и если это так, он отправляет форму, в противном случае показывает сообщение об ошибке. Конечно, вы всегда должны иметь проверку на стороне сервера, но в случае, если пользовательский агент поддерживает новые формы, это может спасти вашего пользователя от нескольких раундов ошибок. Лучше для юзабилити и пропускной способности канала.

В примере выше я ввел несколько новых элементов форм: email и url. А также новый атрибут доступный для всех элементов форм: required. Кроме того, Web Forms 2 включают поля для даты, времени и чисел.

Стилизация полей

Если вы хотите стилизовать обязательное поле формы (<input required>) это довольно тривиально с помощью некоторых новых псевдоклассов:

input:disabled { ... }
input:checked + label { ... }
input[type=button]:default { ... }
input:read-only { ... }