Assembling Forms and Applications - HTML5 with CSS3 - page 272

career in web development without ever seeing it. We're not even going to cover the element in any further
depth in this topic. You can learn more about keygen at the Mozilla Developer Network
( https://developer.mozilla.org/docs/HTML/Element/keygen ).
Structuring Forms
Now that you've been introduced to all the myriad form controls you'll need, you might be thinking about
how to put them all together. Controls are merely component parts, and the form in its entirety is more than
the sum of its controls. A usable and accessible form needs a meaningful structure, just as the rest of your
document does. And because the form element can contain almost any structural markup, you have a
broad HTML arsenal at your disposal.
When you construct a form, as with any other content, you should think about the meaning and purpose of
the content and wrap it in the most semantically appropriate tags. A list of options with checkboxes or radio
buttons should probably be marked up as a list, with each option held in a separate list item (the li
element). If the order of those options is significant—option 1, option 2, option 3, and so on—the list should
probably be an ordered one (the ol element). If your form is split into distinct sections, perhaps each
section could be wrapped in a section element with a heading ( h1 through h6 ) as its title. If each control
in that form represents a separate thought, it may be sensible to wrap them in paragraphs (the p element).
With that in mind, remember that forms aren't actually read like normal content. They exist to engage the
user—to open the door and invite your visitors in. Think about the meaning behind the information you're
requesting of them, and consider the often-tedious procedure of stepping through a series of controls and
entering data into them. Arrange and organize your form with an eye toward optimal usability and
accessibility.
In addition to the headings, paragraphs, lists, and tables you already know, a few special elements are
designed specifically for use with forms.
fieldset
The fieldset element encompasses a set of related controls, collecting them into a logical group. The
fieldset can in turn contain any other structural markup you might need to further arrange and support
each control (paragraphs, lists, and so on), and even nested fieldset elements to establish groups within
groups (but keep nesting to a minimum). By default, most web browsers will display a thin border around a
fieldset , though the exact appearance of the border will vary from browser to browser. We'll show you
how you can remove this default border with CSS later in this chapter.
The fieldset element doesn't do much on its own, it's simply a container, but it has more semantic value
than the semantically neutral div element; if you're inclined to use a div or even a section to group
controls together, a fieldset might be a better choice. Consider the meaning and purpose of your fields
and gather them into sets appropriately.
Listing 8-22 demonstrates the markup for a simple form, much like the one you saw in Listing 8-1 way
back at the beginning of this chapter. This time, the two form controls have been wrapped in a fieldset