HTML forms are used to collect user input.
The <form> element defines an HTML form:
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.
The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:
Type | Description |
---|---|
text | Defines normal text input |
radio | Defines radio button input (for selecting one of many choices) |
submit | Defines a submit button (for submitting the form) |
You will learn a lot more about input types later in this tutorial. |
<input type="text"> defines a one-line input field for text input:
This is how it will look like in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
This is how the HTML code above will be displayed in a browser:
Male
Female
<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
This is how the HTML code above will be displayed in a browser:
The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
In the example above, a server-side script is specified to handle the submitted form:
If the action attribute is omitted, the action is set to the current page.
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
or:
You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive information.
When you use GET, the form data will be visible in the page address:
GET is best suited to short amounts of data. Size limitations are set in your browser. |
You should use POST:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.
To be submitted correctly, each input field must have a name attribute.
This example will only submit the "Last name" input field:
The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.
This is how the HTML code above will be displayed in a browser:
An HTML <form> element, with all possible attributes set, will look like this:
Here is the list of <form> attributes:
Attribute | Description |
---|---|
accept-charset | Specifies the charset used in the submitted form (default: the page charset). |
action | Specifies an address (url) where to submit the form (default: the submitting page). |
autocomplete | Specifies if the browser should autocomplete the form (default: on). |
enctype | Specifies the encoding of the submitted data (default: is url-encoded). |
method | Specifies the HTTP method used when submitting the form (default: GET). |
name | Specifies a name used to identify the form (for DOM usage: document.forms.name). |
novalidate | Specifies that the browser should not validate the form. |
target | Specifies the target of the address in the action attribute (default: _self). |
You will learn more about attributes in the next chapters. |
Send e-mail
from a form
How to send e-mail from a form.