Adding a Descriptive Label to a fieldset Element

A legend element is used to in each of the fieldset elements to give user descriptive information.

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

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <fieldset>
                  <legend>Enter Your Details</legend>
                  <p>
                        <label for="name">Name: <input id="name" name="name" /></label>
                  </p>
                  <p>
                        <label for="name">City: <input id="city" name="city" /></label>
                  </p>
            </fieldset>
            <fieldset>
                  <legend>Vote For Your Three Favorite</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 this demo.
Home 
  HTML CSS Book 
    HTML  

fieldset:
  1. Grouping Form Elements Together
  2. Adding a Descriptive Label to a fieldset Element
  3. Disabling Groups of Inputs Using the fieldset Element
Related: