The Magical Use of Uncommon Labels Fieldset and Legend
Tags: css, javascript, html, web
Published: 2022-07-26 15:48:55

---
title: The Magical Use of Uncommon Labels Fieldset and Legend
published: true
description: How to use Fieldset and Legend to create an amazing border effect.
tags: CSS, Javascript, HTML, Web
# cover_image: https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e061c812de6e43d19e84de483c87d71b~tplv-k3u1fbpfcp-watermark.image
# Use a ratio of 100:42 for best results.
---

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:

```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>
```

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

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

The effect is as follows:

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a40ecb1d9ff4c0ab88e500e7e952c34~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- fieldset & legend Demo ](https://codepen.io/Chokcoco/pen/poEYYBa)

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.

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

legend {
    font-size: 18px;
}
```

Effect picture:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/668bf95ef6f746b58e668b18bc4c456b~tplv-k3u1fbpfcp-watermark.image)

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

```CSS
fieldset {
    border: 1px groove #ddd;
}

legend {
    animation: marginMove 10s infinite alternate;
}

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

Effect picture:

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdbec000c68749beabeb3ae83d354e06~tplv-k3u1fbpfcp-watermark.image)

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

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f038f232d9044b81ac075081a142cee2~tplv-k3u1fbpfcp-watermark.image)

## 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:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/020f7bd08c284c338664a6befee836b1~tplv-k3u1fbpfcp-watermark.image)

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:

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

```CSS
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 ](https://codepen.io/Chokcoco/pen/xxEMWYe)

## border nested text

In this article -- [How to Add Text in Borders Using Basic HTML Elements](https://css-tricks.com/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:

```HTML
<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>
```

```CSS
.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:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e061c812de6e43d19e84de483c87d71b~tplv-k3u1fbpfcp-watermark.image)

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`

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

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4d8d30fe884408b9db24d78ec737c6d~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- Border Text Design using HTML fieldset and legend](https://codepen.io/Chokcoco/pen/xxEMxMx)

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

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7c87e56d4a043b1a0480b8b460819f6~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- fieldset and legend generate polygon ](https://codepen.io/Chokcoco/pen/zYKbQpN)

## Finally

More wonderful CSS technical articles are summarized in my [Github -- iCSS](https://github.com/chokcoco/iCSS).

And maybe you will love my [CodePen](https://codepen.io/Chokcoco/), which has a large number of amazing CSS effects.