HTML Tutorial - HTML For fieldset

To group some of the elements together, you can use the fieldset element. It has local attributes:name, form, disabled.

You can see how the fieldset element is applied in the following code.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p><!--   w  w w.  j  a v  a  2  s  .co m-->
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <button>Submit Vote</button>
  </form>
</body>
</html>

Click to view the demo

legend - Descriptive Label to a fieldset Element

You can add a legend element to each of your fieldset elements to provide more information.

The legend element must be the first child of a fieldset element.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p><!--  w  w w .  j  av a  2s.  com-->
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend accesskey="y">
        About <u>Y</u>ou (ALT + Y)
      </legend>
      <p><label for="userName">User name:</label>
         <input type="text" name="txtUserName" size="20" id="userName" />
      </p>
    </fieldset>

    <fieldset>
      <legend accesskey="u">
        About <u>U</u>s (ALT + U)
      </legend>
      <p>
        <label for="referrer">How did you hear about us?</label>:<br/>
        <select name="selReferrer" id="referrer">
          <option selected="selected" value="">Select answer</option>
          <option value="website">Another website</option>
          <option value="printAd">Magazine ad</option>
          <option value="friend">From a friend</option>
          <option value="other">Other</option>
        </select>
      </p>
    </fieldset>
    
    <button>Submit Vote</button>
  </form>
</body>
</html>

Click to view the demo

The code above also shows how to set up the access key for length tag.

fieldset disable - Disabling Groups of Inputs

You can disable multiple input elements in a single step by applying the disabled attribute to the fieldset element.

The following code shows how to disable the input Elements Using the fieldset Element.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p><!--from   w  ww  . j av a 2  s .  c  o m-->
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset disabled>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <button>Submit Vote</button>
  </form>
</body>
</html>

Click to view the demo