The Magical Use of Uncommon Labels Fieldset and Legend

When it comes to <fieldset> and <legend>, most people will definitely be unfamiliar, and they belong to the group that is less used in HTML tags.

I first learned about these two tags when I was learning reset.css or normalize.css in my early years. Recently, because of the research on the border, I came across these two tags, and found that they are still very interesting, so I wrote an article to share some of the knowledge points I have compiled with you.

Learn about fieldset and legend

In general, <fieldset> and <legend> are more commonly used in forms.

• <fieldset>: The HTML <fieldset> element is used to group control elements in a form
• <legend>: a <legend> element is built into <fieldset> as the title of the fieldset

In short, fieldset can be used alone to group elements of a form, while legend needs to be used in conjunction with fieldset, in pairs, as the title of the group.

Let's look at a simple example, the simple HTML and structure are as follows:

<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;
}

The effect is as follows:

CodePen Demo -- fieldset & legend Demo

The more interesting point is that if the border border is set for the fieldset, the content inside the legend element will be used as the title of the group, embedded within the border.

Controls the position and style of legend

It is possible to control the position and style of the legend.

For the position, we can control it through margin and the padding of the parent element. If the parent element fieldset does not set padding and legend does not set margin, then legend is positioned at the far left by default.

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

legend {
    font-size: 18px;
}

Effect picture:

The initial position of the title can be controlled by changing the margin of the legend or the padding-left of the parent element:

fieldset {
    border: 1px groove #ddd;
}

legend {
    animation: marginMove 10s infinite alternate;
}

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

Effect picture:

By controlling the padding of legend, you can increase the area of ​​the surrounding elements and make more white space.

Application scenario -- horizontal lines on both sides of the title

After understanding the above basic knowledge, we can start a little deeper and think about some interesting application scenarios of the above <fieldset> and <legend>.

The most suitable scene I think should be the layout with horizontal lines on both sides of the title. Something like this:

Of course, there are many solutions to this layout, usually using pseudo-elements to generate horizontal lines on the left and right sides, or local overlays through absolute positioning.

Here, using <fieldset> and <legend> is done very quickly:

<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 only sets the top border, margin: auto positions the title in the middle, and padding controls the margin on both sides. very perfect.

CodePen Demo -- fieldset & legend Demo 2

border nested text

In this article -- How to Add Text in Borders Using Basic HTML Elements, and also introduces a very interesting usage scenario, nesting text in borders.

Imagine that a <fieldset> element combined with a <legend> element can generate a border inlaid text effect. Then, by combining multiple groups and positioning and arranging, you can generate a polygon border with nested text. effect.

The pseudo code is as follows:

<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); }

The effect diagram is as follows:

Through the combination of multiple <fieldset> and <legend>, we can spell out the 4 sides of a container to form a very beautiful border inlay effect.

Animate text by adding animation to legend

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

CodePen Demo -- Border Text Design using HTML fieldset and legend

Well, based on this, we can generate borders for various N-sided border inlays. Below is a simple attempt at several polygon borders.

CodePen Demo -- fieldset and legend generate polygon

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.