The HTML <fieldset> tag sets the related elements into group in a form.
The <fieldset> tag draws a box around the related group of elements.
The HTML <legend> tag specifies a caption for the <fieldset> element.
Example:
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Details:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="appointment">Appointment:</label>
<input type="date" id="appointment" name="appointment"><br><br>
</fieldset>
</form>
</body>
</html>Output:
Example2 (Using the CSS to style <fieldset> tag and <legend> tag):
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
background-color: #e9c46a;
border: 3px solid #264653;
}
legend {
background-color: #264653;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Details:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="appointment">Appointment:</label>
<input type="date" id="appointment" name="appointment"><br><br>
</fieldset>
</form>
</body>
</html>
Output:
Attributes (<fieldset> tag):
disabled (value- disabled) – defines that a group of related form elements is disabled.
form (value- form_id) – defines which form the fieldset belongs to.
name (value- text) – defines a name for the fieldset.
Enjoy coding!