Использование HTML форм (тег form) — практически единственный способ получения от пользователя сведений, для их последующей обработки. Однако, важно не только уметь корректно «кодить» формы, но и грамотно обеспечивать юзабилити этих самых форм.
Использование HTML форм (тег form) — практически единственный способ получения от пользователя сведений, для их последующей обработки. Трудно найти крупный сайт, не применяющий на своих страницах механизм форм.
Однако, важно не только уметь корректно «кодить» формы, но и грамотно обеспечивать юзабилити (т. е. лёгкость использования) этих самых форм.
Для этих целей можно взять на вооружение введенные в HTML 4 теги (fieldset, legend и label) и атрибуты (tabindex и acceskey). Только учтите, что сие правильным образом работает только в Internet Explorer 4+ и Netscape Navigator 6.
Краткое описание тегов и атрибутов:
- FIELDSET
- Очень полезный тег, позволяющий группировать (в том числе, визуально) элементы формы.
- LEGEND
- Тег, который задает заголовок группе элементов (
fieldset). Делает элемент fieldset доступнее для невизуальных браузеров.
- LABEL
- Способен связывать описания элементов формы с самими элементами. Для этого задается атрибут
for, содержащий id соответствующего элемента. Позволяет «кликом» передать фокус связанному элементу.
- tabindex
- Данный атрибут определяет порядок прохождения табуляции через форму.
- accesskey
- Задает так называемую «горячую клавишу» (вызов в Windows — Alt+буква). Буквы, к сожалению, визуально не выделяются.
Чтобы всё было наглядно, приведу HTML листинг и соответствующую форму:
<form style="width:350px">
<fieldset>
<legend>Отгрузка апельсинов</legend>
<div style="padding:20px">
<label for="oranges" accesskey="а">Количество <u>а</u>пельсинов:</label>
<br />
<input type="text" id="oranges" tabindex="1" />
<br />
<label for="barrels" accesskey="б">Количество <u>б</u>очек:</label>
<br />
<input type="text" id="barrels" tabindex="2" />
<br /><br />
<input type="submit" value="Грузите!" tabindex="3" />
</div>
</fieldset>
</form>
