This was a tough one to wrap up. There are probably more acceptable possibilities with this question than with previous questions. A lot of great examples were brought to light regarding
…once I start working with forms I switch my focus from semantics to accessibility and usability.
Excellent point. It’s always good practice to ask yourself whether you’re being semantic for the sake of being semantic. Have I mentioned that I don’t like the actual word “semantic”? I don’t.
I don’t really consider a form label and text field a paragraph so that’s out.
This was echoed through the rest of the discussion as well. However, it just might give you better results in the nonstyled version (as opposed to using a
label or nothing).
And while using nothing might not appeal to you, MikeyC pointed out that it will not validate without a block-level element surrounding the
Which brings us to using
fieldset, which Dave S. first suggested. The use of
fieldset opened the floodgates on a host of great examples, and for simple small forms,
fieldset and some CSS applied might be all you really need.
The use of
fieldset was also argued a bit, back and forth. On one hand, you could see this as purely a presentational addition, and on the other hand you could quote the W3C:
FIELDSETelement allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.
I like the sound of that.
You can’t talk about forms without talking about using
table to format them. Paul G.:
… it ensures that labels and inputs maintain a logical visual order and layout when CSS is off
Certainly for larger forms, when you’re dealing with multiple controls, inputs, form fields, drop-downs, etc. — tables still seem like the best way to go. You could argue either way, whether a form is tabular data — but the truth is, styling a large form soley with CSS is not a simple task, and undoubtedly will not degrade nicely.
Summary (my take)
When it comes to marking up forms, I’ll take the following into account:
- When marking up a small form with a few elements, I’ll use
fieldsetand CSS to style them — taking into account what the unstyled form will look like.
- Tables still are not evil. For large forms, in order to make the form useable and organized, it’s hard to beat the simplicity of a
tablehere. CSS techniques seem to be somewhat complicated in a place where a simple
tablewould work all around.
- In the past, I’ve used
ptags to group
inputtags. I’m now divided on this method. For simple forms, it will ensure consistent formatting across browsers yet could be argued that it is not a paragraph of text.
- Trying to semantically structure a form makes my head hurt.
See all quiz questions and discussions in chronological order.