Code has been added to clipboard!

HTML fieldset Tag

<fieldset>

HTML fieldset: Main Tips

  • The <fieldset> in HTML groups elements inside a <form> element.
  • The <legend> element adds a caption for the <fieldset> element. You need to place it inside the HTML <fieldset> element.

Use of fieldset

The HTML <fieldset> tag groups <form> elements. Normally, a box border is drawn around them.

Example
<form action="login" method="POST">
  <fieldset>
    <legend>Login Form:</legend>
    Username: <input type="text" name="user_name">
    Password: <input type="password" name="user_password">
    <input type="submit" value="Login">
  </fieldset>
</form>

Note: the box border provides some space for captions and creates better visual appearance for the grouped elements.

Attributes for fieldset

disabled

The disabled attribute turns off all the elements inside the <fieldset> element.

Example
<form action="login" method="POST">
  <fieldset disabled>
    <legend>Login Form:</legend>
    Username: <input type="text" name="user_name">
    Password: <input type="password" name="user_password">
    <input type="submit" value="Login">
  </fieldset>
</form>

form

The form attribute gets the values of the ID attributes of a <form> element, which will be a part of the <fieldset> in HTML.

Example
<form action="login" method="POST" id="user_form">
  <fieldset>
    <legend>Login Form:</legend>
    Username: <input type="text" name="user_name">
    Password: <input type="password" name="user_password">
    <input type="submit" value="Login">
  </fieldset>
</form>

<fieldset form="user_form">
  <legend>Other Details:</legend>
  Email ID: <input type="text" name="user_email">
  Phone Number: <input type="text" name="user_number">
</fieldset>

name

It defines the name for the grouped elements.

Example
<form action="login" method="POST" id="user_form">
  <fieldset name="login_form">
    <legend>Login Form:</legend>
    Username: <input type="text" name="user_name">
    Password: <input type="password" name="user_password">
    <input type="submit" value="Login">
  </fieldset>
</form>