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:
What an HTML form is
How to create a form
How to use lists, check boxes, and radio buttons to present a list of options
How to allow for the entry of text, secret text (such as passwords), and arbitrary length text
How to allow the user to reset and submit completed forms
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:
<TEXTAREA>-This tag defines a field in which the end user can type multiple lines of text.
<SELECT>-This tag enables the end user to choose among a number of options in either a scroll box or pop-up menu.
<INPUT>-This tag provides all of the other types of input: single lines of text, radio buttons, check boxes, and the buttons to submit or clear the form.
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:
ACTION-This attribute points the form to a URL that will accept the form's information and do something with it. If you don't specify an ACTION, it sends the information back to the same URL the page came from.
METHOD-This attribute tells the form how to send its information back to the script. The most common method is POST, which sends all the information from the form separately from the URL. The other option for METHOD is GET, which tacks the information from the form to the end of the URL.
|
Tip |
|
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 |
|
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 |
|
The options for the <TEXTAREA> tag are as follows:
NAME-This is required. It defines the name for the data.
ROWS-This sets the number of rows in the field.
COLS-This sets the width of the field in characters.
Default text-Any text between the <TEXTAREA> and </TEXTAREA> tags is used as default text and shows up inside the field.
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 |
|
|
Caution |
|
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:
NAME-This is required. It defines the name for the data.
SIZE-This attribute determines how many choices to show. If you omit SIZE or set it to 1, the choices are shown as a pop-up menu. If you set it to 2 or higher, it shows the choices in a scroll box. If you set SIZE larger than the number of choices you have within <SELECT>, a "nothing" choice is added. When the end user chooses this, it's returned as an empty field.
MULTIPLE-This allows multiple selections. If you specify multiple, a scrolling window displays-regardless of the number of choices or the setting of SIZE.
|
Tip |
|
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:
VALUE-This is the value to be assigned for the choice, which is what is sent back to the script and doesn't have to be the same as what is presented to the end user.
SELECTED-If you want one of the choices to be a default, use the SELECTED option in the <OPTION> tag.
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?
|
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:
NAME-This defines the name for the data. This field is required for all the types of input except SUBMIT and CLEAR.
SIZE-This is the size of the input field in number of characters for text or password.
MAXLENGTH-This specifies the maximum number of characters to be allowed for a text or password field.
VALUE-For a text or password field, it defines the default text displayed. For a check box or radio button, it specifies the value that will be returned to the server if the box or button is selected. For the SUBMIT and RESET buttons, it defines the text inside the button.
CHECKED-This sets a check box or radio button on. It has no meaning for any other type of <INPUT> tag.
TYPE-This sets the type of input field you want to display. (See the types in the following section.)
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?
|
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 |
|
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 |
|
|
Caution |
|
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>
