HTML Forms
The <form> Element
HTML forms are used to collect user input.
The <form> element defines an HTML form:
<form>
.
form elements
.
</form>
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.
The <input> Element
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. |
|---|
Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Try it Yourself »
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.
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Male
Female
Other
The Submit Button
<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:
Example
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
The Action Attribute
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:
<form action="action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
<form action="action_page.php" method="get">
or:
<form action="action_page.php" method="post">
When to Use GET?
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:
action_page.php?firstname=Mickey&lastname=Mouse
|
|
GET is best suited to short amounts of data. Size limitations are set in your browser. |
|---|
When to Use POST?
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.
The Name Attribute
To be submitted correctly, each input field must have a name attribute.
This example will only submit the "Last name" input field:
Example
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Grouping Form Data with <fieldset>
The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
HTML Form Attributes
An HTML <form> element, with all possible attributes set, will look like this:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
form elements
.
</form>
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
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. |
|---|
More Examples
Send e-mail
from a form
How to send e-mail from a form.
