HTML tags | form
Tags: html, tags, form
Published: 2021-10-27 06:19:41

It is used to **represent a part of the document that contains interactive controls for the user to submit information**.

It can contain one or more of the `<fieldset>`, `<label>`, `<input>`, `<textarea>`, `<select>`, `<option>`, `<optgroup>`, `<output>` and `<button>` elements.

It is possible to use the CSS [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) `:valid` and `:invalid` to style a `<form>` based on whether the elements within it are valid or not.

It has the following attributes:
* `accept-charset`: space-separated [character encodings](https://developer.mozilla.org/en-US/docs/Web/Guide/Localizations_and_character_encodings) accepted by the server. The server uses them in the order they appear. The default value is the [same encoding as the page](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding).
* `action`: the URL that processes the form submission. This value can be overridden by `formaction` attributes on `<button>`, `<input type="submit">` or `<input type="image">` elements.
* `autocomplete`: indicates whether the browser can automatically complete input values ​​by default. `autocomplete` attributes on form elements override this attribute in `<form>`. It can be worth:
  * `off`: the browser may not automatically fill in the entries. In case of a suspicious login, the browser [can ignore this value](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).
  * `on`: the browser can automatically fill in the inputs.
* `enctype`: if the value of the `method` attribute is `post`, `enctype` is the [MIME type](https://en.wikipedia.org/wiki/Mime_type) of the form submission. This value can be overridden by `formenctype` attributes on `<button>`, `<input type="submit">` or `<input type="image">` elements. It can be worth:
  * `application/x-www-form-urlencoded`: the default value.
  * `multipart/form-data`: used if the `<form>` contains `<input type="file">` elements.
  * `text/plain`: introduced by HTML5 to be able to debug.
* `method`: the HTTP method with which to submit the form. This value can be overridden by `formmethod` attributes on `<button>`, `<input type="submit">` or `<input type="image">` elements. It can be worth:
  * `post`: the [POST method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5), the data is sent in the [request body](https://developer.mozilla.org/en-US/docs/Web/API/Body).
  * `get`: the [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), the data is appended to the `action` attribute URL with a `?` separator. This method is used when the form [has no side effects](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent).
  * `dialog`: when the form is inside a `<dialog>`, it closes it when submitting the form.
* `novalidate`: it is a Boolean attribute that indicates that the form should not be validated when submitted. If the attribute is not defined (and therefore the form is validated), it can be overwritten by a `formnovalidate` attribute in a `<button>`, `<input type="submit">` or `<input type="image">` element that belongs to the form.
* `rel`: creates a hyperlink or annotation [based on the value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
* `target`: indicates where to display the response after submitting the form. In HTML5 it is a name/keyword for a navigation context (eg tab, window or iframe). This value can be overridden by a `formtarget` attribute on a `<button>`, `<input type="submit">` or `<input type="image">` element. Specifying the `target="_ blank"` attribute on a `<form>` element implies the same behavior for the `rel` attribute as specifying `rel="noopener"`, that is, there will be no `window.opener`. It can have the following values:
  * `_self`: load in the same navigation context. It is the default value.
  * `_blank`: load into a new, unnamed navigation context.
  * `_parent`: load in the navigation context of the parent of the current one. If there is no parent, it acts the same as `_self`.
  * `_top`: shows the resource in the highest navigation context that is an ancestor of the current one. If there is no parent, it acts the same as `_self`.

It has an **implicit ARIA role** `form` as long as it has **an accessible name** assigned with `aria-label` or `aria-labelledby`. Otherwise, it has no role.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) | [Support](https://caniuse.com/mdn-html_elements_form)