Fieldsets and Legends

Use these to jump around or read it all…

[The Tags]
[Use A Table Too]

There are a lot of commands that are proprietary to Internet Explorer. The two I’ll discuss here fall under that umbrella. But, unlike many of those proprietary commands, these, because of placement, are basically ignored by Netscape browsers. They are what I call “ignored” commands. On one browser they do a trick, on the other they do nothing, but also don’t hurt anything either. The two commands in this tutorial are both ignored commands.

Here’s an example of what the FIELDSET and LEGEND tags do. Look at this basic form:

---

Name:

Email:

Favorite Color
Red:
Blue:
Green:

Favorite Toothpaste:
Crest:
Close-Up:
Gleem:

---

There’s not much design to it. It’s basic and does the trick. Many people have tried to design their forms by putting them into table cells and putting the cells into an order so that their forms have a nicer look to them.
That works fine in Internet Explorer, but certain versions of Netscape don’t quite render the table and form correctly because the browser sees tables as individual elements rather than a whole. The use of a table separates the elements. That’s not good. Some Netscape browsers tended to mess up the form’s output if not ignore certain sections altogether because of the table setting.

Now…here’s the same form as above using the commands we’ll hit today.

---

Step One: Personal Information Name: Email: Step Two: Favorites Favorite Color: Red: Blue: Green: Favorite Toothpaste: Crest: Close-Up: Gleem: Step Three: Send it

---

The Tags

Take a good long look at the form above. You should be able to get it, and this text, on your screen at the same time. Notice that I grouped elements together by drawing a lined box around them. Remember that you can place as many form elements inside the lined box you want. The elements will react to HTML just like they always did, it’s just that you’ve drawn a line around them.

In addition to the line, I’ve added a title in bold. The title text is placed in the upper left hand of the lined box by default. I used <B> tags to make the text bold. Now the tags:

<FIELDSET> drew the lined box. <LEGEND> set the title.

You can pretty much take it from here, but let’s take a look at the code that created the first little section that surrounds the two text boxes:

<FIELDSET>

<LEGEND><b>Step One: Personal Information</b></LEGEND>

Name: <INPUT TYPE=”text” SIZE=”20″>

Email: <INPUT TYPE=”text” SIZE=”20″>

</FIELDSET>

<FIELDSET> draws the lined box. <LEGEND> sets the title.

Follow that pattern again and again grouping form elements as you wish. No sweat.

---

Use A Table Too

I know this reads like it is in direct contradiction to what I wrote about tables and forms up above, but hear me out. Notice how the FIELDSET table is confined to only 375 pixels wide. It is that way because I surrounded the entire form with a single table cell with the width set to 375. Please note that I said a single table cell. That’s the key.

It was done purely for aesthetics. If you don’t surround the form with a table cell, the lined box runs the length of the browser screen. If there’s a way to stop the box from doing that without using a table cell, I couldn’t find it. Even examples on the MSIE site showed a table being used to confine the width of the box.
My reference book suggests that the attributes ALIGN and WIDTH work with the FIELDSET tag. I tried to get them to work time and time again. No dice.

Maybe you’ll have more luck. Enjoy the commands.

[The Tags]
[Use A Table Too]