HTML5 <form> Tag

The HTML <form> tag is used to represent a document section that contains interactive controls to submit information to a web server. You can use the :valid and :invalid CSS pseudo-classes to style a <form> element.

The only content permitted inside this element is flow content, the condition is that is should not contain other <form> elements. Both the starting and ending tag are mandatory for this element. The parent of the <form> tag can be any element that accepts flow content

The following style is applied to this element by default:

form {
  display: block;
  margin-top: 0em;
}

Here is an example of using this tag:

<form action="http://www.google.com/search" method="get">
  <label>Google: <input type="search" name="q"></label> 
  <input type="submit" value="Search...">
</form>

<form action="process.php" method="post">
  <label for="post-name">Name:</label>
  <input id="post-name" type="text">
  <fieldset>
    <legend>Family</legend>
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Yes, I am married.</label>
  </fieldset>
  <input type="submit" value="Submit Form">
</form>

Attributes

accept (HTML 4)

This attribute is used to provide a comma-separated list of content types that the server accepts. This attribute has been removed in HTML5 and should no longer be used. Instead, you should use the accept attribute of the specific <input> element.

accept-charset

This attribute is used to provide a space or comma delimited list of character encodings that the server accepts. The browser uses them in the order in which they are listed. The default value of this attribute is the reserved string “UNKNOWN”. It indicates the same encoding as that of the document containing the form element.

In previous versions of HTML, the different character encodings could be delimited by spaces or commas. In HTML5, only spaces are allowed as delimiters.

action

This attribute is used to specify the URI of a program that processes the form information. This value can be overridden by the formaction attribute on a <button> or <input> element.

autocapitalize

This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value for textual form control descendants should be automatically capitalized as it is entered/edited by the user. If the autocapitalize attribute is specified on an individual form control descendant, it will be given precedence over the form-wide autocapitalize setting. The non-deprecated values are available in iOS 5 and later. The default value is sentences. Possible values are:

  • none: This value will completely disable automatic capitalization
  • sentences: This value will automatically capitalize the first letter of sentences.
  • words: This value will automatically capitalize the first letter of words.
  • characters: This value will automatically capitalize all characters.
  • on: This value has been deprecated since iOS 5.
  • off: This value has been deprecated since iOS 5.

autocomplete HTML5

This attribute is used to indicate whether the values of various input elements should be automatically completed by the browser by default. This setting can be overridden by an autocomplete attribute on an element belonging to the form. Possible values are:

  • off: In this case, the user must explicitly enter a value into each field for every use. The document may also provide its own auto-completion method. However, the browser will not automatically complete the entries.
  • on: In this case, the browser can automatically complete values based on values that the user has previously entered in the form.

For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+) setting the autocomplete attribute will not prevent a browser’s password manager from asking the user if they want to store login fields (username and password), if the user permits the storage the browser will autofill the login the next time the user visits the page.

Please note that if you set autocomplete to off in a form because the document provides its own auto-completion, then you should also set autocomplete to off for each of the form’s input elements that the document can auto-complete. For details, see Google Chrome notes.

enctype

The value of this attribute comes int play when the value of the method attribute is post. This attrbiute defines the MIME type of content that is used to submit the form to the server. Possible values are:

  • application/x-www-form-urlencoded: The is used as the default value if the attribute is not specified.
  • multipart/form-data: The value is used for an <input> element with the type attribute set to "file".
  • text/plain (HTML5): This value can be overridden by a formenctype attribute on a <button> or <input> element.

method

This attribute determines the HTTP method that the browser uses to submit the form. Possible values are:

  • post: This value corresponds to the HTTP POST method. In this case, form data are included in the body of the form and sent to the server.
  • get: This value corresponds to the HTTP GET method. In this case, form data are appended to the action attribute URI with a ‘?’ as separator, and the resulting URI is sent to the server. You should use this method only when the form has no side-effects and contains only ASCII characters.

This value can be overridden by a formmethod attribute on a <button> or <input> element.

name

The attribute determines name of the form. In HTML 4, its use is deprecated (id should be used instead). In HTML5, it must be unique among the forms in a document and not just an empty string.

novalidate (HTML5)

This Boolean attribute is used to indicate that the form is not to be validated when submitted. When this attribute is not specified (and therefore the form is validated), this default setting can be overridden by a formnovalidate attribute on a <button> or <input> element belonging to the form.

target

A attribute is used to set a name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:

  • _self: This value will load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
  • _blank: This value will load the response into a new unnamed HTML 4 window or HTML5 browsing context.
  • _parent: This value will load the response into the HTML 4 frameset parent of the current frame, or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: In HTML4, this value will load the response into the full original window, and cancel all other frames.In HTML5, it will load the response into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
  • iframename: In this case, the response is displayed in a named <iframe>.

In HTML5, this value can be overridden by a formtarget attribute on a <button> or <input> element.

Examples

See the Pen HTML form Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <form> element on MDN.
  2. You can also read the HTML <form> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top