Form Elements

FORM

FORM has some special rules. INPUT, SELECT and TEXTAREA must all occur within FORM. All other block level elements, text level elements, links, images, and comments may also occur in FORM. However, FORMs cannot be nested; that is, <FORM> ... <FORM> ... </FORM> ... </FORM> would be wrong and inoperable.

Also, INPUT, SELECT and TEXTAREA all take the attribute NAME. Be sure to use different values of NAME throughout your entire form. We'll find out more about NAME at each element's description below.

Form has two attributes and we will be using the same values for all of our forms.

ACTION="http://www.madison.k12.wi.us/formtomail.cgi"

This tells the browser where to send the form's information once the reader selects the "Submit" button. formtomail.cgi is a freeware script that our server uses to format the information and e-mail to the address supplied by the form. (We'll get to all that in An Example Form and Its HTML.)

METHOD="POST"

This is the method used by the browser to interact with the server. There is also METHOD="GET", but for our formtomail script, the browser needs to use the POST method.

So, every form on one of our pages would start out like:

<FORM ACTION="http://www.madison.k12.wi.us/formtomail.cgi" METHOD="POST">

</FORM>

Return to the Top

INPUT

INPUT has an attribute, called TYPE, which can take one of eight values. These values are TEXT, PASSWORD, RADIO, CHECKBOX, SUBMIT, IMAGE, RESET and HIDDEN. What other attributes of INPUT you can use, and their meanings, depends on which TYPE you're using. So, we'll take each TYPE separately, except TEXT and PASSWORD, which are almost identical. Input is an empty element, so there is no </INPUT>. Also, all attributes of INPUT, except TYPE and NAME, are optional.

• TYPE="TEXT" and TYPE="PASSWORD"
• TYPE="RADIO"
• TYPE="CHECKBOX"
• TYPE="SUBMIT"
• TYPE="IMAGE"
• TYPE="RESET"
• TYPE="HIDDEN"

TEXT and PASSWORD

This is the often-seen, single line text entry box.
<INPUT TYPE="TEXT" NAME="name of field" VALUE="initial value" SIZE="n" MAXLENGTH=n>
<INPUT TYPE="PASSWORD" NAME="name of field" VALUE="initial value" SIZE="n" MAXLENGTH=n>

NAME="name of field"

When you receive a form, the format of the response will be "name of field = value"

VALUE="initial value"

You can give a field an initial value; that is, the field will already be filled in when the reader loads the page or when RESET is selected. This will be replaced by anything the reader enters. It can be left blank, i.e. VALUE="".

SIZE="n"

This suggests the number of characters wide you'd like the field to be. However, it's only a guess, since you don't know what font the reader will be using.

MAXLENGTH="n"

You can limit the reader to only n number of characters. If no MAXLENGTH is set, the text will scroll to the left so the user can type in more info, if needed.

Example:
<INPUT TYPE="TEXT" NAME="text example" VALUE="Hi there!" SIZE="20">

Result mailed to you: text example = Hi there! (Unless the user types in another value.)

The only difference with PASSWORD as the TYPE is that the characters in the field will be replaced with asterisks (*). However, that does not mean the data is encrypted; it's just not viewable on the screen.

Return to INPUT
Return to the Top

RADIO

Radio buttons allow you to only choose one option out of several. Note that all choices in one set of radio buttons have the same value for the NAME attribute.

<INPUT TYPE="RADIO" NAME="set of buttons" VALUE="Choice1" CHECKED>
<INPUT TYPE="RADIO" NAME="set of buttons" VALUE="Choice2" CHECKED>

NAME="set of buttons"

This is the name of the set of buttons, so the browser knows which buttons go together. Radio buttons create a set of exclusive choices. This means that only one item can be chosen from the set.

VALUE="value of that button"

This is where you indicate what that particular button represents.

CHECKED

This attribute makes one of the buttons already "picked" when the reader first loads the form, or when RESET is selected. Only one item in a set can have this attribute.

Example:
<INPUT TYPE="RADIO" NAME="radio example" VALUE="yes" CHECKED> Yes<BR>
<INPUT TYPE="RADIO" NAME="radio example" VALUE="no"> No
Yes
No
Result mailed to you: "radio example = yes"

Return to INPUT
Return to the Top

CHECKBOX

Checkboxes allow you to choose many options out of several. Note that these choices are not grouped together, and therefore require different names.

NAME="name of each checkbox"

This is an inclusive list of choices; in other words, more than one choice can be selected. Therefore, each CHECKBOX needs a unique NAME.

VALUE="value of each checkbox"

This is the value the checkbox will return if it is checked.

CHECKED

This checks one or more boxes when the form is loaded or if RESET is selected.

Example:

<P>I like:<BR>
<INPUT TYPE="CHECKBOX" NAME="I like 1)" VALUE="german shepherd" CHECKED> German Shepherds<BR>
<INPUT TYPE="CHECKBOX" NAME="I like 2)" VALUE="collie"> Collies<BR>
<INPUT TYPE="CHECKBOX" NAME="I like 3)" VALUE="poodle" CHECKED> Poodles</P>

I like:
German Shepherds
Collies
Poodles

Result mailed to you:
I like 1) = german shepherd
I like 3) = poodle

Return to INPUT
Return to the Top

SUBMIT

SUBMIT sends the form to the server to be processed. In our case, the script formtomail.cgi takes the raw data and formats it into a human-readable e-mail, which it then sends to the address in the HIDDEN "to" field.

<INPUT TYPE="SUBMIT" VALUE="Text on Button">

VALUE="Text"

This is the text which will appear on the button. If you don't use the attribute VALUE, the button will appear with some default text (usually "Submit" or "Submit the Query").

Example:
<INPUT TYPE="SUBMIT" VALUE="Send It In!">

Return to INPUT
Return to the Top

IMAGE

IMAGE has the same function as SUBMIT, except that an image you define is used instead of a button. The image can also be aligned, which we describe at Aligning Images With Text.

<INPUT TYPE="IMAGE" SRC="URL of image" ALIGN="DIRECTION">

SRC="URL of image"

This tells the browser where the image is. You can review URLs if necessary.

ALIGN="TOP", "BOTTOM", "MIDDLE", "LEFT" or "RIGHT"

This aligns the image with any text that may be around.

Note: <INPUT TYPE=IMAGE> does not take the ALT attribute or the BORDER attribute. Readers with non-graphical browsers will see "Submit"; however, visitors with graphical browsers but with images turned off will only see a "broken image" icon.

Example:
<P>Click on my friends to send in the form!
<INPUT TYPE="IMAGE" SRC="hippob.gif" ALIGN="MIDDLE"></P>
Click on my friends to send in the form!

Return to INPUT
Return to the Top

RESET

RESET clears all of the user's input and resets the fields to their initial values, i.e. blank or any values you defined using VALUE attributes.

<INPUT TYPE="RESET" VALUE="Text on Button">

VALUE="Text on Button"

This is what will appear on the reset button, e.g. "Clear the Form". If you leave out the VALUE attribute or its value, the button will be labeled "Reset".

Example:
<INPUT TYPE="RESET" VALUE="Erase My Entries">

Return to INPUT
Return to the Top

HIDDEN

Hidden produces a field that the user can't see, but can hold useful information that the user shouldn't or doesn't need to change. Most hidden fields hold special information a script needs in order to process a form. For example, the hidden field "to" we use with formtomail.cgi passes on the address to which the script will send an email.

<INPUT TYPE="HIDDEN" NAME="Name of field" VALUE="Value to pass on">

NAME="Name of field"

The name of the field. This might be a special name, like "to" or "nexturl" that is needed by the processing script. We cover this in An Example Form and Its HTML

VALUE="Value to pass on"

This is the value that is either passed on to you, or in the case of a special field, the value is used by the script to perform a certain function.

Examples:
<INPUT TYPE="HIDDEN" NAME="to" VALUE="juser@madison.k12.wi.us">
[Hidden field is invisible]
Result: Value of "to" field is used to send formatted form data to juser@madison.k12.wi.us

<INPUT TYPE="HIDDEN" NAME="Date Created" VALUE="1999-03-29">
[Hidden field is invisible]
Result mailed to you: "Date Created = 1999-03-29"

Return to INPUT
Return to the Top

SELECT

SELECT works with OPTION to make drop-down lists (or pop-up menus, depending on your outlook). Here is a basic example:

<SELECT NAME="name of list" SIZE="n" MULTIPLE>
<OPTION SELECTED>Item 1</OPTION>
<OPTION SELECTED>Item 2</OPTION>
<OPTION SELECTED>Item 3</OPTION>
</SELECT>

NAME="name of list"

The unique name of this list, to separate it from other lists.

SIZE="n"

This is an optional attribute, where 'n' is the number of items that will be visible at once. Without it, one item will be visible.

MULTIPLE

This optional attribute determines if the reader can pick more than one item from the list at one time. Without MULTIPLE, the reader can only pick one. With it, the reader can pick as many as he or she wants.

SELECTED

This is an optional attribute of OPTION that will mark the item as selected when the form is loaded or when RESET is selected. If you use MULTIPLE in SELECT, you can use SELECTED in more than one OPTION.

Examples:

<SELECT NAME="Facial Tissues">
<OPTION>Kleenex</OPTION>
<OPTION>Puffs</OPTION>
<OPTION>Scotties</OPTION>
</SELECT>

<SELECT NAME="Facial Tissues" SIZE="2">
<OPTION>Kleenex</OPTION>
<OPTION>Puffs</OPTION>
<OPTION>Scotties</OPTION>
</SELECT>

<SELECT NAME="Facial Tissues" SIZE="3" MULTIPLE>
<OPTION>Kleenex</OPTION>
<OPTION SELECTED>Puffs</OPTION>
<OPTION>Scotties</OPTION>
</SELECT>

Return to the Top

TEXTAREA

Textarea defines an area in which people can write, write, write.

<TEXTAREA NAME="Unique name of this textarea" ROWS="n" COLS="n" WRAP="HARD"></TEXTAREA>

NAME="Unique name of the textarea"

ROWS="n"

This sets how many lines of text the textarea will appear (readers can type in more lines, they'll just scroll down)

COLS="n"

This sets, approximately, how many characters wide the textarea will appear. Again, readers can type to the right further, or hit "Return" to move to the next line.

WRAP="HARD"

This is not standard HTML. Therefore its performance is unpredictable. In some browsers, this causes text to wrap (go to the next line) when the reader gets to the right edge of the textarea. It shouldn't ruin the results of the form when used on a browser that doesn't recognize WRAP="HARD", but this is not guaranteed.

Notice that there is no value option. If you would like something to appear in your textarea initially, you would put it between the <TEXTAREA> and </TEXTAREA> tags. Otherwise, the tags should be right next to each other.

Example:
<P>Comments:<BR>
<TEXTAREA NAME="comments" ROWS="5" COLS="40" WRAP="HARD">None.</TEXTAREA></P>

Comments:
None.