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") |