Тег <fieldset> в html

С помощью тега <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>