alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Теги fieldset и legend.

Категория: Уроки HTML Просмотров: 3420 Коментариев: 0 Дата: 2017-06-03 Добавил: admin

 Теги fieldset и legend

Сегодня, после изучения элементов формы, рассмотрим еще два тега которые могут понадобится при создании форм - это теги <fieldset> и <legend>. Эти два тега являются парными и обязательно должны иметь закрывающейся тег.

Для чего эти теги нужны? Есть моменты, когда на странице создается достаточно длинная форма с большим количеством полей, тогда, для удобства, приходится разграничить часть полей, выделив их в отдельную область. Например, создать область для ввода личных данных и текстовую область. Вот для таких моментов и был создан тег <fieldset>, который и позволяет сгруппировать несколько элементов.

Для примера возьмем все изученные ранее элементы формы и объединим их код в один файл в результате получим вот такую картину.

HTML
<!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> вставляем нужное нам название созданной области.

HTML

                
Ввод личных данных

 

В итоге получилась вот такая картина:

 Теги fieldset и legend

Точно так же объединяются в одну область и другие нужные Вам элементы формы. В качестве еще одного примера объединим еще три элемента формы радиокнопки , чекбоксы и выпадающий список select. Используем все тот же принцип.

HTML

                
Вопросы

Вы любите фрукты?

Какие Вы фрукты любите больше всего?


                

В Результате получаем, объединённые в одну общую область, еще три элемента формы.

 Теги fieldset и legend

Наглядный финальный результат можно посмотреть в Демо. Возможно, у Вас возник вопрос, почему рамка объединяющей области растянулась на весь экран. Это все можно исправить, но уже для этого требуется применить таблицу стилей CSS, но это немного позже, ну а тем, кому не в терпёж, в тег <fieldset> добавьте вот такую надпись style="width:400px;".

HTML

                

Вот мы и рассмотрели, как можно объединить несколько полей в одну область. Данные теги применяются для удобства использования и повышения читабельности формы, так как становится более наглядно, что где находится, ну а мы движемся дальше.


Просмотреть демо: Демо

Скачать исходник: Скачать


              



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


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов