by Jim O'Donnell
Forms are one of the most popular features on the World Wide Web. They enable users to interact with the text and graphics that are displayed on your machine. You can make forms with simple yes or no questions, you can make highly complex order forms, or you can make a form for people to send you comments.
You create forms by providing a number of fields in which a user can enter information or choose an option. Then, when the user submits the form, the information is returned to a script. A script is a short program that is written specifically for each form. You can create them to do any number of things.
In this chapter, you learn about the following:
HTML forms give the Web author the opportunity to solicit input from people reading his Web pages. Just as HTML provides many mechanisms for outputting information, the use of HTML forms enables information input. These forms can be used to solicit free-form text information, get answers to yes or no questions, and get answers from a set of options.
Forms can be used in Web pages for many different reasons. They can be used for something as simple as allowing visitors to your home page to sign a guest book or comment about your pages. Forms input can be used to create and maintain a discussion group over the Web. When combined with a secure method of transmission, forms can be used to conduct business over the Web. These, and many other uses can be achieved with HTML forms.
The HTML tags you use to display forms are straightforward. There are three types of tags for creating fields: <TEXTAREA>, <SELECT>, and <INPUT>. You can put any number of these tags between the <FORM> and </FORM> container tags. The following is a brief description of each tag:
The <FORM> element comes at the beginning of any form. When you create a <FORM> element, you also define the script it uses and how it sends data, using the ACTION and METHOD attributes:
| Tip |
Use POST for all of your forms unless it's a very simple query, especially because URLs have a definite length that they can't exceed. |
The following is an example of a <FORM> tag:
<FORM METHOD="POST" ACTION="/cgi-bin/comment_script"> ... </FORM>
This example says that I want the form to send the completed form
to the script comment_script
in the cgi-bin directory
on my server and to use the POST
method to send it.
| Caution |
You can put any number of forms on the same HTML page, but be careful not to nest one form inside another. If you put in a <FORM> tag before finishing that last one, that line is ignored and all the inputs for your second form are assumed to go with the first one. |
With <TEXTAREA>, you can provide a field for someone to
enter multiple lines of information. By default, a <TEXTAREA>
form shows a blank field four rows long and 40 characters wide.
You can make it any size you want by using the ROWS
and COLS attributes in the
tag. You can also specify some default text by simply entering
it between the <TEXTAREA> and </TEXTAREA> tags.
| Tip |
<TEXTAREA> fields are ideal for having users enter comments or lengthy information because they can type as much as they want in the field. |
The options for the <TEXTAREA> tag are as follows:
While the ROWS and COLS attributes are not required, there is
no default value for these that you will be guaranteed to get
on every Web browser, so it's always a good idea to set them.
| Tip |
All input fields in a form-<TEXTAREA>, <SELECT>, and <INPUT>-must each have a NAME defined for its information. |
| Caution |
Browsers can't interpret any HTML coding inside <TEXTAREA> tags (see listing 21.1). |
Listing 21.1 TEXTAREA.HTM-<TEXTAREA> Default Text
<HTML> <HEAD> <TITLE>TEXTAREA.HTM</TITLE> </HEAD> <BODY> <FORM> <TEXTAREA NAME="comments" ROWS=4 COLS=40>Default text 1 2 3 ... </TEXTAREA> </FORM> </BODY> </HTML>
The result of listing 21.1 is shown in figure 21.1.
Figure 21.1 : The default text is shown as preformatted text in the <TEXTRAEA> element.
The <SELECT> element shows a list of choices in either a
pop-up menu or
a scrolling list. It's set up as an opening and closing tag with
a number of choices listed in between. Just like the <TEXTAREA>
element, the <SELECT> tag requires you to define a name.
You can specify how many choices to show at once, using the SIZE
attribute.
The options for the <SELECT> element are as follows:
| Tip |
Some WWW browsers won't properly display a scrolling window if the SIZE is 2 or 3. In that case, leave it as a pop-up menu or think about using the <INPUT> field's radio buttons. |
You present the choices the end user will make within the <SELECT> and </SELECT> tags. The choices are listed inside the <OPTION> tag and don't allow any other HTML markup.
The options for the <OPTION> tag are the following:
Consider listing 21.2, the result of which is shown in figure 21.2 and figure 21.3.
Figure 21.2 : The <SELECT> element will use the default of a pop-up menu (size=1).
Listing 21.2 SELECT1.HTM-Selection via Pop-up Menu
<HTML> <HEAD> <TITLE>SELECT1.HTM</TITLE> </HEAD> <BODY> What type of connection: <FORM> <SELECT NAME="network"> <OPTION SELECTED VALUE="ethernet"> Ethernet <OPTION VALUE="token16"> Token Ring - 16MB <OPTION VALUE="token4"> Token Ring - 4MB <OPTION VALUE="localtalk"> LocalTalk </SELECT> </FORM> </BODY> </HTML>
Suppose that you set the tag as shown in listing 21.3.
Listing 21.3 SELECT2.HTM-Selection via Scrollable List
<HTML> <HEAD> <TITLE>SELECT2.HTM</TITLE> </HEAD> <BODY> <FORM> What type of Connection: <SELECT MULTIPLE NAME="network"> <OPTION SELECTED VALUE="ethernet"> Ethernet <OPTION VALUE="token16"> Token Ring - 16MB <OPTION VALUE="token4"> Token Ring - 4MB <OPTION VALUE="localtalk"> LocalTalk </SELECT> </FORM> </BODY> </HTML>
The result of listing 21.3 is shown in figure 21.4.
Figure 21.4 : If you use MULTIPLE
within the <SELECT> tag, then the field becomes a list of
choices.
| Troubleshooting |
I know the most common choices I want to present, but I want to allow people to enter their own value if they want to. How can I do that?
Your best bet is to display the common choices in a <SELECT> box or pop-up menu, with one of the options set to Other. Then include an <INPUT> text field or a <TEXTAREA> field right after the list of choices (see listing 21.4). |
Listing 21.4 SELECT3.HTM-Selection with "Other" Option
<HTML> <HEAD> <TITLE>SELECT3.HTM</TITLE> </HEAD> <BODY> <FORM> What type of Connection: <SELECT MULTIPLE NAME="network"> <OPTION SELECTED VALUE="ethernet"> Ethernet <OPTION VALUE="token16"> Token Ring - 16MB <OPTION VALUE="token4"> Token Ring - 4MB <OPTION VALUE="localtalk"> LocalTalk <OPTION VALUE="other"> Other... </SELECT> <BR> If other, please specify:<INPUT TYPE="text" NAME="network_other"> </FORM> </BODY> </HTML>
The result of listing 21.4 is shown in figure 21.5.
Figure 21.5 : This type of form layout provides both a common list and a place for exceptions.
<INPUT>, unlike <TEXTAREA> and <SELECT>, is a single tag option for gathering information. <INPUT> contains all of the other options for acquiring information, including simple text fields, password fields, radio buttons, check boxes, and the buttons to submit and reset the form.
The attributes for the <INPUT> tag are the following:
This section describes the possible values for the INPUT TYPE attribute.
TEXT, the default input type, displays a simple line of text. You can use the attributes NAME (this is required), SIZE, MAXLENGTH, and VALUE with TEXT. For example, consider listing 21.5, the result of which is shown in figure 21.6.
Figure 21.6 : The INPUT TEXT element provides a very flexible input field.
Listing 21.5 INPUT1.HTM-Text Input Box
<HTML> <HEAD> <TITLE>INPUT1.HTM</TITLE> </HEAD> <BODY> <FORM> A Phone Number: <INPUT TYPE="text" NAME="Phone" SIZE="15" MAXLENGTH="12"> </FORM> </BODY> </HTML>
| Troubleshooting |
I want to let someone put in a very long URL, but the screen is not wide enough. How do I do that?
A good way to enable someone to put in an extremely long text line is to simply set the size to 60 or 80 characters and not set a maximum length. This will allow someone to put in a very long string, even if you can't see it all at once. |
PASSWORD, a modified TEXT field, displays typed characters as bullets instead of the characters actually typed. Possible attributes to include with the type PASSWORD include NAME (this is required), SIZE, MAXLENGTH, and VALUE. Consider listing 21.6, the result of which is shown in figure 21.7.
Listing 21.6 INPUT2.HTM-Text Input Box with No Echo
<HTML> <HEAD> <TITLE>INPUT2.HTM</TITLE> </HEAD> <BODY> <FORM> Enter the secret word: <INPUT TYPE="password" NAME="secret_word" Size="30" MAXLENGTH="30"> </FORM> </BODY> </HTML>
CHECKBOX displays a simple check box that can be checked or empty; use a check box when the choice is yes or no and doesn't depend on anything else. Possible attributes to include with the TYPE text include NAME (this is required), VALUE, and CHECKED (which defaults the check box as checked). Consider listing 21.7, the result of which is shown in figure 21.8.
Figure 21.8 : Select the check boxes that are commonly checked to make the form easier to use.
Listing 21.7 CHECKBOX.HTM-Checkbox Form Input
<HTML> <HEAD> <TITLE>CHECKBOX.HTM</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1">A checkbox <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED>A preselected checkbox </FORM> </BODY> </HTML>
| Caution |
You want to be especially careful when using check boxes and radio buttons in HTML documents with custom backgrounds or background colors. Depending on the Web browser used, check boxes and radio buttons will sometimes not show up with dark backgrounds. |
RADIO is a more complex version of a check box, allowing only one of a set to be chosen. You can group radio buttons together using the NAME attribute; keep all buttons in the same group under one NAME. Possible attributes to include with the TYPE text include NAME (this is required), VALUE, and CHECKED. Consider listing 21.8, the result of which is shown in figure 21.9.
Listing 21.8 RADIO1.HTM-Radio Button Form Input
<HTML> <HEAD> <TITLE>RADIO1.HTM</TITLE> </HEAD> <BODY> Form #1: <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1"> Yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No. </FORM> <HR> Form #2: <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> Yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No. </FORM> </BODY> </HTML>
Listing 21.9 is a variation on listing 21.8. The result is shown in figure 21.10.
Listing 21.9 RADIO2.HTM-Radio Button Form Input with More Choices
<HTML> <HEAD> <TITLE>RADIO2.HTM</TITLE> </HEAD> <BODY> <FORM> One Choice:<BR> <INPUT TYPE="radio" NAME="choice1" VALUE="choice1" CHECKED>(1) <INPUT TYPE="radio" NAME="choice1" VALUE="choice2">(2) <INPUT TYPE="radio" NAME="choice1" VALUE="choice3">(3) <BR> One Choice:<BR> <INPUT TYPE="radio" NAME="choice2" VALUE="choice1" CHECKED>(1) <INPUT TYPE="radio" NAME="choice2" VALUE="choice2">(2) <INPUT TYPE="radio" NAME="choice2" VALUE="choice3">(3) <INPUT TYPE="radio" NAME="choice2" VALUE="choice4">(4) <INPUT TYPE="radio" NAME="choice2" VALUE="choice5">(5) </FORM> </BODY> </HTML>
| Tip |
If you want to provide a long list of choices, use the <SELECT> tag so the choice doesn't take up as much space on the page. |
| Caution |
If you don't specify a set of radio buttons or check boxes with one of the values as SELECTED, then you could receive an empty field for that <INPUT> name. |
RESET displays a push button with the preset function of clearing all the data in the form to its original value. You can use the VALUE attribute with the RESET tag to provide text other than "Reset" (the default) for the button. For example, consider listing 21.10. The result is shown in figure 21.11.
Figure 21.11: The top button shows the default text for the RESET element.
Listing 21.10 RESET.HTM-Form Reset Button
<HTML> <HEAD> <TITLE>RESET.HTM</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="reset"> <BR> <INPUT TYPE="reset" VALUE="Clear that form!"> </FORM> </BODY> </HTML>
SUBMIT displays a push button with the preset function of sending the data in the form to the server to be processed, typically by a CGI script. You can use the VALUE attribute with RESET to provide text other than "Submit Query" (the default) for the button. Consider, for example, listing 21.11. The result is shown in figure 21.12.
Figure 21.12: The top button shows the default text for the SUBMIT element.
Listing 21.11 SUBMIT.HTM-Form Submit Button
<HTML> <HEAD> <TITLE>SUBMIT.HTM</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="submit"> <BR> <INPUT TYPE="submit" VALUE="Send in the data!"> </FORM> </BODY> </HTML>