С помощью тега <fieldset> группируются элементы на страницах сайта и обрамляются рамкой. Тег <legend>, который используется вместе с <fieldset>, применяют для задания заголовков рамок. Группировка информации с помощью fieldset облегчает работу с формами.
Чтобы сделать рамку, нужно воспользоваться следующим кодом:
<fieldset><legend>Заголовок рамки</legend>
Содержимое рамки (здесь может быть текст, код плеера с музыкой, фото, видео)
</fieldset>
В заголовок также можно вставить все что угодно (фото, видео и др.). Достаточно прописать нужный код вместо фразы "Заголовок рамки".
Fieldset с цветной рамкой
<fieldset style="border:1px #00BFFF solid;">
Содержимое рамки
</fieldset>
Создание выпуклой рамки
Для более сложного оформления можно использовать стили, которые создают эффект выпуклой или вдавленной рамки. Например:
<fieldset style="border: #1874CD ridge thick;">
<legend> <b><span style="font-family:Monotype Corsiva;color:#104E8B;font-size:25px">Заголовок</b></span></legend><span style="font-family:Comic Sans MS;color:#8B795E;font-size:14px">Содержимое </span></fieldset>
В этом примере заданы не только стили границы, но и шрифт, цвет и размер текста внутри рамки.
Атрибуты тега fieldset
disable
Этот атрибут отключает все элементы формы, находящиеся внутри <fieldset>
. Пользователи не смогут взаимодействовать с ними (например, вводить текст, выбирать опции и т.д.).
<fieldset disabled> <legend>Отключенная группа</legend> <input type="text" placeholder="Введите текст"> <button>Отправить</button> </fieldset>
form
Указывает идентификатор формы, с которой связан <fieldset>
. Это полезно, если <fieldset>
находится за пределами тега <form>
, но должен быть частью этой формы.
<form id="myForm">
<!-- Другие элементы формы --> </form>
<fieldset form="myForm"><legend>Группа, связанная с формой</legend>
<input type="text" placeholder="Введите текст"></fieldset>
name
Задает имя для <fieldset>
. Это может быть полезно для идентификации группы элементов при отправке данных формы или при работе с JavaScript.
<fieldset name="userInfo"> <legend>Информация о пользователе</legend> <input type="text" name="username" placeholder="Имя пользователя"> </fieldset>
Современные подходы к стилизации
Современные стандарты рекомендуют использовать внешние CSS-файлы для стилизации. Рассмотрим пример стилизации fieldset через внешний код CSS.
custom-fieldset {
border: 2px solid #00BFFF;
padding: 10px;
}
.custom-legend {
font-family: 'Arial', sans-serif;
color: #104E8B;
font-size: 20px;
font-weight: bold;
}
HTML-код для задания рамки:
<fieldset class="custom-fieldset">
<legend class="custom-legend">Заголовок рамки</legend>
Содержимое рамки
</fieldset>