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?
Listen for the submit event, call event.preventDefault(), then send the data yourself (e.g. with fetch() and new FormData(form)).
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?
Handle the submit event, call event.preventDefault(), then send the data yourself with fetch() and new FormData(form).
footer h1