path: root/files/zh-cn/web/api/htmlformelement/index.html

---
title: HTMLFormElement
slug: Web/API/HTMLFormElement
translation_of: Web/API/HTMLFormElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p>HTMLFormElement接口可以创建或者修改{{HTMLElement("form")}}对象;它继承了{{domxref("HTMLElement")}}接口的方法和属性。</p>

<h2 id="属性">属性</h2>

<p><em>继承自父类的属性, {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.</dd>
 <dt>{{domxref("HTMLFormElement.action")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
 <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.</dd>
 <dt>{{domxref("HTMLFormElement.elements")}}<code><a href="/en/DOM/form.elements" title="en/DOM/form.elements"> </a></code>{{readonlyinline}}</dt>
 <dd>Returns a live {{domxref("HTMLFormControlsCollection")}} containing all the form controls belonging to this form element.</dd>
 <dt>{{domxref("HTMLFormElement.encoding")}}</dt>
 <dd>Is a synonym for <code>enctype</code>.</dd>
 <dt>{{domxref("HTMLFormElement.enctype")}}</dt>
 <dd>Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.</dd>
 <dt>{{domxref("HTMLFormElement.length")}} {{readonlyinline}}</dt>
 <dd>Returns a <code>long</code> that represents the number of controls in the form.</dd>
 <dt>{{domxref("HTMLFormElement.method")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
 <dt>{{domxref("HTMLFormElement.name")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
 <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
 <dd>Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating that the form should not be validated.</dd>
 <dt>{{domxref("HTMLFormElement.target")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>这个元素继承了 {{domxref("HTMLElement")}} 的属性。</em></p>

<dl>
 <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the element's child controls are subject to constraint validation and satify those contraints, <span style="line-height: 1.5;">or </span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;"> 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 <code style="font-style: normal; line-height: 1.5;">false</code>.</span></dd>
 <dt>{{domxref("HTMLFormElement.item()")}}</dt>
 <dd>Gets the item in the <code>elements</code> 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.</dd>
 <dt>{{domxref("HTMLFormElement.namedItem()")}}</dt>
 <dd>从元素集合中获取 <code>name</code> 或者 <code>id</code> 与指定名称匹配的项，没有匹配项则返回null。您也可以像调用数组那样用圆括号或方括号来指定名称， 而不必显式地调用这个方法。</dd>
 <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
 <dd>Submits the form to the server.</dd>
 <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
 <dd>Resets the forms to its initial state.</dd>
</dl>

<dl>
 <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
 <dd>Returns<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">true</code><span style="line-height: 1.5;"> if the element's child controls satisfy their validation constraints. </span><span style="line-height: 1.5;">When</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;"> is returned, cancelable</span><span style="line-height: 1.5;"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid" title="/en-US/docs/Web/Events/invalid">invalid</a></code> events are fired for each invalid child and validation problems are reported to the user.</span></dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>The following example shows how to create a new form element, modify its attributes and submit it.</p>

<pre class="brush: js">// 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();
</pre>

<p>In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.</p>

<pre class="brush: html">&lt;title&gt;Form example&lt;/title&gt;
&lt;script type="text/javascript"&gt;
  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";
  }
&lt;/script&gt;

&lt;h1&gt;Form  example&lt;/h1&gt;

&lt;form name="formA" id="formA"
 action="/cgi-bin/test" method="POST"&gt;
 &lt;p&gt;Click "Info" to see information about the form.
    Click set to change settings, then info again
    to see their effect&lt;/p&gt;
 &lt;p&gt;
  &lt;input type="button" value="info"
   onclick="getFormInfo();"&gt;
  &lt;input type="button" value="set"
   onclick="setFormInfo(this.form);"&gt;
  &lt;input type="reset" value="reset"&gt;
  &lt;br&gt;
  &lt;textarea id="tex" style="height:15em; width:20em"&gt;
  &lt;/textarea&gt;
 &lt;/p&gt;
&lt;/form&gt;
</pre>

<p>The following example shows how to submit a form in a <a href="/en-US/docs/DOM/window.open" title="/en-US/docs/DOM/window.open">popup window</a>.</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;MDN Example&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function popupSend (oFormElement) {
  if (oFormElement.method &amp;&amp; oFormElement.method.toLowerCase() !== "get") {
    alert("This script supports the GET method only.");
    return;
  }
  var oField, sFieldType, nFile, sSearch = "";
  for (var nItem = 0; nItem &lt; 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 &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
    } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
      sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
    }
  }
  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
}
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"&gt;
  &lt;p&gt;First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
  Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
  Password: &lt;input type="password" name="pwd" /&gt;&lt;br /&gt;
  &lt;input type="radio" name="sex" value="male" /&gt; Male &lt;input type="radio" name="sex" value="female" /&gt; Female&lt;/p&gt;
  &lt;p&gt;&lt;input type="checkbox" name="vehicle" value="Bike" /&gt;I have a bike&lt;br /&gt;
  &lt;input type="checkbox" name="vehicle" value="Car" /&gt;I have a car&lt;/p&gt;
  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>

<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3>

<p>If you want to know how to serialize and submit a form using the <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change.<br>
    The following method has been added: <code>checkValidity()</code>.<br>
    The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>No change from {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
</ul>