The HTML Fieldset
This is just a quick post about something I learned the other day. Do you learn everyday on the internet? I do. I thought I would share something very simple that some bloggers might want to use.
What is an HTML fieldset and why would you want to know? W3schools defines a the fieldset element as follows:
“The fieldset element draws a box around its containing elements.”
This is a fieldset:
What is good for? Does it kind of look like a VB frame? Possible uses could be as a text accent, a text format, or most commonly at the bottom of a blog post for related items. Many bloggers use plugins to generate a list of related posts.
The code for the fieldset is simple. Here is the code for the example above:
<fieldset>
<legend>Example Fieldset:</legend>
Text in Fieldset
</fieldset>
See I told you it was simple. Now fieldsets like almost any piece of HTML can be formatted with CSS. You can format the box any way you like. But I will not discuss that here. Let’s keep it simple.
If you want to add a box at the bottom of your post a list of links the Fieldset should do the trick.
-
Victoria Petersen
-
Franklin
-
Website Monitoring
On FriendFeed, this post was liked by 4 people and commented on 3 times hide-
The trap of a multi-browser web :) Despite most references claiming it works in IE6, I have not been able to get it to work in as simply as you've defined in your post. See http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie for some solutions
-
Martin: you can accomplish the same thing (albeit not semantically, but that's a lost pipe dream anyway) using divs. put a div around what you'd normally put a fieldset on, and give it a border via CSS. If you want a legend, create a div or another block element (maybe an h1/h2/h3/h4/etc.) with the legend at the top of the container, and give that div a negative margin-top via CSS. Fieldsets were only meant for grouping radio and checkbox items in a form; otherwise, you should be using CSS to present.
-
The bonus of the method I described is that it works in all browsers.
About Franklin
I coined this blog "Tech, Life, & Stuff" for lack of a better description. This blog is primarily about my view on tech from South Carolina. I am a South Carolina software developer. More> 