reptile7's JavaScript blog
Saturday, April 30, 2011
 
Everything You Always Wanted to Know About Fieldsets (But Were Afraid to Ask)
Blog Entry #213

In the Introduction section of HTML Goodies' "JavaScript and HTML Tricks" tutorial, the author gushes, My Web programming has never been the same since I learned how to use fieldsets to make beautiful forms in Web pages. The tutorial's second page appropriately begins with a Using a stylish form fieldset section that applies a fieldset and a companion legend to a six-control login form.

<form>
<fieldset>
<legend>Please enter your Yahoo! Login Information</legend>
...Two text fields, three radio buttons, and a submit button laid out in a four-row table (see the background-image demo below)...
</fieldset>
</form>


Fieldsets are not new to us: we've been conversant with them since the A 'structured' form section of Blog Entry #93. Nonetheless, the Using a stylish form fieldset section, short as it is, contains several odd and/or incorrect statements that do need to be sorted out.

Fieldset history
One of the coolest form elements built into HTML is the fieldset. It relies on the browser to create a look that can't be replicated using ordinary HTML commands [emphasis added].
In a markup context, the fieldset element has long constituted an ordinary HTML command. The fieldset element was proprietarily implemented by Microsoft for MSIE 4 and shortly thereafter was standardized in HTML 4; its Netscape/Mozilla support goes back to Netscape 6. The now-a-Recommendation HTML5 specification specifies the fieldset element here.

Fieldset appearance
It has the sophistication of images ...
This is nonsense: in its basic form, a fieldset is nothing more than a box drawn around a set of controls, as you can see for yourself from the tutorial's fieldset demo, which refreshingly works at both the HTML Goodies and WebReference versions of the tutorial*. Further examples of basic fieldsets can be seen in HTML Goodies' "Fieldsets and Legends" tutorial.

(*Not so long ago this was not so, as HTML Goodies formerly imported a Yahoo! reset-min.css file that zeroed out the fieldset frame via a fieldset { border: 0; } style.)

But a fieldset can in fact be "stylish", that is, it can be jazzed up with some CSS. We recently worked through a tutorial, "How to Populate Fields from New Windows Using JavaScript", that did just that; more specifically, this tutorial sets CSS border and background (and padding) properties for the form fieldset on this page.

It occurred to me that if we can give a fieldset a background color, then we can give it an 'image wallpaper' via the CSS background-image property:

Please enter your Yahoo! Login Information
User name
Password
Security

Much cooler than the plain vanilla fieldset in the tutorial, eh?

The yellow_fabric.gif image that wallpapers the above fieldset was taken from Netscape's "The Background Sampler" (a resource brought to my attention by HTML Goodies' "So, You Want A Background, Huh?" tutorial), which is no longer hosted by Mozilla/Netscape but is archived at various sites on the Web, for example, the W3C has posted it here.

Fieldset content/parent model
A fieldset must be contained in a form. If you want to use one elsewhere, just surround it with form tags, provided that you're not interrupting another form, of course.
The second sentence implies that a fieldset element is not confined to having control element 'children' (more precisely, descendants - the tutorial code itself intersperses table/tr/td/th elements between its fieldset and control elements) but can contain other types of elements, and this is indeed the case.

In both the HTML 4.01 Strict and Transitional DTDs, the fieldset element has a (#PCDATA,LEGEND,(%flow;)*) content model.

• Regarding the #PCDATA part of the model, the fieldset element declaration is prefaced by the following cryptic comment:
<!-- #PCDATA is to solve the mixed content problem, per specification only whitespace is allowed there! -->
I have no idea what mixed content problem the W3C is talking about. Anyway, to my understanding the content of a fieldset element is supposed to begin with either whitespace - most often, an end-of-line character - or with nothing at all - an empty string counts as #PCDATA - but not with bona fide text.

• After the #PCDATA, a fieldset element must contain a legend element, or at least this is true for a valid document. However, the legend element can also be set to an empty string: <legend></legend>.

• Finally, the model ends with zero or more %flow; units (I would say "elements" but %flow; includes #PCDATA). The flow entity encompasses both block-level and inline elements, meaning a fieldset's post-legend content can be just about anything.

The fieldset element is a block-level element with an effective width of 100% (i.e., it spans the width of the viewport); as such, it makes a nice frame for p element text:


In suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, and no fact tried by a jury shall be otherwise re-examined in any court of the United States than according to the rules of the common law.


<fieldset style="background-color:#eeffee;border:1px solid red;">
<legend style="display:none;"></legend>
<p>In suits at common law...</p></fieldset>


In contrast, directly equipping a p element with a border/background gives a more claustrophobic rendering:

In suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, and no fact tried by a jury shall be otherwise re-examined in any court of the United States than according to the rules of the common law.


Getting back to the blockquote at the beginning of this section, the first sentence - A fieldset must be contained in a form - is not true. The body element has a (%block;|SCRIPT)+ +(INS|DEL) content model and the fieldset element is a %block; element (vide supra), and therefore a fieldset element can be a child node of the body element just like a div or p element can. (Controls don't need to be in a form - why should a fieldset?) In corroboration, I find that a form-less fieldset element can be run through the W3C's markup validator without incident, i.e., no errors are thrown.

More generally, the following elements can contain a fieldset element by virtue of having %block; or %flow; in their content models:

blockquote, body, dd, div, fieldset (yes, fieldsets can nest), form, ins/del, li, map, noscript, object, th/td

The above list excludes the button element, whose (%flow;)* -(A|%formctrl;|FORM|FIELDSET) content model excludes the fieldset element.

The form element itself has a (%block;|SCRIPT)+ -(FORM) content model, and thus the Using a stylish form fieldset section's final sentence - One form can contain as many fieldsets as you wish - is correct: see the "doctor's office" example in the W3C's fieldset/legend documentation.

Besides the fieldset and legend, the login form holds a table of controls, including three radio buttons whose labels play a starring role in the next tutorial section, Using Labels to Create Checkboxes and Radio Buttons With Clickable Descriptions, which we'll put under the microscope in the following entry.

reptile7

Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)