files/en-us/web/html/reference/elements/form/index.md
The <form> HTML element represents a document section containing interactive controls for submitting information.
{{InteractiveExample("HTML Demo: <form>", "tabbed-standard")}}
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
form.form-example {
display: table;
}
div.form-example {
display: table-row;
}
label,
input {
display: table-cell;
margin-bottom: 10px;
}
label {
padding-right: 10px;
}
It is possible to use the {{cssxref(':valid')}} and {{cssxref(':invalid')}} CSS pseudo-classes to style a <form> element based on whether the {{domxref("HTMLFormElement.elements", "elements")}} inside the form are valid.
This element includes the global attributes.
accept {{deprecated_inline}}
: Comma-separated content types the server accepts.
[!NOTE] This attribute has been deprecated and should not be used. Instead, use the
acceptattribute on<input type=file>elements.
accept-charset
"UTF-8", reflecting the ubiquity of this encoding (historically multiple character encodings could be specified as a comma-separated or space-separated list).autocapitalize
autocapitalize global attribute page for more information.autocomplete attributes on form elements override it on <form>. Possible values:
off: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see Managing autofill for login fields.)on: The browser may automatically complete entries.name
form elements in the forms collection that it is in, if any. The name becomes a property of the {{domxref("Window")}}, {{domxref("Document")}}, and {{domxref("document.forms")}} objects, containing a reference to the form element.The following attributes control behavior during form submission.
action
formaction attribute on a {{HTMLElement("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 this if the form contains {{HTMLElement("input")}} elements with type=file.text/plain: Useful for debugging purposes.This value can be overridden by formenctype attributes on {{HTMLElement("button")}}, <input type="submit">, or <input type="image"> elements.
method
: The HTTP method to submit the form with. The only allowed methods/values are (case insensitive):
post: The {{HTTPMethod("POST")}} method; form data sent as the request body.get (default): The {{HTTPMethod("GET")}}; form data appended to the action URL with a ? separator. Use this method when the form has no side effects.dialog: When the form is inside a {{HTMLElement("dialog")}}, closes the dialog and causes a submit event to be fired on submission, without submitting data or clearing the form.This value is overridden by formmethod attributes on {{HTMLElement("button")}}, <input type="submit">, or <input type="image"> elements.
novalidate
formnovalidate attribute on a {{HTMLElement("button")}}, <input type="submit">, or <input type="image"> element belonging to the form.target
: Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe). The following keywords have special meanings:
_self (default): Load into the same browsing context as the current one._blank: Load into a new unnamed browsing context. This provides the same behavior as setting rel="noopener" which does not set window.opener._parent: Load into the parent browsing context of the current one. If no parent, behaves the same as _self._top: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as _self._unfencedTop: Load the response from a form inside an embedded fenced frame into the top-level frame (i.e., traversing beyond the root of the fenced frame, unlike other reserved destinations). Only available inside fenced frames.This value can be overridden by a formtarget attribute on a {{HTMLElement("button")}}, <input type="submit">, or <input type="image"> element.
<!-- Form which will send a GET request to the current URL -->
<form method="get">
<label>
Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>
<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>
Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset>
<legend>Do you agree to the terms?</legend>
<label><input type="radio" name="radio" value="yes" /> Yes</label>
<label><input type="radio" name="radio" value="no" /> No</label>
</fieldset>
</form>
{{EmbedLiveSample('Examples')}}
{{Specifications}}
{{Compat}}