Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Формы всякие нужны, формы всякие важны…

26 августа 2001 г.

Использование 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>

Отгрузка апельсинов





Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

Логотип разработка, профессиональная разработка логотипа.
LiveInternet