HTML <form> element

The <form> element represents an area of the page where the user can enter, choose, or change information and then send that information somewhere for processing.

A form can contain text fields, checkboxes, radio buttons, menus, text areas, buttons, grouped controls, and other form-associated elements. The form itself is the container that gives those controls a shared submission context.

The action attribute gives the address that receives the data. With method="get", the default method, form values are encoded in the destination URL's query string; this suits searches and other retrieval requests. With method="post", values are sent in the request body, commonly for operations that change stored data. POST alone does not encrypt the data; HTTPS provides transport encryption.

For ordinary data-entry controls, a non-empty name supplies the key in submitted data. The control's id does not substitute for it. Disabled controls and unchecked checkboxes or radio buttons are omitted. Several controls can share a name, producing repeated name/value pairs.

A form can work without JavaScript. That is one of its strengths. Scripts can improve the experience, check values, or submit data in a more application-like way, but the basic HTML form model is already capable of sending user data to a server.

The enctype attribute chooses the encoding for POST submissions. Its default is application/x-www-form-urlencoded; file uploads normally use multipart/form-data. Forms must not be nested. Controls outside a form can still belong to it through their form attribute, using the form's id.

Normal submission checks constraints such as required and an email field's format unless validation is disabled with novalidate. The server must still validate incoming data. A submit <button> starts this process; a button with type="button" does not.

The local example below uses an <input> with a <label>. After validation, its small JavaScript handler cancels submission and shows the encoded values in <output>. It sends nothing to a server. The displayed markup includes that handler.

Attributes: accept-charset, action, autocomplete, enctype, method, name, novalidate, target, rel, GLOBALS.

Typical layout:
<form onsubmit="event.preventDefault(); this.querySelector('output').value = new URLSearchParams(new FormData(this)).toString();">
  <p><label>Email:
    <input name="email" type="email" required>
  </label></p>
  <button type="submit">Show values</button>
  <p><output aria-live="polite">Values will appear here.</output></p>
</form>

Visual representation: