Forms

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
         How forms are sent
         Input field
         Buttons
         Input types
         Fieldset
         For more help...
         You try it
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

There is one more really useful thing you can do with forms. You can put a border around sections of your form to make it easier to read. This tag is known as "fieldset" and can make your form more attractive.

If you want to use this, in between the <form> tags and around the area you'd like fenced in. Here's the code for that bordered area:

Here's what that kind of a form looks like:

Code
<form> <fieldset> <input type="text" size="15">Name<br> <input type="text" size="15">Age </fieldset> <fieldset> <input type="checkbox" name="pet" value="dog">Dog<br> <input type="checkbox" name="pet" value="cat">Cat<br> <input type="checkbox" name="pet" value="fish">Fish<br> </fieldset> </form>

What you see
Name Age Dog Cat Fish

Notice how the different parts of the form have a border around them? This is known as the field. There is one more thing you can do with the fieldset.

Legend
You can actually put words within a form border. This is called the legend. The legend tag goes withing the fieldset tags and it MUST have a closing tag. Here's an example:

<fieldset>
<legend>Title here</legend>
Your form info
</fieldset>

Here is the form from above complete with legends:

Code
<form> <fieldset> <legend>Personal Info</legend> <input type="text" size="15">Name<br> <input type="text" size="15">Age </fieldset> <fieldset> <legend>Pick a pet</legend> <input type="checkbox" name="pet" value="dog">Dog<br> <input type="checkbox" name="pet" value="cat">Cat<br> <input type="checkbox" name="pet" value="fish">Fish<br> </fieldset> </form>

What you see
Personal Info Name Age Pick a Pet Dog Cat Fish

This legend can also be aligned to the left, center, or right. One more time, here's the form, but this time the first legend is centered and the last one is aligned right. If this doesn't work, you might be on a computer that doesn't support this tag.

Code
<form> <fieldset> <legend ALIGN=CENTER>Personal Info</legend> <input type="text" size="15">Name<br> <input type="text" size="15">Age </fieldset> <fieldset> <legend ALIGN=RIGHT>Pick a pet</legend> <input type="checkbox" name="pet" value="dog">Dog<br> <input type="checkbox" name="pet" value="cat">Cat<br> <input type="checkbox" name="pet" value="fish">Fish<br> </fieldset> </form>

What you see
Personal Info Name Age Pick a Pet Dog Cat Fish