Detailed explanation of the usage of the rare tags fieldset and legend

When it comes to <fieldset> and <legend> , most people will definitely be unfamiliar with them. Among HTML tags, they are among the less used ones.

I first learned about these two tags when I was learning reset.css or normalize.css in my early years. I saw them in the CSS that reset the default style of the unified code. Recently, I encountered these two tags while studying borders, and found them very interesting, so I wrote an article to share some knowledge points with you.

Understanding <fieldset> and <legend>

Generally speaking, <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 form elements, while legend needs to be used in conjunction with fieldset , appearing in pairs as the title of the group.

Let's take a 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 interesting point is that if border is set for fieldset , the content in legend element will be embedded in border as the title of the group.

Control the position and style of legend

The position and style of legend can be controlled.

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

fieldset {
    border: 1px solid#ddd;
    // padding: 12px;
}
 
legend
    font-size: 18px;
}

Effect picture:

By changing margin of legend or padding-left of the parent element, you can control the initial position of the title:

fieldset {
    border: 1px groove #ddd;
}
 
legend
    animation: marginMove 10s infinite alternate;
}
 
@keyframes marginMove {
    100% {
        margin-left: 100px;
    }
}

Effect picture:

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

Application scenario - horizontal lines on both sides of the title

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

I think the most suitable scenario is the layout with horizontal lines on both sides of the title. Something like this:

Of course, there are many ways to solve this layout. Usually, pseudo-elements are used to generate horizontal lines on the left and right sides, or they are covered and superimposed locally through absolute positioning.

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

<div class="g-container">
    <fieldset><legend>Ranking</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, positions the title in the middle through margin: auto , and controls the white space on both sides through padding . Absolutely perfect.

CodePen Demo -- fieldset & legend Demo 2

Border nested text

In this article, How to Add Text in Borders Using Basic HTML Elements, a very interesting usage scenario is also introduced, which is to nest text in borders.

Imagine that a <fieldset> element combined with a <legend> element can create an effect of text embedded in a border. Then, by combining multiple groups and positioning them, you can create an effect of text nested in a multi-sided border.

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:

By combining multiple <fieldset> and <legend> , we can create four sides of a container, forming a very nice border with text embedded in it.

By adding animation to legend , you can make the text move

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

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

Okay, based on this, we can generate various N-sided borders with embedded text. Here is a simple attempt at several polygon borders.

CodePen Demo -- fieldset and legend generate polygon

This is the end of this article about the detailed usage of the uncommon tags fieldset and legend. For more related fieldset and legend tag content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!