Доступные формы

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

Метки

У каждого поля формы должна быть своя метка. Тег <label> решает эту задачу, а атрибут for определяет элемент формы, к которому относится данная метка.


<form>
   <label for="yourName">Ваше имя</label>
   <input type="text" name="yourName" id="yourName" />
   ...

В обычных браузерах у меток есть свои преимущества: при выборе пользователем метки, автоматически активизируется соответствующий элемент формы.

Обратите внимание, что необходимо использовать и атрибут name, и атрибут id – атрибут name нужен для обработки данных HTML формы, а атрибут id ассоциирует метку с данным элементом формы.

Группы родственных элементов

Родственные поля формы, например, имя (фамилия, имя, отчество, звание и т.д.) или адрес (строка 1, строка 2, индекс, область, район, город и т.д.), можно группировать при помощи тега <fieldset>.

Внутри групп полей формы также можно использовать групповые метки, которые определяются при помощи тега <legend>.

Современные браузеры, как правило, помечают группы полей формы при помощи окружающей группу рамки, а групповые метки отображаются в верхнем левом разрыве этой рамки.


<form action='somescript.php' >
   <fieldset>
      <legend>Имя</legend>
      <p>Имя <input type="text" name="firstName" /></p>
      <p>Фамилия <input type="text" name="lastName" /></p>
   </fieldset>
   <fieldset>
      <legend>Адрес</legend>
      <p>Адрес <textarea name="address" ></textarea></p>
      <p>Индекс <input type="text" name="postcode" /></p>
   </fieldset>
   ...

Группы вариантов выбора

Тег <optgroup> позволяет группировать варианты в выпадающем меню. Он требует использования атрибута label, значение которого отображается как невыбираемый псевдозаголовок, предшествующий данной группе.


<select name="country">
   <optgroup label="Африка">
      <option value="gam">Гамбия</option>
      <option value="mad">Мадагаскар</option>
      <option value="nam">Намибия</option>
   </optgroup>
   <optgroup label="Европа">
      <option value="fra">Франция</option>
      <option value="rus">Россия</option>
      <option value="uk">Великобритания</option>
   </optgroup>
   <optgroup label="Северная Америка">
      <option value="can">Канада</option>
      <option value="mex">Мексика</option>
      <option value="usa">США</option>
   </optgroup>
</select>

Навигация по полям

Как и в случае с ссылками, у пользователя должна быть возможность перемещаться по полям формы (и группам полей) не используя указатель мыши. Для этого используются те же возможности, что и со ссылками, - порядок табуляции и клавиши доступа.

Для этого к любому тегу формы, как тег <input> и тег <legend>, добавляются атрибуты accesskey и tabindex.


<input type="text" name="firstName" accesskey="f" tabindex="1" />