HTML tagForms

<form>

A form that collects data from the user and sends it to a given address.

Display: block
Closing tag: Required
Permitted content: Flow content without nested <form> elements

On this page

Example
Definition and usage
Syntax
Attributes
Attributes in practice
Default CSS
Browser support
Good practices
Related entries

Example

HTML

<form action="/newsletter" method="post">
  <p>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="ania@example.com" required>
  </p>
  <p>
    <label>
      <input type="checkbox" name="consent" required>
      I want to receive new lessons by email
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

Preview

Definition and usage

The <form> element bundles fields (<input>, <select>, <textarea>) and buttons into a single whole. When you click a submit button or press Enter in a text field, the browser collects the values of every field that has a name attribute and sends them to the address in the action attribute.

The get method appends the data to the page address (/search?q=html), which is why it suits search boxes and filters that are worth being able to bookmark. The post method sends data in the body of the request and is the right choice for logging in, registration, orders and anything that changes data on the server.

Before a form is submitted, the browser checks the rules written into its fields, such as required, type="email" or minlength, and shows a message at the first invalid field. Forms can’t be nested, but you can assign a field that sits outside a form to it with the form="form-id" attribute.

Syntax

<form action="/address" method="post">
  …
</form>

Attributes

action
URL
The address the data is sent to. Without this attribute, the form sends data to the address of the current page. A single button can override the address with its own formaction attribute.
method
get | post | dialog
How the data is sent. get (the default) appends it to the address as parameters, so after submitting the form from the example the browser would go to /search?q=…. post sends the data in the body of the request. The value dialog closes the <dialog> the form sits in, without sending anything to the server.
enctype
application/x-www-form-urlencoded | multipart/form-data | text/plain
The format the data is sent to the server in with the post method. The default format is enough for ordinary fields, but a form with a type="file" field must have multipart/form-data, otherwise only the file’s name is sent instead of the file itself.
novalidate
boolean attribute
Turns off the browser’s built-in validation on submit. It’s useful when you check fields with your own JavaScript code and show your own messages. In the example, the form won’t object even though the email address is invalid.
target
_self | _blank | _parent | _top | name
Where to open the server’s response after submitting. _blank opens it in a new tab. The values work the same way as in the target attribute of an <a> link.
autocomplete
on | off
The default autocomplete setting for all fields in the form. A single field can override it with its own autocomplete attribute. For login fields, browsers often ignore off so that password managers keep working.
name
text
The form’s name. It lets you refer to it in JavaScript via document.forms.name.

Attribute	Values	Description
action	URL	The address the data is sent to. Without this attribute, the form sends data to the address of the current page. A single button can override the address with its own `formaction` attribute.
method	get \| post \| dialog	How the data is sent. `get` (the default) appends it to the address as parameters, so after submitting the form from the example the browser would go to `/search?q=…`. `post` sends the data in the body of the request. The value `dialog` closes the `<dialog>` the form sits in, without sending anything to the server.
enctype	application/x-www-form-urlencoded \| multipart/form-data \| text/plain	The format the data is sent to the server in with the `post` method. The default format is enough for ordinary fields, but a form with a `type="file"` field must have `multipart/form-data`, otherwise only the file’s name is sent instead of the file itself.
novalidate	boolean attribute	Turns off the browser’s built-in validation on submit. It’s useful when you check fields with your own JavaScript code and show your own messages. In the example, the form won’t object even though the email address is invalid.
target	_self \| _blank \| _parent \| _top \| name	Where to open the server’s response after submitting. `_blank` opens it in a new tab. The values work the same way as in the `target` attribute of an `<a>` link.
autocomplete	on \| off	The default autocomplete setting for all fields in the form. A single field can override it with its own `autocomplete` attribute. For login fields, browsers often ignore `off` so that password managers keep working.
name	text	The form’s name. It lets you refer to it in JavaScript via `document.forms.name`.

The element also supports all global attributes, such as class, id, style and hidden.

Attributes in practice

action

URL

The address the data is sent to. Without this attribute, the form sends data to the address of the current page. A single button can override the address with its own formaction attribute.

HTML

<form action="/contact" method="post">
  <label>Message <input type="text" name="message"></label>
  <button>Send</button>
</form>

Preview

method

get | post | dialog

How the data is sent. get (the default) appends it to the address as parameters, so after submitting the form from the example the browser would go to /search?q=…. post sends the data in the body of the request. The value dialog closes the <dialog> the form sits in, without sending anything to the server.

HTML

<form action="/search" method="get">
  <input type="search" name="q" placeholder="Search the docs" aria-label="Search the docs">
  <button>Search</button>
</form>

Preview

enctype

application/x-www-form-urlencoded | multipart/form-data | text/plain

The format the data is sent to the server in with the post method. The default format is enough for ordinary fields, but a form with a type="file" field must have multipart/form-data, otherwise only the file’s name is sent instead of the file itself.

HTML

<form action="/profile/avatar" method="post" enctype="multipart/form-data">
  <label>Profile picture <input type="file" name="avatar" accept="image/*"></label>
  <button>Send</button>
</form>

Preview

novalidate

boolean attribute

Turns off the browser’s built-in validation on submit. It’s useful when you check fields with your own JavaScript code and show your own messages. In the example, the form won’t object even though the email address is invalid.

HTML

<form novalidate>
  <input type="email" name="email" value="this-is-not-an-email" aria-label="Email">
  <button>Send despite the error</button>
</form>

Preview

Default CSS

Most browsers display this element with these default styles:

CSS

form {
  display: block;
}

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Every field whose value should reach the server needs a name attribute. A field with no name won’t be sent.
Browser validation is a convenience for the user, not a security measure. The server must always check the data again.
A button with no type attribute inside a form submits it by default. Give buttons that just do something on the page a type="button".

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice HTML in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course