References

Beginner-friendly references for web development, with live, editable examples.

The HTML <form> tag

Element All modern browsers Updated
Quick answer

The HTML <form> element groups interactive controls (inputs, selects, buttons) and submits their data to a server. The action attribute sets the destination URL and method sets the HTTP method (get or post).

Overview

The <form> element is the container for a set of controls the user fills in and submits. Only controls with a name are included in the submitted data, sent to the URL in action using the method (get puts the data in the URL; post sends it in the request body).

Forms give you native, accessible features for free: client-side validation from attributes like required and pattern, submission with a <button>, and grouping with <fieldset>. To handle submission with JavaScript, listen for the submit event and call preventDefault().

Syntax

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button>Sign up</button>
</form>

Attributes

The <form> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
accept-charset A space-separated list of character encodings, in practice always utf-8. Sets the character encodings a form accepts.
action A URL. Sets the URL a form submits to.
autocomplete on, off, or a specific token such as email, name, current-password, one-time-code. Controls browser autofill for a field.
enctype application/x-www-form-urlencoded (default) multipart/form-data text/plain Sets the encoding of submitted form data.
method get post dialog Sets the HTTP method for form submission.
name A string (the field name used in the submitted data). Names a form control for submission.
novalidate A boolean attribute: present or absent. Skips native form validation on submit.
rel A space-separated list of link types, e.g. nofollow, noopener, noreferrer, stylesheet, preload, canonical, icon, sponsored, ugc. Defines the relationship to the linked resource.
target _self (default) _blank _parent _top a named browsing context Specifies where to open a link or form result.

Example

Live example 
<form onsubmit="event.preventDefault(); this.lastElementChild.textContent='Submitted!'">
  <label for="e">Email</label>
  <input id="e" name="email" type="email" required style="padding:6px;">
  <button>Sign up</button>
  <span style="margin-left:8px;color:#16a34a;"></span>
</form>

Best practices

  • Associate every control with a <label> and give it a name so its value is submitted.
  • Use the right method: post for anything that changes data or is sensitive.
  • Use native validation (required, type, pattern) but always validate on the server too.
  • Group related fields with <fieldset> and a <legend>.

Accessibility

Accessible forms come down to labels and grouping:

Frequently asked questions

What is the <form> element used for?
Grouping form controls and submitting their values to a server (or handling them with JavaScript).
What is the difference between GET and POST?
With method="get" the data is appended to the URL (good for searches and bookmarkable queries); with method="post" it is sent in the request body (for changes, file uploads and sensitive data).
How do I submit a form with JavaScript?
From code, call form.requestSubmit(), which runs validation and fires the submit event (unlike the older form.submit(), which skips both).
How do I upload files with a form?
Add a file input and set enctype="multipart/form-data" with method="post".
Can a control be in a form without being nested inside it?
Yes. Give the control a form attribute referencing the form's id.
How do I submit a form without reloading the page?
Call event.preventDefault() in the submit handler so the browser never navigates, then send the values with fetch(). The page stays exactly where it is, which is how AJAX and single-page forms show an inline success or error message instead of reloading.
footer h1