Введение

Формы – не самая простая тема в изучении HTML. Перемещаться по странице с контентом – это одно, а вот заполнять поля формы – совсем другое. Вот почему хороша идея добавить несколько элементов к форме.

 

Вкратце о формах


 

Labels

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

 

<form>

        <label for="yourName">Your Namelabel>

        <input name="yourName" id="yourName">

 

Плюсом использования labels также есть то, что они кликабельны, делая активным текущее поле формы. Атрибуты name и id обязательны: name нужен форме для управления полем, а id - для связи label с ним.

Группы элементов и их заголовки

Можно сгруппировать несколько однотипных полей имен (полное имя, фамилия и тд.) или адресов (Адрес1, адрес2, регион, страна, индекс и тд.), используя тег fieldset. Тегом legend определяется оглавление сгруппированных объектов.

 

<form action="somescript.php">

        <fieldset>

            <legend>Namelegend>

            <p>First name

                <input name="firstName">p>

            <p>Last name

                <input name="lastName">p>

        fieldset>

        <fieldset>

            <legend>Addresslegend>

            <p>Address

                <textarea name="address">textarea>p>

            <p>Postal code

                <input name="postcode">p>

        fieldset>

 

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

Выбор варианта

Элемент optgroup объединяет в группу варианты выбора. Также нужен атрибут label. Браузеры автоматически сделают выпадающие списки из таких групп.

 

<select name="country">

        <optgroup label="Africa">

            <option value="gam">Gambiaoption>

            <option value="mad">Madagascaroption>

            <option value="nam">Namibiaoption>

        optgroup>

        <optgroup label="Europe">

            <option value="fra">Franceoption>

            <option value="rus">Russiaoption>

            <option value="uk">UKoption>

        optgroup>

        <optgroup label="North America">

            <option value="can">Canadaoption>

            <option value="mex">Mexicooption>

            <option value="usa">USAoption>

        optgroup>

    select>

 

Поля доступа

Поля форм (группы элементов) нуждаются в возможности доступа без использования указателей (мыши). На помощь приходят такие элементы, как tab stops и access keys. Атрибуты access key и tabindex добавляются в теги input и legend.

 

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

 

Источник: http://www.htmldog.com/guides/html/advanced/forms/