HTML Forms

A form in HTML 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.

HTML Tutorial

Example

A login form with email and password textboxes and a submit button.

Login



<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.


Form Syntax

To create a form use the <form> tag.

<form>
    <!--input elements go here-->
</form>

For more information about the <form> tag, see our HTML form Tag Reference.

Forms contain input elements which we will review next.

HTML Input Elements

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 more information on <input> elements, see our HTML input Tag Reference.


Text Input

A <form> with two <input type="text"> elements.

First name

Last name


<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>

Radio Button Input

A <form> with two <input type="radio"> elements.

Male
Female

<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.


Checkbox Input

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.


Submit Button

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).

First name  

Last name  

<form action="/tutorial/action.html">
  First name &nbsp;
  <input type="text" name="firstname" value="Thomas"> <br /><br />

  Last name &nbsp;
  <input type="text" name="lastname" value="McHyde"> <br /><br />

  <input type="submit" value="Submit">
</form>

Did you know?

Did you know?

Resetting all form fields

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.

First name

Last name


<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.


Form Attributes

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 more information about <form> attributes, see our HTML form Tag Reference.

Next, we'll look at some commonly used <form> attributes.


Form action Attribute

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>

Form target Attribute

A target attribute on a <form> specifies the window or tab where the next page will display.

It takes values like _blank, _self, _parent, and others.

A form with target="_blank".
When submitted the browser will open a new tab.

First name

Last name


<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>

Form method Attribute

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.


What is a GET method?

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.


What is a POST method?

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>

Input name Attribute

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.

First name

Last name


<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>

You may also like

Guides