2. HTML Form Tag

2.8. Fieldset and Legend


         The fieldset tag is used to put related form elements together in a group. Remember during our first quarter how div and span elements were used to group together related HTML elements. Field set works the same way. Using this element helps the programmer to organize data better for the website.

          Field set has an attribute form that takes the id of forms as values. By using this attribute, the fieldset can be associated with the form indicated even if it is not inside the form itself.

         Meanwhile, the legend tag is used to label the field set. Legends are to field sets as the label element is to form elements. Refer to the sample code below to see an example of the use of fieldset and legend.

 <form id="login">

<fieldset form="login">

            <legend>Log-in Credentials: </legend>

             <label for="userName">Username:</label>

            <input type="text" id="userName" name="userName"><br><br>

            <label for="pword">Password:</label>

            <input type="password" id="pword" name="pword"><br><br>

            <input type="submit" value="Submit">

            <input type="reset" value="Clear">

 </fieldset>

</form>

 

Output: