Tables are an excellent way of postioning text and images on a page. I've used a centered 80% table on this page to give it margins and make reading the text easier. Normally I would turn the table border completely off, but I've left it on in this case so you can see the structure.

Forms are a way of collecting information from your visitor and passing it to cgi programs on your server, or having it e-mailed to you. Most ISP's that provide you with web space will have at least a few preset cgi's for you to use, including a simple mailer.

All forms start out the same way, with a <FORM> tag. <FORM> is a container tag, requiring the closing </FORM> tag, can contain other tags, and requires the following attributes.

ACTION

This defines the cgi program that will process the form.

METHOD

This defines the procedure for passing the information to the program specified in ACTION.

Your ISP or other web space provider will tell you what the values for ACTION and METHOD should be, but usually it looks something like this:

In this case it's telling the browser that the form data should be sent to the "formail.cgi" program on the ISP server, which will then e-mail the information to you.

There are three basic tags for creating form elements, INPUT, SELECT and TEXTAREA.

The INPUT tag and its possible attributes.

<INPUT> is not a container tag, does not require a closing tag, cannot contain any other tags, and can take the following attributes.

• TYPE
• NAME
• VALUE
• CHECKED
• SIZE
• MAXLENGTH
• HIDDEN

The TYPE attribute and its possible values.

There are six allowed values for TYPE. All of them except for the SUBMIT and RESET buttons require the additonal NAME attribute.

RADIO

Creates radio buttons. Radio buttons that have the same NAME are grouped together, and only one out of the group may be selected at a time. Can also take the optional CHECKED attribute, which has no value but simply makes that particular button the one that is selected when the form loads. Only one button in a NAME group may have the CHECKED attribute.

Use this when you want to give the viewer a limited number of mutually exclusive choices.

CHECKBOX

Creates checkboxes. Checkboxes that have the same NAME are grouped together, and as many as the viewer wants can be selected at the same time. Can also take the optional CHECKED attribute, which has no value but simply makes that particular checkbox appear selected when the form loads. You may set as many checkboxes as you like in a NAME group as CHECKED.

TEXT

Creates a simple text field. Requires the NAME attribute, and can take the additional optional attributes of SIZE and/or MAXLENGTH.

PASSWORD

Exactly the same as a TEXT field, except that the viewer will see asterisks (*) in place of what they type. Requires the NAME attribute, and can take SIZE and/or MAXLENGTH.

SUBMIT

A predefined button that tells the browser the viewer is done with the form and is ready to send it in. Can take the optional VALUE attribute, which changes the text on the button.

RESET

Like SUBMIT, this creates the Reset button that tells the browser to clear all the fields in the form. Can also take the optional VALUE attribute which changed the text on the button.

HIDDEN

Values for HIDDEN type input are things that are passed to the cgi program that tell it what to do with the data. Your ISP will tell you what values are allowed for their particular cgi's, but they usually include the e-mail address you want the data sent to, a text string to put in the Subject field of the e-mail and often the URL of a page the browser should load once the form has been submitted. Consult your ISP for specifics.

The NAME attribute and its possible values.

The NAME attribute takes any text contained within quotation marks as its value and is used to group radio buttons or checkboxes, and to identify the contents of text fields to the cgi program. The NAME may be up to 255 characters, including numbers, letters and punctuation. Spaces are not allowed, and you should not use the question mark (?), ampersand (&), either back- or forward-slashes (/ \), the caret (^), the equals sign (=) or at symbol (@), as these all have special meanings in the most commonly used CGI scripting languages. The only FORM elements that do *not* require a NAME attribute are the SUBMIT and RESET types of INPUT, and the OPTIONs within a set of SELECT tags.

The VALUE attribute and its possible values.

The VALUE attribute takes any text contained within quotation marks as its value and is used to define the individual radio buttons and check boxes. The contents of VALUE may be unlimited in length, and may contain any letter, number, punctuation mark or special character. VALUE is required for radio buttons and checkboxes, and may optionally be used with TEXT and PASSWORD. When used with TEXT or PASSWORD, the value of VALUE is what will appear in the field when the form is first loaded, but may be typed over by the viewer.

Do you have pets?
Yep
Nope

In this example, the radio buttons are grouped together by the shared NAME="pets", so you can choose one or the other but not both. The first button has a VALUE of "yes", and the second is "no". The e-mail cgi program would tell you which one the viewer had checked. Notice that the value of VALUE has no relation to the text printed next to each button. "Yep" and "Nope" are plain old text used to identify the buttons to the viewer and can be anything you want them to be, including other HTML elements or even graphics.

The CHECKED attribute and when to use it.

The CHECKED attribute doesn't have a value, it is used to set which radio button, checkbox or selection option is checked when the form is first loaded. The selection can be changed by the viewer.

In this example, say we're building a website about cats. You want to ask your viewers if they have pets, and if so, what kind. Since the site is about cats, it's reasonable to assume that most visitors will already have one (or more). The checkboxes are grouped together by the shared NAME="whatpets", and each is given its own unique VALUE so when the cgi sends you the data you can tell which ones the visitor checked.

The SIZE and MAXLENGTH attributes.

SIZE defines the visible size of the field. If all you need is a single line field, the value of SIZE is the number of characters wide you wish it to be. If you want more than one line, the value is "C,L" where C is the number of character wide and L is the number of lines high.

MAXLENGTH. Size only set the *visible* size of the field, the value of MAXLENGTH sets the maximum number of characters that may be entered.

The SELECT tag and its possible attributes.

<SELECT> is like the list tags in structure. It creates a list of possible options for the viewer to choose from and puts them into a drop-down box. It is a container tag, requiring a closing tag and can take the following attributes:

• NAME
• SIZE
• MULTIPLE

Within the <SELECT> opening and closing tags are <OPTION> tags to define the individual items that may be selected. Like the <LI> tags that go with <UL> and <OL>, the <OPTION> tag is itself a container tag, and although the closing tag is not required, using it is a good habit to get into. <OPTION> can take the following attributes:

• SELECTED
• DISABLED
• VALUE

What's your favorite food?
Chinese Russian Mexican Burgers Pizza Korean Thai Seafood French Homestyle British Japanese Nouvelle None Snakes Kibble Soylent Green

Attributes to the
<SELECT> tag.

NAME is whatever you choose to name the list, and identifies it to the cgi program.

MULTIPLE doesn't get a value, including it in the tag tells the browser that the viewer is allowed to choose more than one option at the same time.

SIZE is used to specify how many lines high the box will be when the form first loads. If you allow MULTIPLE, the box will expand to show all available choices unless you specify a SIZE. When you don't include MULTIPLE, the box will be a drop down type unless you specify SIZE. Notice the difference in these two examples. While the height of the box is set by SIZE, the width is determined by the width of the longest option text, in this case "Soylent Green".

Attributes to the
<OPTION> tag.

SELECTED, like the CHECKED attribute for INPUT, specifies that a particular OPTION will be selected when the form first loads. Can be changed by the viewer.

DISABLED is one I've never actually had occasion to use. It disables an option from being selected, and may come in handy if you get into JavaScript.

VALUE is the same as VALUE for radio buttons or checkboxes, but is not required. If you don't include it, the value of the option is taken from the text following the <OPTION> tag. This is what the cgi program will use to identify which option is selected by the viewer.

The TEXTAREA tag and its possible attributes.

<TEXTAREA> is basically a big version of the TEXT type INPUT. It is a container tag, requiring both opening and closing tags, cannot contain any other tags, and takes the following attributes.

• NAME
• COLS
• ROWS

One oddity about the TEXTAREA tag is that If you put any text in between the opening and closing TEXTAREA tags, it shows up in the box when the form is first loaded. This can be left alone or typed over by the visitor. It shows up exactly as typed into the source code, with all line breaks and spacing preserved, and any HTML tags will be ignored. The box will automatically generate scroll bars if they are needed.

Attributes to the
<TEXTAREA> tag.

NAME is how the TEXTAREA is identified to the cgi program, and takes any text value.

COLS is the width of the box, and is expressed in number of characters, not pixels like image or table widths. It cannot be expressed as a percentage of the window width.

ROWS is the height of the box, and is expressed in number of lines, not pixels.