Putting It All Together - Web Standards: Mastering HTML5, CSS3, and XML - page 420

4. Create logical group(s) for form elements.

<form method="post" action="register.php">
<fieldset>

</fieldset>
<fieldset>

</fieldset>
</form>

Add the desired form controls such as text fields ( text ) and checkboxes ( checkbox ) and
their attributes.

5.

<form method="post" action="register.php">
<fieldset>
<input type="text" name="firstname" id="firstname" size="15" maxlength="255" />
<br /><input type="text" name="lastname" id="lastname" size="20" maxlength="255" />
</fieldset>
<fieldset>
<input type="checkbox" name="interests" value="1" id="photo" />
<input type="checkbox" name="interests" value="2" id="video" />
<input type="checkbox" name="interests" value="3" id="web" />
</fieldset>
</form>

Improve accessibility. The label element adds a label to a form control. The legend
element assigns a caption to a fieldset . The tabbing order can be set by tabindex
attributes.

6.

<form method="post" action="register.php">
<fieldset>
<legend>Personal data</legend>
<label for="firstname">First name</label> <br />
<input type="text" name="firstname" id="firstname" size="15" maxlength="30" 
tabindex="12" /><br />
<label for="lastname">Last name</label> <br />
<input type="text" name="lastname" id="lastname" size="20" maxlength="50" 
tabindex="13" />
</fieldset>
<fieldset>
<legend>Main interests</legend>
<input name="interests" type="checkbox" value="1" id="photo" tabindex="14" />
<label for="photo">Photography</label> <br />
<input name="interests" type="checkbox" value="2" id="video" tabindex="15" />
<label for="video">Videography</label> <br />
<input name="interests" type="checkbox" value="3" id="web" tabindex="16" />
<label for="web">Web</label>
</fieldset>
</form>