The Form
An HTML form is a group of input elements that will submit data to be acted upon to by a server-side or client-side application or script.
Basics
The FORM tag is a container inside which form elements, as well as any HTML tags to format them, is placed. Bare-bones code for a form is:
<FORM> <!-- CONTENT --> </FORM>
This effects no screen output.
Usage
A FORM tag is used to group a number of input elements and indicate what should be done with them. Originally, it was intended to gather data that would be submitted to the server, but it's also possible (and useful) to use a form to gather data that will be handled client-side by JavaScript.
Processing
No information about the form is submitted to the server for processing, only the value of its elements.
It is worth mentioning that the form tag specifies the action, which determines how the data from the elements is passed to the server (as query-string data or among the HTTP headers).
HTML Attributes
Typical
- ACTION - The URL to which the data should be sent
- METHOD - The HTTP method via which the data should be submitted (usually GET or POST). If omitted, most browsers will default to GET.
Unusual
- ENCTYPE - Specifies the content type by which the data should be encoded for transmission. By default it's application/x-www-form-urlencoded and I've only ever needed to change it to multipart/form-data to handle file uploads.
- ACCEPT-CHARSET - The character-set the form should expect to receive. This is usually omitted, and I've never had a need for it.
- TARGET - Used to indicate a render the returned data in a different frame or window than the present one.
JavaScript
The elements contained within a form have their own properties, methods, and events. These are attributable to the form, itself.
Properties
- action - Returns the value of the ACTION attribute of the form.
- method - Returns the value of the METHOD attribute of the form.
- encoding - Returns the value of the ENCTYPE attribute of the form.
- target - Returns the value of the TARGET attribute of the form.
- elements - Returns an array of all element objects contained within the form.
- length - Returns an integer indicating the number of element objects contained within the form.
Methods
- reset - Restores all form elements to their default values, as if the user had clicked a reset button.
- submit - Restores all form elements to their default values, as if the user had clicked a submit button.
Event Handlers
- onReset - Takes effect when a reset button is clicked. Any commands assigned to this handler will take effect before the form fields are reset to default.
- onSubmit - Takes effect when a submit button is clicked. Any commands assigned to this handler will be executed before the form is submitted.
Misc Notes
It is possible to have multiple form objects inside a Web page, though performance becomes unpredictable if a form is nested within another form.
While it is possible to omit the METHOD and rely on the browser to use GET, that should be avoided, as not all browsers will do this.
If your form is meant for client-side processing, do not use a submit button, as it may force the page to refresh (even if the from's ACTION is set to null). Instead, usa a generic button.