Тег <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>

    Оцените статью
    Добавить комментарий