HTML Fieldset

The HTML form and form elements help us get user inputs. But too many controls confuse the users when they visit an HTML page with a form. In this article, you will learn about fieldset which groups controls together to give a clean look.

<fieldset> tag

The <fieldset> tag is used to group HTML form elements together. The HTML elements under fieldset will appear to be in a box. To understand what fieldset is create an HTML page – example-fieldset.html and insert the following codes.

<!DOCTYPE html>
<html>
<head>
     <title>Fieldset Control</title>
</head>
<body>
     <h1>Fieldset Example</h1>
     <form action="example.php">
     <fieldset>
          <legend>Personal Information</legend>
          <p><input type = "text" name="First Name" placeholder="enter first name"/></p>
          <p><input type = "text" name="Last Name" placeholder="enter last name"/></p>
          <p><input type = "email" name="Email" placeholder="enter email"/></p>
          <p><input type = "text" name="Mobile" placeholder="enter mobile number"/></p>
          <p><input type="submit" name="Submit" value="Submit"/></p>
     </fieldset>
     </form>
</body>
</html>

The fieldset has another tag – <legend>…</legend> which gives a meaningful title to the group. In the example above, you are trying to collect user personal information, then the legend is Personal Information.

Output

The example shows all the control that collect personal information of a user, then it is appropriate to set the fieldset legend to Personal Information.

Output- Fieldset
Output- Fieldset called Personal information

Please support us by disabling your adblocker or whitelist this site from your adblocker. Thanks!

turn of adblocker imag