Form fieldset legend vs. heading

[Erin Paseka]

How important are fieldset and legend tags in a form?

I have a form with some section headings that should (as I see it) be legends for fieldsets and also look like headings (h3 sec_main), but the W3C validator objects when I nest legend inside h3 or vice versa, putting legend inside div breaks everything, etc. And legends don't display as full-width blocks like h# or div, so putting class="sec_main" directly on legend necessitates more CSS finagling to get it wider with a larger font size.

Suggestions? I don't want to just have each heading display on the page twice so one can be a legend and the other can be styled as a heading; that would look really redundant.

Is it bad to omit the fieldsets/legends and avoid the whole problem?

[kabel2]

Hi Erin. As accessibility is more and more becoming a concern for all web developers, it is important to understand the differences in the semantics of the HTML you use in forms.

With HTML, headings (h#) delineate content sections to help break thing apart and make a page easier to navigate (for readers that are able to jump by heading). In HTML forms, fieldsets group together related input elements. To identify how those inputs relate a fieldset should usually have a legend (and in HTML4 that is the ONLY valid place to have a legend element) I am unsure how typical screen readers handle fieldsets, but it should be expected that using the proper markup will help.

So a general understanding would be that DIV's and H# share the same type of understanding at FIELDSET's and LEGENDS.

When you talk about font sizes, colors, widths and blocks, you are talking about how the CSS transforms the semantic HTML into something that is "visually" understandable. Currently, the UNL Templates do not include a well defined style for fieldsets and legends. However, if you are looking form styles you could refer to one of the content area resource examples at http://wdn.unl.edu/wdn/templates_3.0/ex ... forms.html. That gives an example of how HTML and CSS work together in forms.

You are, of course, able to design your own form styles to accommodate the visual design you are trying to accomplish.