Revision:
A HTML <fieldset> element is used to >group the control elements in the form, while the <legend> element is built into the <fieldset> as the title of the fieldset.
Fieldset can be used alone to group the elements of a form, while legend needs to be used in pairs with fieldset as group headings.
code:
<div>
<fieldset>
<legend>Form</legend>
<div class="format">
<label>name :</label><input type="text" placeholder="input name" />
</div>
<div class="format">
<label>password :</label><input type="text" placeholder="input password" />
</div>
</fieldset>
</div>
<style>
fieldset {border: 0.1vw solid blue; padding: 2vw;}
legend {font-size: 1.8vw; padding: 0 1vw;}
label {display: inline-block;width: 10vw;text-align: right;}
input {width: 20vw; outline: none; margin-left: 1.2vw; font-size: 1.4vw; padding: 0.4vw; border: 0.1vw solid green; border-radius: 0.2vw;}
.format{margin-bottom: 1.2vw;}
</style>
It is possible to control the position and style of legend.
The position can be controlled through the margin and the padding of the parent element. If the parent element's "fieldset" is not set, the padding and margin of the legend element is not set and it will be positioned at the far left by default. The initial position of the title can be controlled by changing the margin of the legend or the padding-left of the parent element.
By controlling the padding of "legend", you can increase the area of surrounding elements and leave a little more white space.
code:
<div>
<fieldset class="fieldset1">
<legend class="legend1">Form</legend>
<div class="format1">
<label class="label1">name :</label><input class="name1" type="text" placeholder="input name" />
</div>
<div class="format1">
<label class="label1">password :</label><input class="pass1" type="text" placeholder="input password" />
</div>
</fieldset>
</div>
<style>
.fieldset1 {border: 0.1vw solid blue; padding: 0.1vw;}
.legend1 {font-size: 1.8vw; animation: marginMove 10s infinite alternate;}
.label1 {display: inline-block;width: 10vw;text-align: right;}
.name1, .pass1{width: 20vw; outline: none; margin-left: 1.2vw; font-size: 1.4vw; padding: 0.4vw; border: 0.1vw solid green;
border-radius: 0.2vw;}
.format1{margin-bottom: 1.2vw;}
@keyframes marginMove {
100% {margin-left: 20vw;}
}
</style>
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.
code:
<div>
<div class="g-container">
<fieldset class="fieldset2"><legend class="legend2">排行榜</legend></fieldset>
</div>
</div>
<style>
.fieldset2{width: 30vw; height: 2.4vw; border: 0.1vw solid transparent; border-top-color: #000;}
.legend2{ margin: auto; padding: 0 1vw;}
</style>
A <fieldset> element can be combined with an <legend> element to generate the effect of a border inlaid text. By combining multiple groups, and then positioning them and arranging them, the effect of multi-border nested text can be generated.
example: <fieldset>, <legend> - animated
code:
<div class="g-container2">
<fieldset class="fieldset3"><legend class="legend3">CSS fieldset</legend></fieldset>
<fieldset class="fieldset3"><legend class="legend3">HTML element</legend></fieldset>
<fieldset class="fieldset3"><legend class="legend3">JavaScript</legend></fieldset>
<fieldset class="fieldset3"><legend class="legend3">TypeScript</legend></fieldset>
</div>
<style>
.g-container2 {position: relative; width: 30vw; height: 30vw; }
.fieldset3 {position: absolute; width: 28vw; height: 29vw; border: 1vw solid transparent; border-top-color: blue;}
.legend3 {padding: 0 1vw; animation: move 3s infinite linear alternate;}
.fieldset3:nth-of-type(2){ transform: rotate(90deg); }
.fieldset3:nth-of-type(3){ transform: rotate(180deg); }
.fieldset3:nth-of-type(3)>.legend3{ transform: rotate(180deg); }
.fieldset3:nth-of-type(4){ transform: rotate(-90deg); }
@keyframes move {
100% {margin-left: 10VW;}
}
</style>
code:
<div class="foto">
<fieldset class="fieldset4">
<legend class="legend4">Zoom Spots</legend>
<div class="foto" aria-hidden="true">Zoom Spots</div>
<label for="default">Default</label>
<input type="radio" id="default" name="zoomies" value="default" checked>
<label for="bus">Bus</label>
<input type="radio" id="bus" name="zoomies" value="bus">
<label for="car">Car</label>
<input type="radio" id="car" name="zoomies" value="car">
<label for="walk">Walk Sign</label>
<input type="radio" id="walk" name="zoomies" value="walk">
<label for="mail">Mail Truck</label>
<input type="radio" id="mail" name="zoomies" value="mail">
<label for="stop">Bus Stop</label>
<input type="radio" id="stop" name="zoomies" value="stop">
<label for="peak">Peak</label>
<input type="radio" id="peak" name="zoomies" value="peak">
<div class="foto" role="img" aria-label="Looking up a wet Chicago city street
in the early evening, cars with headlights facing the camera, a bus and bus stop on the left
of the image, a mail truck next to walking sign on the right, and in the middle center
is the top of an office tower against a cloudy blue sky."></div>
</fieldset>
</div>
<style>
.foto[role="img"] {width: 30vmin; aspect-ratio: 1920 / 2402; background-image: url("../pics/foto-fieldset.jpg");
background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; }
@media screen and (prefers-reduced-motion: no-preference) {
.foto[role="img"] {transition: all 0.2s ease-out;}
}
#bus:checked ~ .foto[role="img"] {background-position: 29% 71%; background-size: 600%;}
#car:checked ~ .foto[role="img"] {background-position: 70% 76%; background-size: 550%;}
#walk:checked ~ .foto[role="img"] {background-position: 77% 67%; background-size: 1200%;}
#mail:checked ~ .foto[role="img"] {background-position: 71% 68%; background-size: 800%;}
#stop:checked ~ .foto[role="img"] {background-position: 0% 71%; background-size: 600%; }
#peak:checked ~ .foto[role="img"] {background-position: 52% 39%; background-size: 800%;}
/* Layout */
.fieldset4 {display: grid; grid-template-columns: 30vmin 6vw 3vw; gap: 0.25vw 1vw; max-width: 33vw; padding-top: .75vw;}
.fieldset4 > * {align-self: start;}
.fieldset4 .foto[role="img"] {grid-row: 1 / span 9;}
.legend4 {/* Visually hides it */ position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
width: 0.1vw; height: 0.1vw; white-space: nowrap;}
.fieldset4 > .foto[aria-hidden] { /* The legend replacement */ /* The -1 allows it to span grid-template-columns */
grid-column: 2 / -1; font-weight: bold; margin-top: 5vw; }
</style>