HTML <fieldset> tag

HTML <fieldset> tag : Definition

• The HTML <fieldset> tag is used for grouping related to the form elements.

• Generally browsers renders the <fieldset> tag with a black color border around the form but you can also change it's style using CSS.

• You must use the <legend> tag to show a caption/title for <fieldset> of the form.

• It gives semantic meaning to the text contained within it and by default renders in the italic form on the browser but it cand be modified using CSS property

<fieldset> tag example :


<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}



</style>
</head>
<body>
<h1>The fieldset element + CSS</h1>
<form action="#" method="post">
 <fieldset>
  <legend>Register:</legend>
  <label>Full name:</label>
  <input type="text" name="fname"><br><br>
  <label>Email:</label>
  <input type="text" name="email"><br><br>
  <label>Password:</label>
  <input type="password" name="password"><br><br>
  <label>Confirm password:</label>
  <input type="password" name="cnfpassword"><br><br>
  <input type="submit" value="Register">
 </fieldset>
</form>
</body>
</html>

OUTPUT :


The fieldset element + CSS

Register: