An Advanced Look For Your Forms

 

The <fieldset> and </fieldset> tags will form a "box" around whatever you place within them. This tag is mainly used to define a group of "form" items. For example: A form where you would input the User Name and Password might have a fieldset box around it to set it off from the rest of the form.

Along with the <fieldset> set of tags there should always be a <legend> and </legend> set of tags. The "legend" tags will place some text (or a caption) within the "fieldset" box.

Note: The closing </fieldset> and </legend> tag is required for both <fieldset> and <legend> tags.

Here is an example of a <fieldset> box with a <legend> caption within the "fieldset" box. I will add some regular text inside the "fieldset" box so you will get the idea of what we are doing here.

This Is Cool Draac This is some text inside the "fieldset" box. Notice the caption (legend) "This Is Cool Draac" within the fieldset box.

Below is the coding for the above "fieldset and legend" example.

<fieldset>
<legend>This Is Cool Draac</legend>
<font size="2" face="verdana" color="#c51878"><b>
This is some text inside the "fieldset" box. Notice the caption (legend) "This Is Cool Draac" within the fieldset box.
</b></font>
</fieldset>

Now lets try a "fieldset" and "legend" with a simple form. I will create the "fieldset" around a form to input a User Name and Password. I will use the text "Log In" as the "legend".

Note: This is a non working sample form.

Log In
User Name:
Password:

Below is the coding for the above "fieldset and legend" example.

<fieldset>
<legend>Log In</legend>
<table cellspacing="0" cellpadding="10" border="0">
<tr><td align="center" valign="middle">
<form>
<font size="2" color="#0000cd" face="verdana"><b>
User Name:
</b></font>
</td><td align="center" valign="middle">
<input type="text" width="20">
<tr><td align="center" valign="middle">
<font size="2" color="#0000cd" face="verdana"><b>
Password:
</b></font>
</td><td align="center" valign="middle">
<input type="password" width="20">
</td></tr>
<tr><td align="center" valign="middle" colspan="2">
<input type="submit" value="Submit">
</form>
</td></tr></table>
</fieldset>

Above is a very basic example of a "fieldset" and "legend". Below is the same example with some CSS coding added to control it's size and how it looks. I think the CSS coding adds a lot to the "fieldset" and "legend" tags.

Note: This is a non working sample form.

Log In
User Name:
Password:

Below is the coding for the above "fieldset and legend" example with some CSS coding added to the <fieldset> and <legend> tags.

<fieldset style="border: 8px ridge #ff00ff; color: #ffffff; width: 300px;">
<legend style="color: #ff0000; font-family: verdana; font-size: 14pt;">Log In</legend>
<table cellspacing="0" cellpadding="10" border="0">
<tr><td align="center" valign="middle">
<form>
<font size="2" color="#ff0000" face="verdana"><b>
User Name:
</b></font>
</td><td align="center" valign="middle">
<input type="text" width="20" style="border:2px dashed #ff0000; background-color: #ffff00; color: #ff0000; font-weight: bold; font-size: 10pt;">
<tr><td align="center" valign="middle">
<font size="2" color="#ff0000" face="verdana"><b>
Password:
</b></font>
</td><td align="center" valign="middle">
<input type="password" width="20" style="border:2px dashed #ff0000; background-color: #ffff00; color: #ff0000; font-weight: bold; font-size: 10pt;">
</td></tr>
<tr><td align="center" valign="middle" colspan="2">
<input type="submit" value="Submit" style="background-color: #ff0000; color: #ffffff; font-weight: bold; font-size: 10pt; font-family: verdana;">
</form>
</td></tr></table>
</fieldset>