form tag (XHTML 1.1)
interactive formForms are quite a bit of a subject, but in short, they allow you to transfer a range of user input to a page, either another page or the same page, where you can process them, usually with a serverside scripting technology like PHP or ASP/ASP.NET. The form tag is the root element when creating forms, and it allows you to define how to submit the form, where to submit it to and so on.
The action attribute
The action attribute is a required attribute of the form tag and allows you to define where to submit the form to. Usually, you wish to submit the content to one of your own pages, but sometimes, submitting to another site can be quite useful too. Have a look at this example, where we use the action attribute:
<form action="http://www.google.com/search?hl=en"> <input type="text" name="q" /> <input type="submit" name="search" value="Google Search" /> </form>
The result of it will look like this:
Type something in the field and push the button. The text is submitted to Google and a search is performed. Why? Because Google takes the data that you submit to them and process them on their server, and then return the result.
The method attribute
The method attribute has two possible values: "get" or "post", with get being the default. The difference lies in the way the form data is transferred. With the get method, the data is appended to the URL specified in the action attribute. Try the example above, and you will see both name and value of the two form controls in the URL, after hitting the button. Try changing the form to use the post method, like this:
<form action="http://www.google.com/search?hl=en" method="post">
Google doesn't support this, but you will see that names and values are no longer a part of the URL. That's because they are stored in the body of the request instead.
As a general rule, you should use the GET method when your request does not cause any changes, e.g. to a database, and when the values are of limited length and within the ASCII standard. In all other situations, you should use the POST method.
Attributes
| Attribute | Deprecated | Required | Description |
|---|---|---|---|
| accept | list of MIME types for file upload | ||
| accept-charset | |||
| action | X | server-side form handler | |
| class | space-separated list of classes | ||
| dir | direction for weak/neutral text | ||
| enctype | content type used when submitting to server | ||
| id | document-wide unique id | ||
| lang | language code | ||
| method | HTTP method used to submit the form | ||
| name | X | name of form for scripting | |
| style | associated style info | ||
| title | advisory title |
Events
| Event | Description |
|---|---|
| onclick | a pointer button was clicked |
| ondblclick | a pointer button was double clicked |
| onkeydown | a key was pressed down |
| onkeypress | a key was pressed and released |
| onkeyup | a key was released |
| onmousedown | a pointer button was pressed down |
| onmousemove | a pointer was moved within |
| onmouseout | a pointer was moved away |
| onmouseover | a pointer was moved onto |
| onmouseup | a pointer button was released |
| onreset | the form was reset |
| onsubmit | the form was submitted |