A form is an area with input elements where users enter data.
Input elements include text fields, radio buttons, submit buttons, and more.
Forms are defined with the <form> tag.
A login form with email and password textboxes, and a submit button.
<form action="/tutorial/action.html">
<fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
<legend>Login</legend>
<input type="text" placeholder="Email" name="email" id="email"><br /><br />
<input type="password" placeholder="Password" name="password" id="password"><br /><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
Pages that use forms include login, registration, search, payment, and many others.
To create a form use the <form> tag.
<form>
<!--input elements go here-->
</form>
For details on the <form> tag, see our HTML form tag reference.
Forms contain input elements which are reviewed next.
Input elements are HTML elements that are designed for users to enter data.
Examples include text fields, checkboxes, submit buttons, and others.
Developers often refer to Input elements as controls.
To submit data, the <input> elements must reside inside a <form>.
For details on <input> elements, see our HTML input tag reference.
A <form> with two <input type="text"> elements.
<form action="/tutorial/action.html">
First name <br />
<input type="text" name="firstname"> <br />
Last name <br />
<input type="text" name="lastname"> <br /> <br />
<input type="submit" value="Submit">
</form>
A <form> with two <input type="radio"> elements.
<form action="/tutorial/action.html">
<input type="radio" name="gender" value="male" checked> Male <br />
<input type="radio" name="gender" value="female"> Female <br /><br />
<input type="submit" value="Submit">
</form>
Note: To group radio input elements, they must have the same name value.
The <input type="checkbox"> tag creates a checkbox.
Each checkbox is paired with a <label> to display the associated text.
Users can click on the checkbox and on the text -- both will toggle the checkbox.
A <form> with three <input type="checkbox"> elements.
<form>
<input type="checkbox" id="instrument1" name="instrument1" value="Guitar">
<label for="instrument1"> I play the guitar</label><br />
<input type="checkbox" id="instrument2" name="instrument2" value="Piano">
<label for="instrument2"> I play the piano</label><br />
<input type="checkbox" id="instrument3" name="instrument3" value="Drums">
<label for="instrument3"> I play the drums</label>
</form>
Tip: Be sure to include the for attribute on the label, or else the text will not be clickable. Too many websites are missing this, forcing users to click on the checkbox.
The <input type="submit"> tag creates a submit button.
To submit a form it must have a submit button placed inside the <form> tag.
When clicked, all form data is submitted to a form-handler, usually code on the server.
A <form> with an <input type="submit"> button (and two input boxes).
<form action="/tutorial/action.html">
First name
<input type="text" name="firstname" value="Thomas"> <br /><br />
Last name
<input type="text" name="lastname" value="McHyde"> <br /><br />
<input type="submit" value="Submit">
</form>
It is not uncommon for a user to enter data and then deciding to start all over.
To clear the form fields, HTML offers an <input type="reset"> button that will reset the form.
A <form> with a <input type="reset"> button.
Enter some data and then select Reset.
<form action="/tutorial/action.html">
First name <br />
<input type="text" name="firstname"> <br />
Last name <br />
<input type="text" name="lastname"> <br /> <br />
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
Tip: A Reset button does not necessarily clear all data -- instead, it will return the fields to their original value when the page was loaded.
Attributes that can be applied to a <form> element.
| Attribute | Description | Default |
|---|---|---|
| action | Sets the address (URL) where to submit the form | the current page |
| method | Sets the HTTP method used when submitting the form | GET |
| enctype | Sets the encoding of the submitted data | url-encoded |
| target | Sets the target of the address in the action attribute | _self |
| accept-charset | Sets the charset used in the submitted form | the page charset |
| novalidate | Specifies that the browser should not validate the form. | |
| autocomplete | Presents the user with previous form input values | on |
For details on <form> attributes, see our HTML form tag reference.
Next, we'll look at some commonly used <form> attributes.
The action attribute on a <form> specifies the action to be taken when the form is submitted.
This is usually server code ready to process the data entered.
<form action="/action.aspx"> ... </form>
A form with target="_blank".
When submitted the browser will open a new tab.
<form action="/tutorial/action.html" target="_blank">
First name <br />
<input type="text" name="firstname" value="Thomas"> <br />
Last name <br />
<input type="text" name="lastname" value="McHyde"> <br/><br />
<input type="submit" value="Submit">
</form>
The method attribute on a <form> specifies the HTTP method to be used.
An HTTP method defines how data is transported and the desired action to be taken.
The most frequently used methods are GET and POST. The default is GET if none is provided.
A GET method retrieves information from a server.
When submitted, the GET method appends form-data to the URL.
The length of a URL is limited to 3000 characters.
Avoid using GET when sending sensitive or important data because it is visible on the URL.
<form action="/action.aspx" method="GET"> ... </form>
When submitted the URL looks like this:
/action.aspx?firstname=Thomas&lastname=McHyde
Tip: The name-value pairs following the ? on the URL is referred to as the query string.
A POST method requests that data be stored or updated on the server.
When submitted, the form-data is sent in the request body which is not visible and therefore more secure.
Unlike GET, the POST method does not have a size limitation.
<form action="/action.aspx" method="POST"> ... </form>
All <input> elements inside a <form> must have a name attribute.
The name attribute identifies the input element whose value is sent to the server.
If the name attribute is omitted, the data of that input field will not be sent to the server.
The text fields below are named firstname and lastname.
Their values are received by the action.html form-processor.
<form action="/tutorial/action.html">
First name <br />
<input type="text" name="lastname" value="Thomas"> <br />
Last name <br />
<input type="text" name="lastname" value="McHyde"> <br /><br />
<input type="submit" value="Submit">
</form>
