FPettit.com

Tech, Life, & Stuff…

FPettit.com header image 2

The HTML Fieldset

July 29th, 2008 by Franklin Pettit · Comments


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:

Text In Fieldset Example 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.

Links & Related Posts:

Tags: HTML

  • July 29, 2008 at 7:40 pm martin english
    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
  • July 29, 2008 at 7:45 pm Mark Trapp
    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.
  • July 29, 2008 at 7:45 pm Mark Trapp
    The bonus of the method I described is that it works in all browsers.

Add a comment on FriendFeed




Viewing 2 Comments

 
close Reblog this comment
blog comments powered by Disqus