When it comes to

and < Legend >, most people will be unfamiliar with them and belong to the less used group of HTML tags.

I first learned about these two tags when I was learning about reset.css or normalize.css and saw them in these CSS that reset the default style of uniform code. Recently, I came across these two labels because of my research on borders. I found them very interesting, so I started an article to share some knowledge points sorted out with you.

To understand<fieldset> 与 <legend>

In general,

is more commonly used in forms than

.
  • <fieldset>: HTML<fieldset>The element is used to group control elements in a form
  • <legend>In:<fieldset>There is a built-in one in<legend>Element as the title of the fieldset

Simply put, a fieldset can be used alone to group the elements of a form, while legend needs to be paired with a Fieldset as a group header.

Take a look at a simple example of simple HTML and structure 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>
Copy the code
fieldset {
    border: 1px solid#ddd;
    padding: 12px;
}

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

The effect is as follows:

CodePen Demo — fieldset & legend Demo

The interesting point is that if you put a border around the FieldSet, the contents of the Legend element will be embedded within the border as the group’s title.

controllegendLocation and style of

You can control the location and style of legend.

The position can be controlled by margin and padding of the parent element. If the parent element fieldSet does not set padding and legend does not set margin, legend will default to the far left.

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

legend {
    font-size: 18px;
}
Copy the code

Effect:

You can control the initial position of the caption by changing the margin of 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; }}Copy the code

Effect:

By controlling the padding of Legend, you can increase the area around the elements to make them whiter.

Application Scenarios – Horizontal lines on either side of the title

Now that we know the basics, we can dig a little deeper and think about some of the interesting scenarios for < Fieldset > and < Legend >.

I think the most suitable scene would be the layout with horizontal lines on either side 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, or overlaying by absolutely positioning the local area.

Here, using

and < Legend > is done very quickly:
<div class="g-container">
	<fieldset><legend>list</legend></fieldset>
</div>
Copy the code
fieldset {
	width: 300px; 
	height: 24px; 
	border: 1px solid transparent; 
	border-top-color: # 000; 
}

legend{
	margin: auto; 
	padding: 0 10px; 
} 
Copy the code

The fieldSet only sets the top border, uses Margin: Auto to position the title in the middle, and uses padding to control the margin on both sides. It’s perfect.

CodePen Demo — fieldset & legend Demo 2

Border nested text

In this article — How to Add Text in Borders Using Basic HTML Elements — I also introduced an interesting use scenario for nested Text in Borders.

Imagine a

element combined with a < Legend > element to produce a border text. Combine groups and position them to produce a multi-border text.

The pseudocode 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>
Copy the code
.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); }
Copy the code

The renderings are as follows:

Using multiple combinations of

and < Legend >, we can create a nice border text effect for four sides of a container.

Animate the text by adding animation to Legend

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

CodePen Demo — Border Text Design using HTML fieldset and legend

Ok, based on this, we can go to generate various n-border border inset text border. Here is a simple way to try out a few polygon borders.

CodePen Demo — fieldset and legend generate polygon

The last

The end of this article, I hope to help you :), want to Get the most interesting CSS information, do not miss my official number – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.