diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/htmlformelement | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/htmlformelement')
9 files changed, 590 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlformelement/action/index.html b/files/zh-cn/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..32519d4be0 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/action/index.html @@ -0,0 +1,31 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +tags: + - API + - DOM节点 + - HTML表单元素 + - 表单 +translation_of: Web/API/HTMLFormElement/action +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLFormElement.action</code></strong> 这个js语句能够定义一个{{HTMLElement("form")}}元素中的action属性</p> + +<p>表单的action属性是在服务器上提交表单,这个属性可以被检索或者设置。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>string</em> = form.action +form.action = <em>string </em> +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<p>form.action = "/cgi-bin/publish";</p> + +<h2 id="Specification" name="Specification">详细说明</h2> + +<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p> diff --git a/files/zh-cn/web/api/htmlformelement/elements/index.html b/files/zh-cn/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..ebb26003b0 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/elements/index.html @@ -0,0 +1,22 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +<div> + <span style="font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 30px;">小结</span></div> +<p><strong>elements</strong> 返回一个 {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) 其中包含FORM的所有控件。需要注意的是,其中不包括<code><code style="font-size: 14px;">type等于</code></code><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">image的</span><code style="font-size: 14px;"><a href="/en-US/docs/HTML/Element/Input" title="input">input</a></code><span style="line-height: 1.5;"> 元素。</span></p> +<p>你可以通过 <a href="/en-US/docs/DOM/element.name" title="DOM/element.name">name</a> 或 <a href="/en-US/docs/DOM/element.id" title="DOM/element.id">id</a>来访问对应的控件。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements +</pre> +<h2 id="Example" name="Example">实例</h2> +<pre class="brush:js">var inputs = document.getElementById("form1").elements; +var inputByIndex = inputs[2]; +var inputByName = inputs["login"]; +</pre> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-elements" title="http://www.w3.org/TR/html5/forms.html#dom-form-elements">HTML5, Section 4.10.3, The form Element</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">DOM Level 2 HTML: elements</a></li> +</ul> diff --git a/files/zh-cn/web/api/htmlformelement/enctype/index.html b/files/zh-cn/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..5610bf464a --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,32 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +translation_of: Web/API/HTMLFormElement/enctype +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>HTMLFormElement.enctype</strong></code> 属性常用来指明提交表单的内容类型,可选的值如下:</p> + +<ul> + <li><code>application/x-www-form-urlencoded</code>: 初始的默认值</li> + <li><code>multipart/form-data</code>: 适用于使用{{HTMLElement("input")}} 标签上传文件</li> + <li><code>text/plain</code>: HTML5 引入的类型</li> +</ul> + +<p>这些值可以通过元素 {{HTMLElement("button")}} or {{HTMLElement("input")}} 的属性form.enctype来改写</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval notranslate"><em>string</em> = form.enctype +form.enctype = <em>string</em> +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="eval notranslate">form.enctype = "application/x-www-form-urlencoded";</pre> + +<h2 id="Specification" name="Specification">参考</h2> + +<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#attr-fs-enctype" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p> diff --git a/files/zh-cn/web/api/htmlformelement/index.html b/files/zh-cn/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..e1ae86c048 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/index.html @@ -0,0 +1,266 @@ +--- +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"><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> +</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"><!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></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> diff --git a/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html b/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html new file mode 100644 index 0000000000..96de470bf2 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLFormElement.reportValidity() +slug: Web/API/HTMLFormElement/reportValidity +translation_of: Web/API/HTMLFormElement/reportValidity +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>方法 <strong><code>HTMLFormElement.reportValidity()</code></strong> 返回布尔值,如果form表单的子表单控件满足验证限制条件,则该方法返回 <code>true</code> ,否则返回<code>false</code>。当返回 <code>false</code> 时, 每个不合法的子控件的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid">invalid</a></code> 事件将会被触发,并且验证中存在的问题会报告该用户。 </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>HTMLFormElement</em>.reportValidity() +</pre> + +<h3 id="Return_value">Return value</h3> + +<p>{{domxref("布尔")}}</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">document.forms['myform'].addEventListener('invalid', function() { + // Optional response here +}, false); + +document.forms['myform'].addEventListener('submit', function() { + document.forms['myform'].reportValidity(); +}, false);</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLFormElement.reportValidity")}}</p> diff --git a/files/zh-cn/web/api/htmlformelement/reset/index.html b/files/zh-cn/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..6cbcf70c61 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/reset/index.html @@ -0,0 +1,19 @@ +--- +title: form.reset +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><code>reset</code> 方法可以重置一个表单内的所有表单控件的值到初始状态.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>HTMLFormElement</em>.reset() +</pre> +<h3 id="Example" name="Example">例子</h3> +<pre class="eval">document.forms["myform"].reset(); +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p>运行该方法和点击表单的重置按钮是一样的效果.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677">DOM Level 2 HTML: reset</a></p> +<p>{{ languages( {"pl": "pl/DOM/form.reset" ,"en": "en/DOM/form.reset" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlformelement/reset_event/index.html b/files/zh-cn/web/api/htmlformelement/reset_event/index.html new file mode 100644 index 0000000000..bc9c2c01b5 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/reset_event/index.html @@ -0,0 +1,57 @@ +--- +title: reset +slug: Web/API/HTMLFormElement/reset_event +translation_of: Web/API/HTMLFormElement/reset_event +--- +<p>当表单被重置时触发<code>reset</code>事件。</p> + +<h2 id="综合信息">综合信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/indices.html#event-reset">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">是(可以指定不发生冒泡的简单事件)</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">重置父表单元素所有的值。</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件的目标(DOM树最顶端的元素)。</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件的类型。</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>是否指定事件冒泡。</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可以被取消。</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/htmlformelement/submit/index.html b/files/zh-cn/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..7e13885446 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/submit/index.html @@ -0,0 +1,42 @@ +--- +title: form.submit +slug: Web/API/HTMLFormElement/submit +tags: + - API + - HTML DOM + - 参考 + - 方法 + - 表单元素 +translation_of: Web/API/HTMLFormElement/submit +--- +<p>{{ ApiRef() }}</p> + +<p> <strong><code>HTMLFormElement.submit()</code></strong>用来提交表单。</p> + +<p>这个方法和触发提交表单按钮很类似,但有所不同:</p> + +<ul> + <li>No {{event("submit")}} event is raised. In particular, the form's {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} event handler is not run.</li> + <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a> is not triggered.</li> +</ul> + +<p>如果一个表单控件(比如一个提交按钮)的 <code>name</code> 或 <code>id</code> 的值为 <code>submit</code>,则它将覆盖表单的 submit 方法.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>HTMLFormElement</em>.submit()</pre> + +<h2 id="例子">例子</h2> + +<pre class="brush: js notranslate">document.forms["myform"].submit(); +</pre> + +<h2 id="规范">规范</h2> + +<p><a href="https://html.spec.whatwg.org/multipage/forms.html#the-form-element">HTML Living standard: The form element</a></p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLFormElement.submit")}}</p> diff --git a/files/zh-cn/web/api/htmlformelement/submit_event/index.html b/files/zh-cn/web/api/htmlformelement/submit_event/index.html new file mode 100644 index 0000000000..38df1007d4 --- /dev/null +++ b/files/zh-cn/web/api/htmlformelement/submit_event/index.html @@ -0,0 +1,64 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event +tags: + - 事件 + - 表单 + - 表单事件 + - 表单提交事件 +translation_of: Web/API/HTMLFormElement/submit_event +--- +<p>当表单提交的时候触发submit事件</p> + +<p>注意submit事件只能作用于form元素,不能作用于button或者<input type="submit"></p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes (although specified as a simple event that doesn't bubble)</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Varies (send the content of the form to the server).</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> |
