A Smarter Way To Learn HTML & CSS(2015)

57
Grouping related elements

If your form has a lot of parts, you can improve the user’s experience by grouping related parts together visually. Take this form…

It’ll be easier for the user to understand if you enclose each group in a box…

This is the code. (I’ve added a little CSS styling. We won’t go into that now.)

<form action="questionnaire.php" method="post">
<fieldset>
<label>First name: <input type="text" name="first-name" size="15" maxlength="30"></label>
<label>Last name: <input type="text" name="last-name" size="15" maxlength="30"></label><br><br>
<label>Email: <input type="text" name="email" size="25" maxlength="40"></label>
</fieldset>
<br>
<fieldset>
<label>What is the meaning of life?<br><textarea name="meaning" rows="4" cols="40">
</textarea></label><br><br>
What do you want on your pizza?<br>
<label><input type="checkbox" name="topping">Pepperoni </label>
<label><input type="checkbox" name="topping">Sausage </label>
<label><input type="checkbox" name="topping">Mushrooms </label>
<label><input type="checkbox" name="topping">Olives </label>
</fieldset>
</form>

By enclosing the two groups of controls in opening and closing fieldset tags, we tell the browser to enclose the groups in separate boxes.

Note that everything within the fieldset tags is indented 2 spaces.

We can improve the readability of the form even further by adding legends—descriptive text that’s at the top of the box.

Now the first group has the legend “Contact info” and the second group has the legend “Questions.” This is the code.

<form action="questionnaire.php" method="post">
<fieldset>
<legend>Contact info</legend>
<label>First name: <input type="text" name="first-name" size="15" maxlength="30"></label>
<label>Last name: <input type="text" name="last-name" size="15" maxlength="30"></label><br><br>
<label>Email: <input type="text" name="email" size="25" maxlength="40"></label>
</fieldset>
<br>
<fieldset>
<legend>Questions</legend>
<label>What is the meaning of life?<br><textarea name="meaning" rows="4" cols="40"></textarea></label><br><br>
What do you want on your pizza?<br>
<label>Pepperoni<input type="checkbox" name="topping"></label>
<label>Sausage<input type="checkbox" name="topping"></label>
<label>Mushrooms<input type="checkbox" name="topping"></label>
<label>Olives<input type="checkbox" name="topping"></label>
</fieldset>
</form>

The legend tags go on the line following the opening fieldset tag and, like everything enclosed by the fieldset tags, are indented 2 spaces.

In your HTML group the two text fields with one set of fieldset tags and the radio, checkbox, and selection controls with a second set of fieldset tags. Make up legends for both groups. Save the file. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-57-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/57.html