Forms are created by placing input fields within paragraphs, preformatted/literal text, and lists. This gives considerable flexibility in designing the layout of forms.
The following elements are used to create forms:
Each variable field is defined by an Input, Textarea, or Option element and must have an NAME attribute to identify its value in the data returned when the form is submitted.
Example of use (a questionnaire form):
<H1>Sample Questionnaire</H1> <P>Please fill out this questionnaire: <FORM METHOD="POST" ACTION="http://www.w3.org/sample"> <P>Your name: <INPUT NAME="name" size="48"> <P>Male <INPUT NAME="gender" TYPE=RADIO VALUE="male"> <P>Female <INPUT NAME="gender" TYPE=RADIO VALUE="female"> <P>Number in family: <INPUT NAME="family" TYPE=text> <P>Cities in which you maintain a residence: <UL> <LI>Kent <INPUT NAME="city" TYPE=checkbox VALUE="kent"> <LI>Miami <INPUT NAME="city" TYPE=checkbox VALUE="miami"> <LI>Other <TEXTAREA NAME="other" cols=48 rows=4></textarea> </UL> Nickname: <INPUT NAME="nickname" SIZE="42"> <P>Thank you for responding to this questionnaire. <P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM>
In the example above, the P and UL tags have been used to lay out the text and input fields. The HTML interpreter is responsible for handling which field will currently get keyboard input.
Many platforms have existing conventions for forms, for example, using Tab and Shift keys to move the keyboard focus forwards and backwards between fields, and using the Enter key to submit the form. In the example, the SUBMIT and RESET buttons are specified explicitly with special purpose fields. The SUBMIT button is used to e-mail the form or send its contents to the server as specified by the ACTION attribute, while RESET resets the fields to their initial values. When the form consists of a single text field, it may be appropriate to leave such buttons out and rely on the Enter key.
The Input element is used for a large variety of types of input fields.
To let users enter more than one line of text, use the Textarea element.
The radio button and checkbox types of input field can be used to specify multiple choice forms in which every alternative is visible as part of the form. An alternative is to use the Select element which is typically rendered in a more compact fashion as a pull down combo list.
<FORM> ... </FORM> Level 2
The Form element is used to delimit a data input form. There can be several forms in a single document, but the Form element can't be nested.
The ACTION attribute is a URI specifying the location to which the contents of the form is submitted to elicit a response. If the ACTION attribute is missing, the URI of the document itself is assumed. The way data is submitted varies with the access protocol of the URI, and with the values of the METHOD and ENCTYPE attributes.
In general:
When the ACTION attribute is set to an HTTP URL, the METHOD attribute must be set to an HTTP method [HTTP]. The default method is GET, although for many applications the POST method is preferred. With the POST method, the ENCTYPE attribute is a media type specifying the format of the posted data; the default is "application/x-www-form-urlencoded".
The submitted contents of the form logically consist of name/value pairs. The names are usually equal to the NAME attributes of the various interactive elements in the form.
<INPUT> Level 2
The Input element represents a field whose contents may be edited by the user.
Attributes of the Input element:
INPUT TYPE=text SIZE="24"
<OPTION> Level 2
The Option element can only occur within a Select element. It represents one choice, and can take these attributes:
The contents of the Option element is presented to the user to represent the option. It is used as a returned value if the VALUE attribute is not present.
<SELECT NAME=... > ... </SELECT> Level 2
The Select element allows the user to chose one of a set of alternatives described by textual labels. Every alternative is represented by the Option element. Attributes are:
The Select element is typically rendered as a pull down or pop-up list. For example:
<SELECT NAME="flavor"> <OPTION>Vanilla <OPTION>Strawberry <OPTION>Rum and Raisin <OPTION>Peach and Orange </SELECT>
If no option is initially marked as selected, then the first item listed is selected.
<TEXTAREA> ... </TEXTAREA> Level 2
The Textarea element lets users enter more than one line of text. For example:
<TEXTAREA NAME="address" ROWS=64 COLS=6> HaL Computer Systems 1315 Dell Avenue Campbell, California 95008 </TEXTAREA>
The text up to the end tag (</TEXTAREA>) is used to initialize the field's value. This end tag is always required even if the field is initially blank. When submitting a form, lines in a TEXTAREA should be terminated using CRLF.
In a typical rendering, the ROWS and COLS attributes determine the visible dimension of the field in characters. The field is rendered in a fixed-width font. HTML interpreters should allow text to extend beyond these limits by scrolling as needed.