Tuesday, December 21, 2010

The form Element

A form is a section of a document that contains blank areas that can be filled by a user and submitted to be processed. In (X)HTML the form element is used to create a form. It contains various form controls. It is a block element and can have only block elements and the script element as children. form elements cannot be nested within each other.

These are the allowed child elements of form:

  • p
  • h1 to h6
  • ul and ol
  • pre
  • dl
  • div
  • noscript
  • blockquote
  • hr
  • table
  • fieldset
  • address
  • script


Core Attributes
The core attributes can be applied to this element.

The value of this attribute is a comma-separated list of MIME types which the server can process. Browsers should not allow a user to upload files of a type that is not listed. However, none of the major browsers support this feature.

Example: <form action="" accept="image/gif, image/jpeg">


This attribute specifies the character encodings of the user input that the form processing server must accept in order to process the form. The value of this attribute is a comma-separated or space-separated list of IS0 character set names. The default value is unknown, which the browser will interpret as the same character encoding that the page that contains the form is in. Based on this attribute, a browser may restrict the characters that are entered by the user in the form. However, none of the major browsers impose this restriction. The character encoding of the user input can be any one of those that are listed in the accept-charset attribute.

Here is a list of character encodings http://www.w3schools.com/TAGS/ref_charactersets.asp

Example: <form action="" accept-charset="ISO-8859-1,ISO-8859-2">


This is a required attribute. Its value is the URL of the web page or application that will process the form. If the value is left blank, then the browser submits the form to the current page.

Example: <form action="contact.php">…</form>


This attribute specifies the content type used to submit the form to the server when the form uses post to submit the form to the server (method=post). There are three possible values for the enctype attribute:


This is the default content type for post and the only encoding of get. With URL encoding, and the get method, the following ASCII characters get encoded as shown in the table:


If the method is post, in addition to the above mentioned characters, the following characters are encoded:

This encoding only converts spaces to "+" characters. This value has an effect only for post requests. get requests are URL-encoded regardless of the enctype value.
This Content Type is required when the form has a file upload form control. With this value, the form data is not encoded at all.

This attribute specifies the method that will be used to submit the form data. It can take the following values:

This is the default when there is no method attribute or when it is blank. With get, a question mark (?) is appended to the end of the URL of the form application and then the form data is appended. The form data consists of the value of the name attribute followed by an equals sign and the data of the form control. Subsequent name-value pairs are separated by ampersands (&). The value of the form controls are URL-encoded.
With this method the form data is sent as an HTTP post request. When the enctype is application/x-www-form-urlencoded, the form data is encoded as described earlier. When the enctype is text/plain the data is not encoded except for the space character which is encoded as the plus (+) character. When the enctype is multipart/form-data, the form data is not encoded at all.

Transitional DTDs allow the form tag to have the target attribute. With this attribute, you can specify the name of the window in which the form result should open.

The target attribute is also useful in frame documents. Using this attribute, a form in one frame can show its results in another.

Special Targets

There are four special target values:

This target causes the form results to always open in a new window. The new window will not have an internal name.
This target causes the form results to always load in the same window or frame as the form. This is the default behavior of forms.
This causes the form results to open in the parent of the document that contains the link. This is useful when using iframes.
This causes the form results to open in the topmost frame in the hierarchy.

No comments: