DEV Community

Cover image for HTML tags | form
Carlos Espada
Carlos Espada

Posted on • Edited on

2

HTML tags | form

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 :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 accepted by the server. The server uses them in the order they appear. The default value is the same encoding as the page.
  • 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.
    • on: the browser can automatically fill in the inputs.
  • enctype: if the value of the method attribute is post, enctype is the 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, the data is sent in the request body.
    • get: the GET method, the data is appended to the action attribute URL with a ? separator. This method is used when the form has no side effects.
    • 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.
  • 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 | Support

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more