HTML <Form> Tag

Definition

The <form> tag is used to create an HTML form that contains controls for submitting user information.

Example

<style>
.fieldset input:invalid {
  background-color: red;
}
.fieldset input:valid {
  background-color: green;
</style>

<form action="" method="get" class="form">
  <fieldset class="fieldset">
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" required>
  </fieldset>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

Usage

• The <form> element can contain one or more of the following form elements:
  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <output>
• The opening and closing tags are required.
• You can not put a <form> element as a child of a <form> element.

Attributes

The Form element supports the Global Attributes, as well as the following:

• accept-charset

  The accept-charset attribute specifies the character encoding to be used for the form submission.

• action

  The action attribute specifies where to send the form data on submission.

  These values can be overriden by the formaction attributes on some elements, including <button>, <input type="submit">, or <input type="image">.

• autocomplete

  The autocomplete attribute indicates whether the browser can automatically populate input elements. These settings will be ignored on any form elements if autocomplete is set on those elements directly.

  Values can include:

  • off
  • on

  Note: - Some browsers may ignore the off setting for login forms.

• enctype

  The enctype attribute specifies how to encode the form on submission for method="post" HTTP methods.

  Values can include:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

  These values can be overriden by the formenctype attributes on some elements, including <button>, <input type="submit">, or <input type="image">.

• method

  The method attribute specifies the HTTP method to use for form submission.

  Values can include:

  • get
  • post
  • dialog

  These values can be overriden by the formmethod attributes on some elements, including <button>, <input type="submit">, or <input type="image">.

• name

  The name attribute specifies the name of the form. It must be unique and not shared with any of the form elements.

• novalidate

  The novalidate attribute is a boolean that indicates whether the form should not be validated on submission. If the attribute is omitted, then validation is undertaken.

  It can be overriden by using the formnovalidate attribute on some individual elements within the form, including <button>, <input type="submit">, or <input type="image">.

• rel

  The rel attribute specifies the relationship between the two documents.

  Values can include:

  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
  • sponsored
  • ugc

• target

  The target attribute specifies how to open the linked document.

  Values can include:

  • _blank
  • _parent
  • _self
  • _top

Best Practices

• You can use the :valid and :invalid CSS pseudo-classes to style a <form> element based their validation state. For example:

  input:invalid {
    background-color: red;
  }
  input:valid {
    background-color: green;
  }

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile