Сегодня, после изучения элементов формы, рассмотрим еще два тега которые могут понадобится при создании форм - это теги <fieldset> и <legend>. Эти два тега являются парными и обязательно должны иметь закрывающейся тег.
Для чего эти теги нужны? Есть моменты, когда на странице создается достаточно длинная форма с большим количеством полей, тогда, для удобства, приходится разграничить часть полей, выделив их в отдельную область. Например, создать область для ввода личных данных и текстовую область. Вот для таких моментов и был создан тег <fieldset>, который и позволяет сгруппировать несколько элементов.
Для примера возьмем все изученные ранее элементы формы и объединим их код в один файл в результате получим вот такую картину.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
</body> </html>
И уже к этой большой форме мы и применим наши два тега <fieldset> и <legend>. Вначале, давайте сгруппируем в одну общую область первые два поля (Имя и пароль), которую назовем Личные данные. Для этого, эти два поля, мы заключаем тегами <fieldset> </fieldset>. В итоге появляется обычная рамка вокруг полей, которая и создала ту самую область для полей.
После того как создали общую область для вышеуказанных двух полей, эту область нужно назвать, и для этого нам потребуется второй тег <legend>, который вставляется сразу же после открывающегося тега <fieldset> . В тег <legend> вставляем нужное нам название созданной области.
В итоге получилась вот такая картина:
Точно так же объединяются в одну область и другие нужные Вам элементы формы. В качестве еще одного примера объединим еще три элемента формы радиокнопки , чекбоксы и выпадающий список select. Используем все тот же принцип.
В Результате получаем, объединённые в одну общую область, еще три элемента формы.
Наглядный финальный результат можно посмотреть в Демо. Возможно, у Вас возник вопрос, почему рамка объединяющей области растянулась на весь экран. Это все можно исправить, но уже для этого требуется применить таблицу стилей CSS, но это немного позже, ну а тем, кому не в терпёж, в тег <fieldset> добавьте вот такую надпись style="width:400px;".
CSS