HTMLFormElement

« DOM Reference

The HTMLFormElement interface provides methods to create and modify <form> elements; it inherits from properties and methods of the HTMLElement interface.

Properties

Inherits properties from its parent, HTMLElement.

Name Type Description
acceptCharset DOMString Reflects the accept-charset HTML attribute, containing a list of character encodings that the server accepts.
action DOMString Reflects the action HTML attribute, containing the URI of a program that processes the information submitted by the form.
autocomplete DOMString Reflects the autocomplete HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.
elements Read only HTMLFormControlsCollection All the form controls belonging to this form element.
encoding DOMString Synonym for enctype.
enctype DOMString Reflects the enctype HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.
length Read only long The number of controls in the form.
method DOMString Reflects the method HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
name DOMString Reflects the name HTML attribute, containing the name of the form.
noValidate Boolean Reflects the novalidate HTML attribute, indicating that the form should not be validated.
target DOMString Reflects the target HTML attribute, indicating where to display the results received from submitting the form.

Methods

Inherits methods from its parent, HTMLElement.

Name & Arguments Return Description

checkValidity()

Boolean Returns true if all controls that are subject to constraint validation satisfy their constraints, or false if some controls do not satisfy their constraints. Fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled.
item(in unsigned long index) HTML5 any Gets the item in the 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.
namedItem(in DOMString name) HTML5 any Gets the item or list of items in 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.
submit() void Submits the form to the server.
reset() void Resets the forms to its initial state.

Examples

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>

Submitting forms and uploading files using XMLHttpRequest

If you want to know how to serialize and submit a form using the XMLHttpRequest API, please read this paragraph.

Specifications

Specification Status Comment
WHATWG HTML Living Standard Living Standard No change from HTML5
HTML5 Candidate Recommendation The elements properties returns an HTMLFormControlsCollection instead of a raw HTMLCollection. This is mainly a technical change.
The following method has been added: checkValidity().
The following properties have been added: autocomplete, noValidate, and encoding.
Document Object Model (DOM) Level 2 HTML Specification Recommendation No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)

See also

  • The HTML element implementing this interface: <form>.

Document Tags and Contributors

Last updated by: kscarfone,