Основы работы с HTML

       

Группировка полей формы


Теги <fieldset> </fieldset> объединяют поля формы в группы, выделяют их визуально, упрощают навигацию в форме с помощью клавиши [Tab] (в первую очередь обходятся поля в пределах группы). Для того чтобы объединить несколько элементов ввода или управления в группу достаточно поместить их внутри тегов <fieldset> </fieldset>. Закрывающий тег </fieldset> обязателен.

В следующем примере создается форма, содержащая поля для ввода имени и фамилии, объединенные в группу, а также кнопку отправки

<html> <body>

<form name="input" action="html_form_action.asp" method="get"> <fieldset> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> </fieldset> <input type="submit" value="отправить"> </form>

</body> </html>

Пример выполнения данного HTML-кода

При помощи пары тегов <legend> </legend> образованной группе полей можно присвоить имя. В следующем примере форма ввода дополнена полями для ввода информации о месте работы и занимаемой должности, объединенными во вторую группу. Каждой группе полей присвоен свой заголовок.

<html> <body>

<form name="input" action="html_form_action.asp" method="get"> <fieldset> <legend>Личные данные</legend> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> <br> Пол: <input type="radio" name="Sex" value="Male" checked="checked"> Мужской <input type="radio" name="Sex" value="Female"> Женский </fieldset> <fieldset> <legend>Данные о работе</legend> Место работы: <input type="text" name="work" value="Microsoft"> <br> Должность: <input type="text" name="status" value="Президент"> </fieldset>

<input type="submit" value="отправить"> </form>

</body> </html>

Пример выполнения данного HTML-кода



Содержание раздела