From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 5.6: Form Cosmetics
You will notice that most forms have boxes around them. This could be done easily using CSS since, as was shown in Chapter 3, the CSS box model supports borders. Because forms requiring boxes around areas is so common, and likely because forms existed before CSS did, HTML has an element for putting content into a box. The tag for this element is fieldset. This tag does a good job of describing it’s purpose but is not the most obvious choice. Using a field set works just like any other div style element.
<p>This is some text in a <b>fieldset</b>.
While field sets are generally used only in forms,
there is nothing stopping you from using a fieldset outside a form.</p>
</fieldset>
One of the nice things about using a field set instead of using CSS styles is that it supports having a legend. This is descriptive text that appears in the top-left corner of the box used to describe the fields in that box. While it is possible to get the same effect using CSS, it would require some complexity. To add a legend to a fieldset element, you simply need to use the legend tag inside of that element as shown here:
<p>The <b>fieldset</b> element can have a <b>legend</b> element inside of it.
The <b>legend</b> tag provides a name for the fieldset.
</p> </fieldset>
Finally, you can have nested fieldsets. The form below shows how you can put multiple fieldsets into another fieldset. You can even alter the css of a fieldset to allow them to be side by side as is being done with the radio buttons and checkboxes. This is done by specifying a width for the fieldset style and making sure that the display is inline-block. When we get into CSS layout in Chapter 6, several other ways of easily arranging fieldsets will be possible.
It makes a lot of sense to put related checkboxes and radio buttons into their own fieldsets but this leads to the obvious question about how do we work with checkboxes and radio buttons. That is what we will examine next.
Chapter contents
Chapter 5 Contents
5.1 Forms Cheat Sheets
This chapter's summary cheat sheet.
5.2 The client-server model
How forms are traditionally used.
5.3 The Form tag
How to set up a form in HTML.
5.4 Inputting text
Getting text input from the user.
5.5 Specialized text formats
Making your input fields more specific and semantic.
5.6 Form cosmetics
Making forms look more like printed forms.
5.7 checkboxes & radio buttons
How to use Checkboxes and Radio buttons.
5.8 Numbers and Dates
Using numbers and dates gives your user better GUI controls.
5.9 special purpose input types
The reset, button, image, color, and file input types.
5.10 Option Select
The select element lets users select options from a drop-down list.
5.11 Data Lists
Coming October 20th.
5.12 Output
Coming October 27th.
5.13 dialog box concepts
Coming November 3rd.
5.14 using dialog boxes
Coming November 17th.
5.15 Validating forms
Coming November 24th.
5.16 processing forms as an array
Coming December 1st.
5.17 Project: Trivia
Coming December 8th.
5.18 Trivia Project Solution
Coming December 15th.