DEV Community

Cover image for HTML tags | form
Carlos Espada
Carlos Espada

Posted on

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 | Example | Support

Discussion (0)