FIELDSET and LEGEND Tags in Web Design
In this post I will explain one common HTML element used in many websites. The element that I’m talking about is: FIELDSET linked closely with LEGEND. For a standard definition I will cite W3C.
The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose. The proper use of this element makes documents more accessible.
The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.
<fieldset>
<legend>Legend Text</legend>
Sample content here
</fieldset>
What is so cool about these tags?
From my point of view FIELDSET + LEGEND are one good pair. It is one of the best design oriented group of tags in HTML. The best part is that any content will fit well in this container. Let’s have some examples in order to see what is so special about these 2 tags.
1. Wrapper for Content
The first sample is my blog which is not updated: www.gongea.com. The blog was developed based on the FIELDSET + LEGEND. Every article is wrapped in a FIELDSET and the title is displayed from a LEGEND tag. Even the tag cloud and the blogroll are wrapped also in a FIELDSET.
2. Wrapper for Images
In this example the FIELDSET and LEGEND are combined with a picture. Let’s see what we can make from this composition.
As you can see I’ve added the copyright to this photo using the LEGEND tag. At the same time the FIELDSET is used to add the border around the picture to give it an effect similar to polaroid picture. I’ve used the same spacing, but in order to achieve a polaroid effect you will have to set a bigger value for the bottom padding.
3. Wrapper for Forms
For the forms this approach is the default one. This was the main purpose for FIELDSET and LEGEND. When you have labels and inputs that share a common goal or feature, you can wrap them in order to make your form elements more accessible.
Conclusion
The main idea with this article is that with creativity, simple and relatively dedicated HTML elements can be used in styling a website, or some elements from a website. I don’t know what do you think about FIELDSET and LEGEND, but I think there are great HTML tags for web designers. With the proper CSS code that will follow your design guidelines, these tags can be really helpful. Cheers!
Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!24 Responses to “FIELDSET and LEGEND Tags in Web Design”
Trackbacks/Pingbacks
Additional comments powered by BackType
fieldset and legend is only for form not others
I disagree. I think those tags can be useful in the design process.
fieldset and legend are only for forms
use them outside forms is against web standards.
see: http://www.w3schools.com/TAGS/tag_fieldset.asp
and http://www.w3schools.com/TAGS/tag_legend.asp
I agree with jitendra, introducing fieldset and legend as design elements is like using tables for layout.
I agree that it was created for the forms but as it says in the definition is is for grouping and making form elements accessible. Why can’t that work in terms of design? It is XHTML compliant.
@Andy Why can’t tables works in terms of design? It’s XHTML compliant, too. It’s all about semantics: Besides being a placeholder for text, tags also have a meaning, and a fieldset is a group of fields in a form.
Chris, I understand where you are going and you are right. In this article I’ve just presented the Fieldset and Legend in an alternative way. The way has its drawbacks as you’ve said and capabilities on design side.
Fieldset and Legend are form only, as has been said. This is like saying that the small tag can be used to define paragraphs. Yeah, it could, or you could do it the right way.
Is it too much to ask to see this from the design perspective ?
Andy, i appreciate what you have attempted to do here however i must concur with the majority of the commenters here. What it comes down to here is it is just poor design. Design (especially design for the web) is more than simply making things look nice. In web design you must also take into account usability and accessibility. XHTML is a toolbox, each tool has a specific function. Would you use a hammer to tighten a screw? Essentially using semantic tags like these for purposes they weren’t intended is like putting a restroom sign on the broom closet door.
I understand you’ve found an easy way to create some interesting effects, i think it’s rather inventive of you. The fact of the matter is there are better, more semantic ways to do the same thing while remaining standards compliant and not confusing your disabled visitors.
Seriously?
Your only good example is #3… as all the others have said, you must use fieldsets so that it includes at least one form element.
These HTML tags were created to represent their content. You can’t use LI’s for anything that ain’t a list of some sort, you can’t use table for anything else than displaying organized data, then why would it suddenly be fine to use fieldsets as a wrapper for content just because the default style looks nice?
That default style is way too often more constraining than anything else. Legends are so hard to style for every browser. Usually I need a span in the legend to be able to style it as I see fit… fieldsets have a default 1px border in IE7 and Opera.
If you like the style, just use a div with a heading and position it correctly in CSS. HTML’s purpose is purely semantic, you should be able to disable CSS and still be able to use a website.
In conclusion, just use the right elements for your content (lists, tables, definition lists, etc.) or create your own styled wrappers to accomplish if your content doesn’t fit in any of HTML’s tag (such as layout divs.)
The post says nothing about semantics and standards. It is just a simple idea. Yes is not according to W3C specs and yes it is was not meant for this purpose. All I was showcasing is an alternative to their main use. I’m not saying that you should use this or that.
I agree with all of you because the comments are regarding semantics, standards and the way things should be. But that wasn’t the point of the article.
People are seeing it from a design perspective. Design and structure (be it the site structure or the underlying code) are intertwined, so you should not discuss one without thinking about the other.
So when people mention that what you are suggesting here with Fieldset and Legend isn’t semantic, they are talking very much from a design perspective, just not the “visual” part, if you will.
I agree, those tags are only for forms. Any other use is not semantic and goes against web standards guidelines.
Bunchasheeps! Could someone then please, for crissakes, post a code that will output the same visual structure with less markup?!
less markup?
[code]
Title
blah blah..image and all
[/code]
and use negative top or bottom (respectively) margin on one of the classes.
What is next? Using read-only form fields because they make a ‘cool looking box’?
On the other hand Andy deserves some credit for the article for pointing out the visuals effect of it. Only it should have been geared towards ‘form design’ more so than ‘layout design’.
All the best!
WP ate my snip…2nd try
Title
blah blah..image and all
I am trying to redesign one of my forms using CSS rather than tables. I am trying to utilize FIELDSET, LEGEND, and LABEL tags as well as CSS. My CSS skills are average at best and FIELDSET, LEGEND, and LABEL tags are somewhat new to me as well. The form I am redesigning looks great in tables but I’m starting it off now with very little style and just trying to get things to line up and put it together from the beginning using some best practices. Basically just getting it to work before we make it look pretty.
If I can see how the *correct* way of putting this type of form together I will learn from it and be able to move on in the future making forms in this way. However things that seemed easy in tables are having me pull my hair out now.
Yes, this thought that everything HAVE to bee CSS web20 based is a flop. Just like that everything must be .NET, php, MySQL etc. based.
Old saying says “Keep it simple”.. or we just say “Keep IT simple”… and keep in mind “Build for purpose!”
Its a missunderstanding that the fieldset/legend can or should NOT be used for other functions than in forms.
The only purpose for the fieldset/legend tags is to define “somthing” inside it. So if its a formfield, text, an image etc. it does not “harm” the validity of the code.
As long as you can; Somethinglorem ipsum
There are NO arguments that say you can NOT;
As long as you can; Somethinglorem ipsum
I use fieldset/legend to just as many none form stuff as for forms. And I will continue to…
/T-S
Communications & Control Systems Specialist
@T-S My man! I was surprised to see so many “design nazis” here bashing a genuine author of this article. And regarding the fieldset, yes I use it in my website design to show a report. Multiple reports in multiple fieldsets and the report heading in the legend. Of course the report is read only.
Ouch – lively conversation. Lots of people have already said “its against W3C standards” and the response is “so.. its still good”. What seems to be missing is ‘why standards are good’.
The usual suspects are:
1) there are lots of people that rely on screen readers, using fieldset/legend this way is going to be REALLY frustrating for them… and before anyone comes back with ‘but this is from a design perspective’ what you mean is a ‘VISUAL’ design perspective – someone using a screen reader will tell you that ‘your design’ sucks as they ‘aurally experience’ your design. (Spring’ed: be careful throwing the term ‘design nazi’ around I think the visually impaired have much greater claim on that term for your approach which essentially says [in best German accent] “you are inferior as you are unable to see our master design, we shall make you suffer bad UX”)
2) If your doing this commercially they be aware that making accessible websites is law and at some point somebody’s going to come along and start dishing out fines for not complying – just like not having a ramp instead as well as stairs. At that point you’re going to look pretty silly as a professional.
If either of these doesn’t convince you then hopefully the following will.
Back in the good ‘ol days we had to use tables for layout – tables weren’t intended for this, but we didn’t have a proper set of tools for the job and browsers couldn’t agree how to implement them.
Now if you want to go down the route of “this isn’t what the standards say and it wasn’t meant to do this, but hell I can, so I will” then you’re thinking along the lines that Microsoft and Netscape did during the Browser wars – where each decided what tags they wanted to support and how to support them.
Standards are our friends – they’ve helped us come a long way from bloated browser sniffers, alternate versions of sites for different browsers, horrible hacks, etc.
Sneer in the face of them and you will have nobody to blame when Microsoft turns back around and says ‘to hell with this, we’ll just do what we want then’ (and if you think there’s no chance of that then you only have to look at Outlook 2003 which can only use Word’s hideous HTML rendering engine, essentially making CSS impossible and setting html email design back about 5 years)
If you’re still not convinced then look up and get a copy of Jeffery Zeldman’s “Designing With Web Standards” – he’s more convincing than me to be fair.
Oh forgot to add:
T-S – “read” W3C specifications before you preach.
http://www.w3.org/TR/html401/interact/forms.html (it’s in the FORMs section, there’s a clue!)
“An HTML form is a section of a document containing normal content, markup, SPECIAL ELEMENTS CALLED CONTROLS (checkboxes, radio buttons, menus, etc.)
…
Adding structure to forms: the FIELDSET and LEGEND elements
The FIELDSET element 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.
The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.”
Pretty damn clear to me – they’re for FORM elements ONLY.
“build for purpose… use the material for the purpose it was intended”