[prev] [next] [top] [bottom] (1 out of 1)

          

Forms

You can design web pages that look like forms. Using forms, your server can interact with users to gather information. Users can browse forms, making selections as they read. In a form, users can select from several choices, using a variety of selection methods, such as buttons, fill in the blanks, and selection lists. The way the user chooses information depends on the form elements you use when you create the form. This section describes how to implement the following elements in a form:

The section also describes how to send a form to a web server.

Text elements

A text field lets the user enter a word, phrase, or series of numbers. Use the INPUT tag to place text input fields on an HTML form. Figure 4.1 shows a text element on a form

Text element on a form

The following example creates a text element that is 25 characters long. The text field appears immediately to the right of the words "Last name:". The text field is blank when the form loads.

<FORM>



          <B>Last name:</B> <INPUT TYPE="text" NAME="last_name" SIZE=25>



</FORM>

Buttons

Use the INPUT tag to implement buttons on an HTML form. Use JavaScript code to make the button perform an action you define. Figure 4.2 shows a button on a form.

Button on a form

For information on using buttons, see the JavaScript Developer's Guide.

The following example creates a button named CalcButton. The text "Calculate" is displayed on the face of the button. When the button is clicked, the function CalcFunction() is called.

<FORM>



<INPUT TYPE="button" VALUE="Calculate" NAME="CalcButton"



                    onClick="CalcFunction(this.form)">



</FORM>

Reset buttons

When a user presses a reset button, all elements in the form are reset to their default values. Use the INPUT tag to implement reset buttons on an HTML form. See Figure 4.4 for an example of a reset button (named Reset Values).

The following HTML example displays two text elements, a select element, and three radio buttons, all of which have default values. The form also has a reset button named "Defaults." If the user changes the value of any of the elements and then clicks the Defaults button, the original values are restored.

<FORM NAME="form1">



<BR><B>City: </B>



                    <INPUT TYPE="text" NAME="city" VALUE="Santa Cruz" SIZE="20">



<B>State: </B>



                    <INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">



<P><SELECT NAME="colorChoice">



                    <OPTION SELECTED> Blue



                    <OPTION> Yellow



                    <OPTION> Green



                    <OPTION> Red



</SELECT>



<P><INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"



                    CHECKED> Soul and R&B



<BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz">



                    Jazz



<BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="classical">



                    Classical



<P><INPUT TYPE="reset" VALUE="Defaults" NAME="reset1">



</FORM>







Submit buttons

When a user presses a submit button, the form is submitted to the server specified in the form's ACTION attribute. Use the INPUT tag to implement submit buttons on an HTML form. Figure 4.3 shows a submit button on a form.

Submit button on a form

A form can have multiple submit buttons, each with different NAME and VALUE attributes. When one of the submit buttons is pressed, the form sends the server the name=value pair of that button only (in addition to the name=value pairs for all other elements on the form). Some browsers do not support multiple submit buttons on one form.

Clicking a submit button sends the form to the URL specified in the form's ACTION attribute. This action always loads a new page into the client; it might be the same as the current page, if the action specifies or is not specified.

The following example creates a submit button called SubmitButton. The text "Done" is displayed on the face of the button.

<FORM>



          <INPUT TYPE="submit" NAME="SubmitButton" VALUE="Done">



</FORM>







Radio buttons

A set of radio buttons lets the user choose one item from the set. Use the INPUT tag to implement radio buttons on an HTML form. Figure 4.4 shows a radio button group on a form.

Radio button group on a form

All radio buttons in a group have the same value for the NAME attribute.

When a form is submitted to the server, the name=value pair for the radio button is sent only if the radio button is selected. For a group of radio buttons, only one name=value pair is sent to the server, because only one button in a group can be selected.

The following example creates a radio button group similar to the one shown in Figure 4.4.

<FORM>



<B>Category:</B>



          <BR>



          <INPUT TYPE="radio" NAME="category" VALUE="liv" CHECKED> Living



          <BR>



          <INPUT TYPE="radio" NAME="category" VALUE="din"> Dining



          <BR>



          <INPUT TYPE="radio" NAME="category" VALUE="bed"> Bedroom



          <BR>



          <INPUT TYPE="radio" NAME="category" VALUE="bth"> Bath



          <BR>



          <INPUT TYPE="radio" NAME="category" VALUE="grd"> Garden



          <BR>



          <INPUT TYPE="radio" NAME="category" VALUE="shp"> Shop



</FORM>

Checkboxes

A checkbox is a toggle switch that lets the user set a value on or off. Use the INPUT tag to implement checkboxes on an HTML form. Figure 4.5 shows a checkbox on a form.

Checkbox on a form

When a form is submitted to the server, the name=value pair for the checkbox is sent only if the checkbox is checked.

Multiple checkbox elements can have the same values for the NAME attribute if they have different values for the VALUE attribute. When the form is submitted, the browser sends the name=value pairs for all the checkboxes that are checked. This can yield several name=value pairs with the same name.

Examples

Simple checkboxes

The following example displays a group of four checkboxes that all appear checked by default.

<FORM>



<B>Specify your music preferences (check all that apply):</B>



          <BR>



          <INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B



          <BR>



          <INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz



          <BR>



          <INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues



          <BR>



          <INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age



</FORM>







Multiple checkboxes with the same NAME value

The following example shows the checkboxes from the previous example but with the same NAME attribute for each checkbox. When the form is submitted, the name=value pair for each checked checkbox is submitted to the server. This can yield several name=value pairs containing the name Musicpref.

<FORM>



          <B>Specify your music preferences (check all that apply):</B>



          <BR>



          <INPUT TYPE="checkbox" NAME="Musicpref" CHECKED> R&B



          <BR>



          <INPUT TYPE="checkbox" NAME="Musicpref" CHECKED> Jazz



          <BR>



          <INPUT TYPE="checkbox" NAME="Musicpref" CHECKED> Blues



          <BR>



          <INPUT TYPE="checkbox" NAME="Musicpref" CHECKED> New Age



</FORM>

Image elements

Image elements are graphics on an HTML form. Use the INPUT tag to implement image elements within a form. When a user clicks an image element, the form is submitted to the server specified in the form's ACTION attribute. Figure 4.6 shows an image element on a form.

Image element on a form

When the form is submitted, the coordinates where the user clicked are also submitted. The coordinates are measured in pixels from the upper left corner of the image (similar to the ISMAP attribute of the IMG tag). The coordinates are sent in two name=value pairs. The name for each pair is created by appending ".x" or ".y" to the element's name. For example, if the image element is named Image1 and the user clicks the image at the x coordinate 28 and the y coordinate 37, the coordinates are sent to the server using the name=value pairs Image1.x=28 and Image1.y=37.

The following example creates the image element shown in Figure 4.6. When the user clicks the image, the form is submitted.

<FORM>



...



          <CENTER>



                    <INPUT TYPE="image" SRC="signnow.gif">



          </CENTER>



...



</FORM>

Hidden elements

Hidden elements are text elements that don't display on the form. Use the INPUT tag to implement hidden elements. A hidden element is used for passing information to the server when a form is submitted.

A hidden element cannot be seen or modified by a user (other than by viewing the source of the HTML), but by using JavaScript, you can programmatically change its value. You can use hidden elements for client/server communication or to pass state information from one script or form to another.

When a form is submitted to the server, a hidden element's name=value pair is always sent.

The following example creates a form called LoginForm that contains text fields for user name and password, a submit button, and a cancel button. A hidden element, DefaultPass, stores the initial value of the password field.

<FORM NAME="LoginForm">



          <B>User name:</B>



          <INPUT TYPE="text" NAME="userName" SIZE="10">



          <P>



          <B>Password:</B>



          <INPUT TYPE="password" NAME="password" SIZE=12 VALUE="treasure">



          <INPUT TYPE="hidden" NAME="DefaultPass" VALUE="treasure">



          <P>



          <INPUT TYPE="submit" VALUE="Log in">



          <INPUT TYPE="button" VALUE="Cancel" onClick="window.close()">



</FORM>







Password elements

Password elements are text input fields on an HTML form that conceal their value by displaying asterisks (*). When the user enters text into the field, asterisks (*) hide anything entered from view. Figure 4.7 shows a password element on a form.

Password element on a form

Even though passwords are masked onscreen, the password is sent to the server as straight text and is not encrypted when the form is submitted, unless the server itself uses an encryption method. Be cautious when using password fields because they could be intercepted and read by anyone.

The following HTML example creates a form like the one in Figure 4.7. If the user enters a password containing more than 25 characters, the text scrolls to make room for the additional characters.

<FORM>



          <B>User name:</B>



                    <INPUT TYPE="text" NAME="username" SIZE=10>



          <B>Password:</B>



                    <INPUT TYPE="password" NAME="password" VALUE="" SIZE=25>



</FORM>

File upload elements">

File upload elements

A file upload element is an element on an HTML form that lets the user supply a text file as input. When the form is submitted, the content of the specified file is sent to the server along with the other form data.

When a file upload element is encountered, the browser displays a text box for entering a file name. The browser also displays a Browse button so the user can select a file. Figure 4.8 shows a file upload element on a form.

File upload element on a form

The following HTML text creates the file upload element shown in Figure 4.8.

<FORM ENCTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST>



          <B>First name:</B><INPUT TYPE="text">



          <BR>



          <B>Last name:</B><INPUT TYPE="text">



          <P>



          <B>Brief description of the problem:</B>



          <BR>



          <INPUT TYPE="text" SIZE="45">



          <P>



          <B>Please attach a file with your event log.</B>



          <BR>



          <B>File name:</B><INPUT TYPE="file">



          <P>



          <INPUT TYPE="submit" VALUE="Submit Report">



          <INPUT TYPE="button" VALUE="Cancel" onClick="window.close()">



</FORM>

Sending form data to a server

HTML forms collect data, but they do not usually process it. To process a form, you can submit the form to a program stored on a web server. The form and the server-side program should be designed together so that the program can process the form data being sent.

When a form is submitted, each form element defined with an INPUT, SELECT, or TEXTAREA tag is sent to the server in the format name=value; this is called a name=value pair. The name comes from the tag's NAME attribute, and the value is the value of the form element when submitted.

For example, the following form contains an INPUT tag that defines a text element called LastName.

<FORM>



<B>Last name:</B>



          <INPUT TYPE="text" NAME="LastName" VALUE="">



          <INPUT TYPE="submit" NAME="SubmitButton" VALUE="Done">



</FORM>







Suppose the user enters the value "Mitchell" for LastName and presses the Done button; the form is submitted and the name=value pair LastName=Mitchell is sent to the server. See your server documentation for more information on writing programs that handle form data.