Магическое использование необычных меток Fieldset и Legend

Когда речь заходит о <fieldset> и <legend>, большинство людей определенно будут незнакомы, и они относятся к группе менее используемых HTML-тегов.

Впервые я узнал об этих двух тегах, когда изучал reset.css или normalize.css в раннем возрасте. Недавно, в связи с исследованием границы, я наткнулся на эти два тега и обнаружил, что они по-прежнему очень интересны, поэтому я написал статью, чтобы поделиться с вами некоторыми собранными знаниями.

Узнайте о fieldset и legend

В целом, <fieldset> и <legend> чаще всего используются в формах.

Короче говоря, fieldset можно использовать отдельно для группировки элементов формы, а legend нужно использовать в сочетании с fieldset, в паре, в качестве заголовка группы.

Рассмотрим простой пример, простой HTML и структура следующие:

<fieldset>
    <legend>Form</legend>
    <div>
        <label>Name :</label><input type="text" placeholder="input Name" />
    </div>
    <div>
        <label>Password :</label><input type="text" placeholder="input Name" />
    </div>
</fieldset>

fieldset {
    border: 1px solid#ddd;
    padding: 12px;
}

legend {
    font-size: 18px;
    padding: 0 10px;
}

Эффект выглядит следующим образом:

CodePen Demo — fieldset & legend Demo

Более интересным моментом является то, что если для fieldset установлена граница border, то содержимое внутри элемента legend будет использоваться как заголовок группы, встроенный в border.

Управление положением и стилем элемента legend

Можно управлять положением и стилем legend.

Позицией можно управлять через margin и padding родительского элемента. Если родительский элемент fieldset не задает padding и legend не задает margin, то legend по умолчанию позиционируется в крайнем левом углу.

fieldset {
    border: 1px solid#ddd;
    // padding: 12px;
}

legend {
    font-size: 18px;
}

Эффект изображения:

Начальным положением заголовка можно управлять, изменяя margin у legend или padding-left у родительского элемента:

fieldset {
    border: 1px groove #ddd;
}

legend {
    animation: marginMove 10s infinite alternate;
}

@keyframes marginMove {
    100% {
        margin-left: 100px;
    }
}

Эффект изображения:

Управляя padding элемента legend, вы можете увеличить площадь окружающих элементов и сделать больше белого пространства.

Сценарий применения — горизонтальные линии по обе стороны от заголовка

После понимания вышеизложенных базовых знаний, мы можем начать немного глубже и подумать о некоторых интересных сценариях применения вышеупомянутых <fieldset> и <legend>.

Наиболее подходящим сценарием, как мне кажется, должен быть макет с горизонтальными линиями по обе стороны от заголовка. Что-то вроде этого:

Конечно, существует множество решений для такого макета, обычно с использованием псевдоэлементов для создания горизонтальных линий с левой и правой стороны, или локальных наложений через абсолютное позиционирование.

Здесь же использование <fieldset> и <legend> делается очень быстро:

<div class="g-container">
    <fieldset><legend>排行榜</legend></fieldset>
</div>

fieldset {
    width: 300px; 
    height: 24px; 
    border: 1px solid transparent; 
    border-top-color: #000; 
}

legend{
    margin: auto; 
    padding: 0 10px; 
}

fieldset устанавливает только верхнюю границу, margin: auto позиционирует заголовок в центре, а padding управляет полями с обеих сторон. очень идеально.

CodePen Demo — fieldset & legend Demo 2

вложенный текст с границами

В этой статье — How to Add Text in Borders Using Basic HTML Elements, а также представлен очень интересный сценарий использования, вложенный текст в границы.

Представьте, что элемент <fieldset> в сочетании с элементом <legend> может генерировать эффект вложенного в границу текста. Затем, комбинируя несколько групп, позиционируя и упорядочивая, можно создать полигональную границу с эффектом вложенного текста.

Псевдокод выглядит следующим образом:

<div class="g-container">
    <fieldset><legend>CSS fieldset</legend></fieldset>
    <fieldset><legend>HTML element</legend></fieldset>
    <fieldset><legend>JavaScript</legend></fieldset>
    <fieldset><legend>TypeScript</legend></fieldset>
</div>

.g-container {
    position: relative;
    width: 300px; 
    height: 300px; 
}
fieldset{
    position: absolute;
    width: 300px; 
    height: 300px; 
    border: 10px solid transparent; 
    border-top-color: #000; 
}
legend{
    padding: 0 10px; 
} 

fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 
fieldset:nth-of-type(4){ transform: rotate(-90deg); }

Схема эффекта выглядит следующим образом:

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

Анимируйте текст, добавив animation к legend.

legend {
    animation: move 3s infinite linear alternate;
} 
@keyframes move {
    100% {
        margin-left: 70px;
    }
}

CodePen Demo — Дизайн пограничного текста с использованием набора полей HTML и легенды

Основываясь на этом, мы можем генерировать границы для различных N-сторонних пограничных вставок. Ниже показана простая попытка создания нескольких многоугольных границ.

CodePen Demo — набор полей и легенда генерируют многоугольник

Наконец-то

Больше замечательных технических статей по CSS собрано на моем Github — iCSS.

И, возможно, вам понравится мой CodePen, который содержит большое количество удивительных CSS эффектов.