Forms

Creating a Basic Feedback Form

Online HTML forms allow site visitors to interact with your Web server.
You can use a form to

When a user fills out a form and clicks the Submit button, the form data goes to the Web server. The form also initiates a common gateway interface (CGI) program or script that processes the data and then performs a pre-determined action, such as adding the information to a database.

To create a basic form in an HTML document, add the following:

You define a form with <FORM> and </FORM>. Although you can create multiple forms in the same HTML file, you cannot nest forms.

<FORM> Attribute Description
METHOD="GET"
METHOD="POST"
Identifies the method for sending form data to the server (default="GET")
ACTION= script Identifies the script that processes submitted form data

Example: A complete <FORM> tag might look like the following:
<FORM METHOD="POST" ACTION="/perl/query.pl">

METHOD="GET"

The default GET method attaches the form data to the end of the URL for a requested page, resulting in a single packet. The Web server then uses the appended data to identify the appropriate script, execute it, and supply it with the string.

Use the GET method for small amounts of data. For example, you could use it when the form allows a user to search for a keyword or retrieve a specific file.

GET might fail if more than a few hundred bytes of data are sent simultaneously.

 

METHOD="POST"

The POST method initially sends the URL and tells the server to expect an additional string of data, resulting in two packets. POST is more reliable than GET. Use the POST method when the data query string is too long to append to a URL or when you want to post data to an object on the server without requiring a reply. For example, use POST to add the data to a database.

 

ACTION= script

The ACTION attribute lets you specify the URL that processes entered data. This URL almost always points to a CGI script. If you reference a script located on the same server as the form, use a relative pathname; otherwise, specify the entire URL.

 

Input Fields

A basic form needs at least one input field, although many forms have several. The <INPUT> tag allows you to create some of the form elements such as text fields.

You can create as many input fields as you want in a form, but you must define a unique name for each one. Spaces are not allowed in field names; use underscores (_) instead. You can pick any name for your fields except the pre-defined form attributes.

Example:
<INPUT TYPE=text NAME=zip SIZE=9 VALUE="84057" MAXLENGTH=9>

 

Form Tag Summary

HTML Tag Attribute Description
<OPTION>   Defines an option in a select menu
SELECTED Specifies the default selection in a selection menu
VALUE Specifies the value for an option in a selection menu
<PRE></PRE>   Displays text with fonts and spacing intact, exactly as typed in the document
<SELECT></SELECT>   Defines a selection menu
MULTIPLE Allows the user to select multiple options
NAME=variable_name Indicates the variable name for the selection menu
SIZE=x Identifies the number of options to display at a time
<TEXTAREA></TEXTAREA>   Defines a text area for a form
COLS Specifies the number of text columns for the text area
NAME=variable_name Indicates the variable name for the text area
ROWS Specifies the number of rows for the text area
WRAP=hard
WRAP=off
WRAP=soft
Specifies how the browser should wrap <TEXTAREA> input
<INPUT>   Creates a button, a check box, or an input box for a form
CHECKED Marks a check box or radio button by default
MAX Defines the maximum acceptable value (only when TYPE=int)
MAXLENGTH=x Specifies the maximum string length in characters
MIN Defines the minimum acceptable value (only when TYPE=int)
NAME=field_name Indicates the variable name
SIZE=x Defines the size of an input field in number of characters
TYPE=text
TYPE=hidden
TYPE=int (integer)
TYPE=password
Specifies the type of input
type=image value="button1.gif" name="button1.gif" Specifies an image for a submit button
TYPE=radio
TYPE=checkbox
Indicates a check box or radio button
TYPE=reset
TYPE=submit
Indicates a reset or submit button
VALUE=value Identifies the value for the variable
<FORM></FORM>   Defines a form
ACTION=script Identifies the script that processes submitted form data
METHOD="GET"
METHOD="POST"
Identifies the method for sending form data to the server (default="GET")