Введение
Формы – не самая простая тема в изучении 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/
Статьи по схожей тематике
