The HTMLFormElement interface provides methods to create and modify {{HTMLElement("form")}} elements; it inherits from properties and methods of the {{domxref("HTMLElement")}} interface.
Inherits properties from its parent, {{domxref("HTMLElement")}}.
{{readonlyinline}}enctype.long that represents the number of controls in the form.Inherits methods from its parent, {{domxref("HTMLElement")}}.
true if the element's child controls are subject to constraint validation and satify those contraints, or false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.elements collection at the specified index, or null if there is no item at that index. You can also specify the index in array-style brackets or parentheses after the form object name, without calling this method explicitly.elements collection whose name or id match the specified name, or null if no items match. You can also specify the name in array-style brackets or parentheses after the form object name, without calling this method explicitly.true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.The following example shows how to create a new form element, modify its attributes and submit it.
// Create a form
var f = document.createElement("form");
// Add it to the document body
document.body.appendChild(f);
// Add action and method attributes
f.action = "/cgi-bin/some.cgi";
f.method = "POST"
// Call the form's submit method
f.submit();
In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.
<title>Form example</title>
<script type="text/javascript">
function getFormInfo() {
var info;
// Get a reference using the forms collection
var f = document.forms["formA"];
info = "f.elements: " + f.elements + "\n"
+ "f.length: " + f.length + "\n"
+ "f.name: " + f.name + "\n"
+ "f.acceptCharset: " + f.acceptCharset + "\n"
+ "f.action: " + f.action + "\n"
+ "f.enctype: " + f.enctype + "\n"
+ "f.encoding: " + f.encoding + "\n"
+ "f.method: " + f.method + "\n"
+ "f.target: " + f.target;
document.forms["formA"].elements['tex'].value = info;
}
// A reference to the form is passed from the
// button's onclick attribute using 'this.form'
function setFormInfo(f) {
f.method = "GET";
f.action = "/cgi-bin/evil_executable.cgi";
f.name = "totally_new";
}
</script>
<h1>Form example</h1>
<form name="formA" id="formA"
action="/cgi-bin/test" method="POST">
<p>Click "Info" to see information about the form.
Click set to change settings, then info again
to see their effect</p>
<p>
<input type="button" value="info"
onclick="getFormInfo();">
<input type="button" value="set"
onclick="setFormInfo(this.form);">
<input type="reset" value="reset">
<br>
<textarea id="tex" style="height:15em; width:20em">
</textarea>
</p>
</form>
The following example shows how to submit a form in a popup window.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
function popupSend (oFormElement) {
if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
alert("This script supports the GET method only.");
return;
}
var oField, sFieldType, nFile, sSearch = "";
for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
oField = oFormElement.elements[nItem];
if (!oField.hasAttribute("name")) { continue; }
sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
if (sFieldType === "FILE") {
for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
} else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
}
}
open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
}
</script>
</head>
<body>
<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
<p>First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
Password: <input type="password" name="pwd" /><br />
<input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
<p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" />I have a car</p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
XMLHttpRequestIf you want to know how to serialize and submit a form using the XMLHttpRequest API, please read this paragraph.
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}} | {{Spec2('HTML WHATWG')}} | No change from {{SpecName("HTML5 W3C")}} |
| {{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}} | {{Spec2('HTML5 W3C')}} | The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: checkValidity().The following properties have been added: autocomplete, noValidate, and encoding. |
| {{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}} | {{Spec2('DOM2 HTML')}} | No change from {{SpecName("DOM1")}}. |
| {{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}} | {{Spec2('DOM1')}} | Initial definition. |
{{Compat}}