Вы здесь

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

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

Метки

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

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

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

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

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

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

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

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

<form action="http://msiter.ru/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" />

Подробнее об этом смотрите главу "Доступные ссылки".