Your Search Results

HTMLFormElement

In This Article

Properties
Methods
Examples
1. Submitting forms and uploading files using XMLHttpRequest
Specifications
Browser compatibility
See also

Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!

Inheritance Hierarchy:
Node <== Element<== HTMLElement <== HTMLFormElement,
EventTarget <== HTMLFormElement

The HTMLFormElement interface provides methods to create and modify <form> elements.
document.forms - returns an array of HTMLFormElement objects referencing all forms on the page.
document.forms[index] - returns an HTMLFormElement object referencing the form at the specified index.
document.forms['id'] - returns an HTMLFormElement object referencing the form with the specified id.
document.forms['name'] - returns an HTMLFormElement object referencing the form with the specified name.

Properties

elements Read only	`HTMLFormControlsCollection:` Returns all form controls belonging to this form element.
length Read only	`long:` Returns the number of controls in the form.
name	`string:` Returns / Sets the value of the form's `name` HTML attribute, containing the name of the form.
method	`string:` Returns / Sets the value of the form's `method` HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
target	`string:` Returns / Sets the value of the form's `target` HTML attribute, indicating where to display the results received from submitting the form.
action	`string:` Returns / Sets the value of the form's `action` HTML attribute, containing the URI of a program that processes the information submitted by the form.
encoding OR enctype	`string:` Returns / Sets the value of the form's `enctype` HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.
acceptCharset	`string:` Returns / Sets the value of the form's `accept-charset` HTML attribute, representing the character encoding that the server accepts.
autocomplete	`string:` Returns / Sets the value of the form's `autocomplete` HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
noValidate	`boolean:` Returns / Sets the value of the form's `novalidate` HTML attribute, indicating whether the form should not be validated.

Methods

submit()	Submits the form to the server.
reset()	Resets the form to its initial state.
checkValidity()	`boolean:` Returns `true` if the element's child controls are subject to constraint validation and satisfy those contraints; returns `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. It is up to the programmer to decide how to respond to `false`.
reportValidity()	`boolean:` Returns `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.
requestAutocomplete()	Triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not `off` or `on`. The form will receive an event once the user has finished with the interface, the event will either be `autocomplete` when the fields have been filled or `autocompleteerror` when there was a problem.

Examples

Create a new form element, modify its attributes and submit it:

var f = document.createElement("form");// Create a form
document.body.appendChild(f);          // Add it to the document body
f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
f.method = "POST"
f.submit();                            // Call the form's submit method

Extract information from a form element and set some of its attributes:

<form name="formA" id="formA" action="/cgi-bin/test" method="POST">
 <p>Click "Info" for form details; "Set" to change settings.</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>

<script type="text/javascript">
  function getFormInfo(){
    var info;
    var f = document.forms["formA"]; //Get a reference to the form via id.
    info = "elements: " + f.elements     + "\n"
         + "length: "   + f.length       + "\n"
         + "name: "     + f.name         + "\n"
         + "charset: "  + f.acceptCharset+ "\n"
         + "action: "   + f.action       + "\n"
         + "enctype: "  + f.enctype      + "\n"
         + "encoding: " + f.encoding     + "\n"
         + "method: "   + f.method       + "\n"
         + "target: "   + f.target;
    document.forms["formA"].elements['tex'].value = info;
  }
  function setFormInfo(f){ //Argument is a reference to the form.
    f.method = "GET";
    f.action = "/cgi-bin/evil_executable.cgi";
    f.name   = "totally_new";
  }
</script>

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 The definition of 'HTMLFormElement' in that specification.	Living Standard	The following method has been added: `requestAutocomplete()`.
HTML5 The definition of 'HTMLFormElement' in that specification.	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 The definition of 'HTMLFormElement' in that specification.	Recommendation	No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLFormElement' in that specification.	Recommendation	Initial definition.

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)

Document Tags and Contributors

Tags:

Contributors to this page: Lcng, shtarbanov, slimsag, jonathanKingston, teoli, jpmedley, kscarfone, Sheppy, ethertank, fusionchess, jswisher, Brettz9, WEStafford, Mgjbot, Asztal, Takenbot, RobG, William E, GSchizas, Dria

Last updated by: Lcng, 29 ก.ย. 2016 19:39:19