Latest update on Thursday 16 October 2008 à 09:43 by Jean-François Pillou.
Forms
Interactive forms let web page authors give their pages interactive elements, such as for receiving messages from their readers, much like the reply cards found in some magazines.
The reader enters information by filling in fields or clicking on buttons, then pressing a submit button to send it to a URL, normally one pointing to an e-mail address or to a dynamic web script like PHP, ASP, or a CGI script.
The FORM tag
Forms are delimited with the <FORM> ... </FORM> tag, which contains several form elements, such as buttons and text boxes, and which must possess the following attributes:
METHOD indicates how replies will be sent "POST" is the value that sends the data to the processing agent by storing it in the body of the form, while "GET" sends the data by adding it to the URL, separating it from the address with an exclamation mark (to learn more about the POST and GET methords, consult the article on HTTP protocol)
ACTION indicates the address that the information will be sent to (a CGI script or e-mail address (mailto:email.address@machine))
An optional attribute of the FORM tag is ENCTYPE, which specifies how the form data is encoded in the URL. However, this does not need to be specified, since the default value (application/x-www-form-urlencoded) is the only legal value. The optional attribute ACCEPT is used to set MIME types for the data which the form can send.
This is the syntax for the FORM tag:
<FORM METHOD="POST" or "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>
The FORM tag acts as a sort of container for storing elements which let the user select or enter data. All data will be sent to the URL indicated in the ACTION attribute of the FORM tag by the method indicated by the METHOD attribute.
Any basic HTML element may be inserted into a FORM tag (such as text, buttons, tables, and links), but the interactive elements are the most important. These interactive elements are:
The INPUT tag: All buttons and text boxes
The TEXTAREA tag: A text box
The SELECT tag: A multiple-choice list
Sending Data
When a form is submitted (by clicking on the submit button), the data in the form is sent to a CGI script in the form of name/value pairs, which are sets of data represented as the name of the form element, an equal sign ("="), and then the associated value. These name/value pairs are set off from one another by ampersands ("&"). So the data sent to the script will look like this:
field1=value1&field2;=value2&field3;=value3
With the GET method (sending data using a URL), the URL will be a string that looks like this:
The name attribute is essential, as it lets the CGI script know which field is associated with which name/value pair, meaning that the name of the field will be followed by an equal sign ("=") followed by the value entered by the user, or if the user didn't input a value, by the default value for the value attribute. The type attribute is used to specify which type of element is represented by the INPUT tag. These are the possible values:
checkbox: Checkboxes can be in one of two states: checked or unchecked. When the box is checked, the name/value pair is sent to the CGI.
hidden: This field, which the browser does not display, is for defining a fixed setting that will be sent to the CGI as a name/value pair.
file: A field that lets the user specify a filepath leading to a file that will be sent along with the form. The file types that can be sent should be specified, by using the ACCEPT attribute of the FORM tag
image: A customized submit button, which appears as whatever image is at the location defined by its SRC attribute
password: A textbox, in which the characters that are entered show up as asterisks, in order to camouflage the input text.
radio: A button allowing the user to choose from between several options. Each of these radio buttons must have the same name attribute. The name/value pair of the radio button selected will be sent to the CGI. Using the checked attribute for one of the buttons lets you define it as being selected by default.
reset: A reset button for clearing all elements in the form by setting them back to their default values.
submit: A submit button to send the form. The text on the button can be set using the value attribute.
text: A textbox for entering a line of text. The size of the box may be defined using the size attribute and the maximum length of the text with the maxlength attribute.
The TEXTAREA tag
The TEXTAREA tag is for defining a textbox bigger than just the single line allowed by the INPUT tag. This tag has the following attributes:
cols: represents the number of characters that a line may contain
rows: represents the number of lines
name: represents the name associated with the textbox, which allows it to be identified in the name/value pair.
readonly: prevents the user from changing the default text in the field
value: represents the default value that will be sent to the script if the user has not entered anything in the textbox
The SELECT tag
The SELECT tag is for creating a dropdown list of elements (specified by the OPTION tags within it). This tag's attributes are:
name: represents the name associated with the textbox, which allows it to be identified in the name/value pair.
disabled: creates a disabled list, shown as being grayed out
size: represents the number of lines in the list (this value may be larger than the number of actual elements in the list)
multiple: enables the user to select several fields in the list
Example Form
Forms can be placed in a page using tables (recommended for a professional-looking layout). Here is an example summing up the above points, showing you how to place a form in a web page using a table:
This document, titled « HTML forms », is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).
