Формы — неотъемлемая часть любого пользовательского интерфейса.

Иногда работа с HTML-формами может быть сложной и пугающей, поскольку они не только используют специализированные HTML-элементы, но ещё и стирают грань между статическим и динамическим контентом. Формы могут быть сложными и даже раздражающими для пользователей: они часто отвлекают пользователя от основной информации на странице (предлагают купить какой-нибудь подарок или опробовать новое веб-приложение) и порой становится не понятно - что, где и куда вводить. Предоставленные ниже советы упростят разработку и внешний вид форм для вас, как разработчика или дизайнера, а также для ваших пользователей.

1. Указывайте legend для каждого fieldset

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

<fieldset>
  <legend>Адрес доставки</legend>
  <span>Адрес</span><input type="text" />
  <span>Город</span><input type="text" />
  <span>Страна</span><input type="text" />
  <span>Индекс</span><input type="text" />
</fieldset>

2. Обозначайте label для полей ввода

Не смотря на то, что для обозначения полей ввода можно использовать span или другой тег, более правильным и семантичным  для этого будет тег label.

<fieldset>
  <legend>Адрес доставки</legend>
  <label>Адрес</label><input type="text" />
  <label>Город</label><input type="text" />
  <label>Страна</label><input type="text" />
  <label>Индекс</label><input type="text" />
</fieldset>

3. Для label указывайте атрибут for

Атрибут for позволяет связать label с полем ввода. Идентификатор поля, к которому подвязывается label, должен совпадать со значением for.

<fieldset>
  <legend>Адрес доставки</legend>
  <label for="address">Адрес</label><input id="address" type="text" />
  <label for="city">Город</label><input id="city" type="text" />
  <label for="country">Страна</label><input id="country" type="text" />
  <label for="postalCode">Индекс</label><input id="postalCode" type="text" />
</fieldset>

4. Именуйте поля ввода

Каждое поле ввода должно иметь имя. Это правило важно не только для случая, если вы хотите передавать данные формы при ее отправке, но и для валидности кода вцелом. Имя поля может совпадать с ее id, но может быть и отличным.

<fieldset>
  <legend>Адрес доставки</legend>
  <label for="address">Адрес</label><input id="address" name="address" type="text" />
  <label for="city">Город</label><input id="city" name="city" type="text" />
  <label for="country">Страна</label><input id="country" name="country" type="text" />
  <label for="postalCode">Индекс</label><input id="postalCode" name="postalCode" type="text" />
</fieldset>

5. Объединяйте опции выпадающего списка

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

<select>
  <optgroup label="Европа">
    <option>Италия</option>
    <option>Греция</option>
    <option>Португалия</option>
  </optgroup>
  <optgroup label="Африка">
    <option>Египет</option>
    <option>ЮАР</option>
    <option>Гана</option>
  </optgroup>
</select>