HTML Fieldsets & Legends

« Prev Next »

What is <fieldset>?

<fieldset> is used to group a set of form elements. This creates a box around a group of form elements. It can also help visually separate the form elements that belong together and can be thought of as a sub-set of a form.

 

What is <legend>?

A <legend> tag provides a caption for the <fieldset>. It is a title for the grouping of form elements, which helps describe the form elements and is useful for accessibility for screen readers.

 

Syntax

<form>
  <fieldset>
    <legend>Section Title</legend>
    <!-- form elements go here -->
  </fieldset>
</form>

Example

<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="firstname"><br><br>
    
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lastname"><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <br>
  <fieldset>
    <legend>Account Settings</legend>
    
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </fieldset>
  
  <br>
  <input type="submit" value="Register">
</form>
Run ›

Key Features

Tag Purpose
<fieldset> Groups form inputs into a set
<legend> Describes the group of fields
notepad
  • There can only be one <legend> tag within a <fieldset>.
  • <legend> must be the first child of <fieldset> for this to work correctly.
  • <fieldsets> can be nested but should be used carefully.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.