initial commit

2 files changed, 305 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/htmlformelement/index.html b/files/zh-tw/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..614eebbad2
--- /dev/null
+++ b/files/zh-tw/web/api/htmlformelement/index.html
@@ -0,0 +1,245 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLFormElement</code></strong> 介面提供了建立及修改 {{HTMLElement("form")}} 元素的方法。<br>
+ <strong>document.forms</strong> - returns an array of HTMLFormElement objects referencing all forms on the page.<br>
+ <strong>document.forms[index] </strong>- returns an HTMLFormElement object referencing the form at the specified index.<br>
+ <strong>document.forms['id'] </strong>- returns an HTMLFormElement object referencing the form with the specified id.<br>
+ <strong>document.forms['name'] </strong>- returns an HTMLFormElement object referencing the form with the specified name.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>A <code>long</code> reflecting the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ 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. The two methods are synonyms.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>Resets the form to its initial state.</dd>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls are subject to constraint validation and satisfy those contraints; returns <code>false</code> 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>false</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls satisfy their validation constraints. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}}</dt>
+ <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>Create a new form element, modify its attributes and submit it:</p>
+
+<pre class="brush: js">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
+</pre>
+
+<p>Extract information from a form element and set some of its attributes:</p>
+
+<pre class="brush: html">&lt;form name="formA" id="formA" action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Click "Info" for form details; "Set" to change settings.&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;
+
+&lt;script type="text/javascript"&gt;
+  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";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a form in a <a href="/en-US/docs/Web/API/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") {
+    console.error("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="使用_XMLHttpRequest_提交表單及上傳檔案">使用 <code>XMLHttpRequest</code> 提交表單及上傳檔案</h3>
+
+<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="規範">規範</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>The following method has been added: <code>requestAutocomplete()</code>.</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. The following method has been added: <code>checkValidity()</code>. 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</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="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</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>{{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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlformelement/submit_event/index.html b/files/zh-tw/web/api/htmlformelement/submit_event/index.html
new file mode 100644
index 0000000000..6c5b030f7c
--- /dev/null
+++ b/files/zh-tw/web/api/htmlformelement/submit_event/index.html
@@ -0,0 +1,60 @@
+---
+title: submit
+slug: Web/API/HTMLFormElement/submit_event
+translation_of: Web/API/HTMLFormElement/submit_event
+---
+<p><code>submit</code> 事件會在表單送出時觸發。</p>
+
+<p>要注意的是，<code>submit</code> 事件<strong>只會</strong>在 <a href="/en-US/docs/Web/HTML/Element/form">form element</a> 上觸發， <a href="/en-US/docs/Web/HTML/Element/button">button</a> 或是 <a href="/en-US/docs/Web/HTML/Element/input">submit input</a> 則不會觸發。（送出的是「表單」，而非「按鈕」）</p>
+
+<h2 id="基本資料">基本資料</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">定義規範</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;">是 <br>
+ 雖說在規範上這是個不 bubble 的事件</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>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>