Categories
HTML Web development

HTML fieldset tag & legend tag

HTML Fieldset tag and legend tag

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:

Details:







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:

Details:







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!