Вы здесь: Главная > HTML > Доступные формы

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

Опубликовано автором Просмотры: 23

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

Ярлыки

Каждое поле формы должно иметь свою собственную явную метку. Тег label сортирует это с помощью атрибута for, который связывает его с тегом form:

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

Ярлыки имеют дополнительный бонус в виде визуального эффекта, который делает сами ярлыки интерактивными, акцентируя внимание на соответствующем поле формы.

Обычно требуются оба атрибута name и id. Атрибут name нужен для того, чтобы форма обрабатывала это поле. Атрибут id нужен, чтобы связывать его с label.

Наборы полей и легенды

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

В пределах набора полей вы можете задать заголовок с тегом legend.

<form action="somescript.php" >
    <fieldset>
        <legend>Имена</legend>
        <p>Имя <input name="firstName"></p>
        <p>Фамилия <input name="lastName"></p>
    </fieldset>
    <fieldset>
        <legend>Адрес</legend>
        <p>Адрес <textarea name="address"></textarea></p>
        <p>Почтовый индекс <input name="postcode"></p>
    </fieldset>
    <!-- etc. -->

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

Группы опций

Элемент optgroup группирует параметры в поле выбора. Для этого требуется атрибут label, значение которого отображается в виде невыбираемого псевдонаправления, предшествующего этой группе в выпадающем списке.

<select name="country">
    <optgroup label="Africa">
        <option value="gam">Гамбия</option>
        <option value="mad">Мадагаскар</option>
        <option value="nam">Намибия</option>
    </optgroup>
    <optgroup label="Europe">
        <option value="fra">Франция</option>
        <option value="rus">Россия</option>
        <option value="uk">Украина</option>
    </optgroup>
    <optgroup label="North America">
        <option value="can">Канада</option>
        <option value="mex">Мехико</option>
        <option value="usa">США</option>
    </optgroup>
</select>

Поля навигации

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

Атрибуты accesskey и tabindex могут быть добавлены к отдельным тегам формы, таким как input и legend.

<input name="firstName" accesskey="f" tabindex="1">

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

Страницы в тему:

Добавить комментарий