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!
19 Comments »
RSS feed for comments. TrackBack URL
[...] Here is the original [...]
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.
[...] FIELDSET and LEGEND Tags in Web Design [...]
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