Chapter 2: The Basics    (01)

<Next | Table of Contents | Previous>    (02)

A Quick Tutorial on HTML Forms    (03)

The two most important tags in an HTML form are the <form> and <input> tags. You can create most HTML forms using only these two tags. You learn these tags and a small subset of the possible <input> types or attributes. A complete guide and reference to HTML forms is in Chapter 3, "HTML and CGI."    (04)

The <form> Tag    (05)

The <form> tag is used to define what part of an HTML file is to be used for user input. It is how most HTML pages call a CGI program. The tag's attributes specify the program's name and location either locally or as a full URL, the type of encoding being used, and what method is being used to transfer the data to be used by the program.    (06)

The following line shows the specifications for the <form> tag:    (07)

<FORM ACTION="url" METHOD=[POST|GET] ENCTYPE="...">    (08)

The ENCTYPE attribute is fairly unimportant and is usually not included with the <form> tag. For more information on the ENCTYPE tag, see Chapter 3. For one use of ENCTYPE, see Chapter 14, "Proprietary Extensions."    (09)

The ACTION attribute references the URL of the CGI program. After the user fills out the form and submits the information, all of the information is encoded and passed to the CGI program. It is up to the CGI program to decode the information and process it; you learn this in "Accepting Input From the Browser," later in this chapter.    (010)

Finally, the METHOD attribute describes how the CGI program should receive the input. The two methods—GET and POST—differ in how they pass the information to the CGI program. Both are discussed in "Accepting Input From the Browser.".    (011)

For the browser to be able to allow user input, all form tags and information must be surrounded by the <form> tag. Don't forget the closing </form> tag to designate the end of the form. You might not have a form within a form, although you can set up a form that enables you to submit parts of the information to different places; this is covered extensively in Chapter 3.    (012)

The <input> Tag    (013)

You can create text input bars, radio buttons, checkboxes, and other means of accepting input by using the <input> tag. This section, only discusses text input fields. To implement this field, use the <input> tag with the following attributes:    (014)

<INPUT TYPE=text NAME="..." VALUE="..." SIZE=... MAXLENGTH=...>    (015)

NAME is the symbolic name of the variable that contains the value entered by the user. If you include the VALUE attribute, this text will be placed as the default text in the text input field. The SIZE attribute enables you to specify a horizontal length for the input field as it will appear on the browser. Finally, MAXLENGTH specifies the maximum number of characters the user can input into the field. Note that the VALUE, SIZE, and MAXLENGTH attributes are all optional.    (016)

Submitting the Form    (017)

If you have only one text field within your form, the user can submit the form by simply typing in the information and pressing Enter. Otherwise, you must have some way for the user to submit the information. The user submits information by using a submit button with the following tag:    (018)

<input type=submit>    (019)

This tag creates within your form a button labeled Submit. When the user has finished filling out the form, he or she can submit its content to the URL specified by the form's ACTION attribute by clicking the Submit button.    (020)

<Next | Table of Contents | Previous>    (021)

Copyright © 1997 Sams.Net Publishing    (022)