<form>: the "form" element

The HTML <form> element represents a section of the document containing interactive controls for submitting information.

You can use the CSS pseudo-classes :valid and :invalid to style a <form> element based on whether or not elements within the form are valid.

Attributes

accept

Content types, separated by commas, accepted by the server.

accept-charset

Space-separated character encodings accepted by the server. The browser uses them in the order they are listed. The default value indicates the same encoding as the page. (In earlier versions of HTML, character encodings could also be delimited by commas.)

autocapitalize

A non-standard attribute used by iOS Safari that controls how text form elements are automatically capitalized. The autocapitalize attributes on a form elements override it on the <form>. Possible values:

  • none: no automatic capitalization
  • sentences (default): Capitalize the first letter of each sentence
  • words: Capitalize the first letter of each word.
  • characters: Capitalizes all characters, i.e. uppercase.

autocomplete

Indicates whether by default input elements can have their values automatically completed by the browser. The autocomplete attributes on form elements override it on <form>. Possible values:

  • off: The browser may not automatically complete entries.
  • on: Your browser may automatically complete entries.

name

The name of the module. The value must not be the empty string and must be unique among the elements of the <form> in the form collection in which it is located, if any.

rel

Creates a hyperlink or annotation depending on the value, see the rel attribute for details.

Form submission attributes

The following attributes control the behavior during form submission.

action

The URL that processes the form submission. This value can be overridden by a formaction attribute on a <button>, <input type="submit"> or <input type="image"> element. This attribute is ignored when method="dialog" is set.

enctype

If the value of the method attribute is post, enctype is the MIME type of the form submission. Possible values:

  • application/x-www-form-urlencoded: The default value
  • multipart/form-data: Use if the form contains <input> elements with type=file.
  • text/plain: Introduced by HTML5 for debugging purposes.

This value can be overridden by formenctype attributes on <button>, <input type="submit"> or <input type="image"> elements.

method

The HTTP method with which to submit the form. Possible values (case insensitive):

  • post

  • get

  • dialog

This value can be overridden by formenctype attributes on <button>, <input type="submit"> or <input type="image"> elements.

novalidate

This Boolean attribute indicates that the form does not need to be validated once submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidateattribute on a <button>, <input type="submit"> or <input type="image"> element belonging to the form.

target

Indicates where to view the response after submitting the form. In HTML 4, this is the name/keyword of a frame. In HTML5, it is a name/keyword for a navigation context (e.g. tab, window, or iframe). The following keywords have special meanings:

  • _self(default): Load in the same navigation context as the current one.

  • _blank: Load into a new unnamed navigation context.

  • _parent: Load into the parent navigation context of the current one. If no parent, behaves like _self.

  • _top: Load into the top-level navigation context (i.e., the navigation context that is an ancestor of the current one and does not have a parent). If no parent, behaves like _self. This value can be overridden by a formtargetattribute on a <button>, <input type="submit"> or <input type="image"> element.

Examples

HTML

<!-- Form che invia una richiesta con metodo GET all'URL corrente -->
<form method="get">
  <label>Nome:
    <input name="aubmitted-name" autocomplete="nome">
  </label>
  <button>Salva</label>
</form>

<!-- Form che invia una richiesta con metodo POST all'URL corrente -->
<form method="post">
  <label>Nome:
    <input name="aubmitted-name" autocomplete="nome">
  </label>
  <button>Salva</label>
</form>

<!-- Form con fieldset, legend e un label -->
<form method="post">
  <fieldset>
    <legend>Titolo</legend>
    <label><input type="radio" name="radio">Selezionami</label>
  </fieldset>
</form>