initial commit

14 files changed, 783 insertions, 0 deletions

diff --git a/files/ja/web/api/htmlformelement/acceptcharset/index.html b/files/ja/web/api/htmlformelement/acceptcharset/index.html
new file mode 100644
index 0000000000..44197e939c
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/acceptcharset/index.html
@@ -0,0 +1,27 @@
+---
+title: HTMLFormElement.acceptCharset
+slug: Web/API/HTMLFormElement/acceptCharset
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/acceptCharset
+---
+<div>
+ {{APIRef}}</div>
+<div>
+  </div>
+<div>
+ <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div>
+<p><code>acceptCharset</code> は対象フォームでサポートされる文字エンコーディングのリストを返します。リストの各アイテムは、カンマか半角スペースで区切られます。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><em>string</em> = form.acceptCharset;
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">inputs = document.forms["myform"].acceptCharset
+</pre>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset" title="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset">HTML 5, Section 4.10.3: The Form Element</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/action/index.html b/files/ja/web/api/htmlformelement/action/index.html
new file mode 100644
index 0000000000..5f9a231b02
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/action/index.html
@@ -0,0 +1,30 @@
+---
+title: HTMLFormElement.action
+slug: Web/API/HTMLFormElement/action
+tags:
+  - DOM
+  - Forms
+  - Reference
+translation_of: Web/API/HTMLFormElement/action
+---
+<h2 id="Summary" name="Summary">概要</h2>
+<p>{{HTMLElement("form")}} 要素の action を取得 / 設定します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>string</var> = form.action; //取得
+form.action = <var>string</var>; //設定
+</pre>
+
+
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">form.action = "/cgi-bin/publish";</pre>
+
+
+<h2 id="Notes" name="Notes">注記</h2>
+<p>フォームの action はフォームが投稿されたときサーバ上で実行されるプログラムです。このプロパティは読み書きともに可能です。</p>
+
+
+<h2 id="Specification" name="Specification">仕様</h2>
+<ul>
+  <li><a 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></li>
+  <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/elements/index.html b/files/ja/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..28511d8407
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,25 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>
+ {{ApiRef()}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><b>elements</b> は、form 要素に含まれるすべてのフォームコントロールを含む <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506"><code>HTMLCollection</code></a> を返します。</p>
+<p>index 、または要素の <a href="/ja/docs/DOM/element.name">name</a> か <a href="ja/docs/DOM/element.id">id</a> の何れかを使って個々の要素にアクセスすることができます。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><code><i>nodeList</i> =<i>HTMLFormElement</i>.elements</code></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/ja/web/api/htmlformelement/encoding/index.html b/files/ja/web/api/htmlformelement/encoding/index.html
new file mode 100644
index 0000000000..fc0a58923a
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/encoding/index.html
@@ -0,0 +1,12 @@
+---
+title: HTMLFormElement.encoding
+slug: Web/API/HTMLFormElement/encoding
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/encoding
+---
+<div>
+ {{ApiRef}}</div>
+<p><code>encoding</code> は、 DOM {{domxref("HTMLFormElement")}} オブジェクトの {{domxref("form.enctype","enctype")}} プロパティの別名です。</p>
diff --git a/files/ja/web/api/htmlformelement/enctype/index.html b/files/ja/web/api/htmlformelement/enctype/index.html
new file mode 100644
index 0000000000..4836b86aed
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/enctype/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.enctype
+slug: Web/API/HTMLFormElement/enctype
+tags:
+  - Reference
+  - form
+translation_of: Web/API/HTMLFormElement/enctype
+---
+<h2 id="Summary" name="Summary">概要</h2>
+<p><code>enctype</code> は form 要素のコンテンツタイプの取得 / 設定に用います。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>string</var> = form.enctype // 取得
+
+form.enctype = <var>string</var> // 設定
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var firstForm = document.getElementsByTagName("form")[0]; // 文書中の最初の form 要素を取得
+
+firstForm.enctype = "application/x-www-form-urlencoded"; // 設定
+alert( firstForm.enctype ); // 確認
+</pre>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>エンコーディングタイプは一般的に "application/x-www-form-urlencoded" となります。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+  <li><a 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></li>
+  <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/index.html b/files/ja/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..1cc72796ee
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/index.html
@@ -0,0 +1,266 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - Form Element
+  - Forms
+  - HTML DOM
+  - HTML forms
+  - HTMLFormElement
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <code><strong>HTMLFormElement</strong></code> インターフェイスは DOM 内で {{HTMLElement("form")}} 要素を表します。これは、フォームのコンポーネント要素へのアクセスだけでなく、フォームの様々な側面へのアクセスや、場合によっては変更を可能にします。</span></p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>このインターフェイスは親である {{domxref("HTMLElement")}} からプロパティを継承しています。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}</dt>
+ <dd>{{domxref("HTMLFormControlsCollection")}} で、このフォーム要素に所属するすべてのフォームコントロールを保持します。</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd><code>long</code> で、フォーム内のコントロールの数を反映します。</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("name", "form") }} 属性の値を反映し、フォームの名前を表します。</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("method", "form") }} 属性の値を反映し、フォームを送信するために使用する HTTP メソッドを示します。指定された値のみが設定できます。</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("target", "form") }} 属性の値を反映し、フォームを送信して受け取った結果を表示する場所を示します。</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("action", "form") }} 属性の値を反映し、フォームによって送信された情報を処理するプログラムの URI を示します。</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} または {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("enctype", "form") }} 属性の値を反映し、フォームをサーバーへ送信するのに使用するコンテンツの型を示します。指定された方のみが設定できます。二つのプロパティは別名です。</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("accept-charset", "form") }} 属性の値を反映し、サーバーが受け付ける文字エンコーディングを表します。</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("autocomplete", "form") }} 属性の値を反映し、ブラウザーが自動的にこのフォーム内のコントロールの値を生み出すことができるかどうかを示します。</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>{{jsxref("Boolean")}} で、フォームの {{ htmlattrxref("novalidate", "form") }} 属性の値を反映し、フォームの検証を行わないかどうかを示します。</dd>
+</dl>
+
+<p>名前の付いた入力欄がプロパティとしてオーナーのフォームのインスタンスに追加され、同じ名前のネイティブのプロパティがあると上書きしてしまいます (例えば、フォームに <code>action</code> という名前の入力欄がある場合、<code>action</code> プロパティはフォームの {{ htmlattrxref("action", "form") }} 属性ではなくその入力欄を返します)。</p>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>このインターフェイスは親である {{domxref("HTMLElement")}} からメソッドを継承しています。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}</dt>
+ <dd>この要素の子コントロールが<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>の対象となり、それらの制約を満たしている場合は <code>true</code> を返します。制約を満たさないコントロールがある場合は <code>false</code> を返します。制約を満たさないコントロールに対して、{{domxref("HTMLInputElement/invalid_event", "invalid")}} という名前のイベントを発生させます。イベントがキャンセルされない場合、そのようなコントロールは無効とみなされます。<code>false</code> にどう対応するかはプログラマ次第です。</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}</dt>
+ <dd>要素の子コントロールがその<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証する制約</a>を満たしている場合、<code>true</code> を返します。<code>false</code> が返された場合、無効な子要素それぞれにキャンセル可能な {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生し、検証上の問題がユーザーに報告されます。</dd>
+ <dt>{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}</dt>
+ <dd>指定された送信ボタンとそれに対応する設定を使用してフォームを送信するよう要求します。</dd>
+ <dt>{{domxref("HTMLFormElement.reset", "reset()")}}</dt>
+ <dd>フォームを初期状態にリセットします。</dd>
+ <dt>{{domxref("HTMLFormElement.submit", "submit()")}}</dt>
+ <dd>フォームをサーバーへ送信します。</dd>
+</dl>
+
+<h3 id="Deprecated_methods" name="Deprecated_methods">非推奨のメソッド</h3>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}</dt>
+ <dd>ネイティブのブラウザーインターフェイスを起動して、<a href="https://html.spec.whatwg.org/#autofill-field-name">自動補完フィールド名</a> の値が <code>off</code> または <code>on</code> ではないフィールドを補完してユーザーを支援します。ユーザーがインターフェイスの操作を終えると、フォームはフィールドが入力された場合は {{event("autocomplete")}}、問題があった場合は {{event("autocompleteerror")}} のいずれかのイベントを受け取ります。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<p>これらのイベントを待ち受けするには、<code>addEventListener()</code> を使用するか、このインターフェイスの <code>on<var>eventname</var></code> プロパティへイベントリスナーを代入するかしてください。</p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement/formdata_event", "formdata")}}</dt>
+ <dd><code>formdata</code> イベントは、フォームのデータを表す項目リストが構築されると発行されます。<br>
+ {{domxref("GlobalEventHandlers/onformdata", "onformdata")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLFormElement/reset_event", "reset")}}</dt>
+ <dd><code>reset</code> イベントはフォームがリセットされたときに発行されます。</dd>
+ <dd>{{domxref("GlobalEventHandlers/onreset", "onreset")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLFormElement/submit_event", "submit")}}</dt>
+ <dd><code>submit</code> イベントはフォームが送信されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onsubmit", "onsubmit")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<h3 id="Obtaining_a_form_element_object" name="Obtaining_a_form_element_object">フォーム要素オブジェクトの取得</h3>
+
+<p><code>HTMLFormElement</code> オブジェクトを取得するには、<a href="/ja/docs/Web/CSS/CSS_Selectors">CSS selector</a> と {{domxref("ParentNode.querySelector", "querySelector()")}}を使うか、document の {{domxref("Document.forms", "forms")}} プロパティを使ってすべてのフォームのリストを取得できます。</p>
+
+<p>{{domxref("Document.forms")}} は <code>HTMLFormElement</code> オブジェクトの配列、つまりそのページの各フォームの一覧を返します。個別のフォームを取得するには、下記の文法を使うことができます:</p>
+
+<dl>
+ <dt><code>document.forms[<var>index</var>]</code></dt>
+ <dd>フォーム配列の指定した <code><var>index</var></code> のフォームを返します。</dd>
+ <dt><code>document.forms[<var>id</var>]</code></dt>
+ <dd>ID が <code><var>id</var></code>であるフォームを返します。</dd>
+ <dt><code>document.forms[<var>name</var>]</code></dt>
+ <dd>{{domxref("Element.name", "name")}} 属性値が <code><var>name</var></code>であるフォームを返します。</dd>
+</dl>
+
+<h3 id="Accessing_the_forms_elements" name="Accessing_the_forms_elements">フォーム内の要素へのアクセス</h3>
+
+<p>フォームのデータを含む要素の一覧にアクセスするには、フォームの{{domxref("HTMLFormElement.elements", "elements")}} プロパティを調べることでできます。これはフォームのユーザーデータ入力要素の全一覧の{{domxref("HTMLFormControlsCollection")}} を返し、これには <code>&lt;form&gt;</code> の子孫と、<code>form</code> 属性を使ったフォームのメンバーからなるものの両方が返されます。</p>
+
+<p>フォームの要素を探すのに <code>form</code> のキーとして <code>name</code> 属性を使うこともできますが、 <code>elements</code> を使うのがより良い方法です—フォーム要素<em>のみ</em>を含み、<code>form</code>の他の属性と混合されることがないです。</p>
+
+<h3 id="Issues_with_Naming_Elements" name="Issues_with_Naming_Elements">要素の名前付けの問題</h3>
+
+<p>名前によっては JavaScript からのプロパティや要素のアクセスが干渉します。</p>
+
+<p>例えば、</p>
+
+<ul>
+ <li><code>&lt;input name="id"&gt;</code> は <code>&lt;form id="…"&gt;</code>に優先します。つまり <code>form.id</code> ではフォームのidを参照せずに、名前が "<code>id</code>"である要素を参照します。その他のプロパティも同様であり、例えば <code>&lt;input name="action"&gt;</code> や <code>&lt;input name="post"&gt;</code>もそうです。</li>
+ <li><code>&lt;input name="elements"&gt;</code> はフォーム <code>elements</code> のコレクションをアクセス不能にします。<code>form.elements</code> は個別の要素を参照します。</li>
+</ul>
+
+<p>要素名のこうした問題を避けるには:</p>
+
+<ul>
+ <li><em>常に</em> <code>elements</code> のコレクションを使って、要素名とフォームプロパティとのあいまいさを避けます。</li>
+ <li><em>決して</em>要素名に "<code>elements</code>" を使わない。</li>
+</ul>
+
+<p>JavaScript を使っていなければ、これは問題になりません。</p>
+
+<h3 id="Elements_that_are_considered_form_controls" name="Elements_that_are_considered_form_controls">フォームコントロールと見なされる要素</h3>
+
+<p>The elements included by <code>HTMLFormElement.elements</code> and <code>HTMLFormElement.length</code> are the following:</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is <code>"image"</code> are omitted for historical reasons)</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>No other elements are included in the list returned by <code>elements</code>, which makes it an excellent way to get at the elements most important when processing forms.</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>Creating a new form element, modifying its attributes, then submitting it:</p>
+
+<pre class="brush: js notranslate">const 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 <code>&lt;form&gt;</code> element and set some of its attributes:</p>
+
+<pre class="brush: html notranslate">&lt;form name="formA" action="/cgi-bin/test" method="post"&gt;
+ &lt;p&gt;Press "Info" for form details, or "Set" to change those details.&lt;/p&gt;
+ &lt;p&gt;
+  &lt;button type="button" onclick="getFormInfo();"&gt;Info&lt;/button&gt;
+  &lt;button type="button" onclick="setFormInfo(this.form);"&gt;Set&lt;/button&gt;
+  &lt;button type="reset"&gt;Reset&lt;/button&gt;
+ &lt;/p&gt;
+
+ &lt;textarea id="form-info" rows="15" cols="20"&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  function getFormInfo(){
+    // Get a reference to the form via its name
+    var f = document.forms["formA"];
+    // The form properties we're interested in
+    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    // Iterate over the properties, turning them into a string that we can display to the user
+    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
+
+    // Set the form's &lt;textarea&gt; to display the form's properties
+    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
+  }
+
+  function setFormInfo(f){ // Argument should be a form element reference.
+    f.action = "a-different-url.cgi";
+    f.name   = "a-different-name";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a <code>&lt;form&gt;</code> into a new window:</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"&gt;
+&lt;title&gt;Example new-window form submission&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;form action="test.php" target="_blank"&gt;
+  &lt;p&gt;&lt;label&gt;First name: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Last name: &lt;input type="text" name="lastname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;&lt;input type="password" name="pwd"&gt;&lt;/label&gt;&lt;/p&gt;
+
+  &lt;fieldset&gt;
+   &lt;legend&gt;Pet preference&lt;/legend&gt;
+
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="cat"&gt; Cat&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="dog"&gt; Dog&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;fieldset&gt;
+    &lt;legend&gt;Owned vehicles&lt;/legend&gt;
+
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest" name="Submitting_forms_and_uploading_files_using_XMLHttpRequest">XMLHttpRequest を使用したフォームの送信とファイルのアップロード</h3>
+
+<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>requestAutocomplete()</code> メソッドを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>elements プロパティが生の {{domxref("HTMLCollection")}} の代わりに {{domxref("HTMLFormControlsCollection")}} を返すようになった。これは主に技術的な変更。<code>checkValidity()</code> メソッドを追加。<code>autocomplete</code>, <code>noValidate</code>, <code>encoding</code> の各プロパティを追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.HTMLFormElement")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このインターフェイスを実装している HTML 要素: {{ HTMLElement("form") }}</li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/length/index.html b/files/ja/web/api/htmlformelement/length/index.html
new file mode 100644
index 0000000000..f079d6e63b
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/length/index.html
@@ -0,0 +1,25 @@
+---
+title: HTMLFormElement.length
+slug: Web/API/HTMLFormElement/length
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/length
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><code>length</code> は {{htmlelement("form")}} 要素内のフォームコントロールの数を返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>integer</var> = form.length
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">if (document.getElementById("form1").length &gt; 1) {
+  // more than one form control here
+}
+</pre>
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/method/index.html b/files/ja/web/api/htmlformelement/method/index.html
new file mode 100644
index 0000000000..3a92078c96
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/method/index.html
@@ -0,0 +1,29 @@
+---
+title: HTMLFormElement.method
+slug: Web/API/HTMLFormElement/method
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/method
+---
+<div>
+ {{APIRef}}</div>
+<div>
+  </div>
+<div>
+ <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div>
+<p><code>method</code> は、 フォーム送信時に使用する HTTPメソッドを取得 / 設定する。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>string</var> = form.method; //取得
+form.method = <var>string</var>; //設定
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var myform = document.forms["myform"];
+
+myform.method = "post";
+</pre>
+<h2 id="Specification" name="Specification">仕様</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/name/index.html b/files/ja/web/api/htmlformelement/name/index.html
new file mode 100644
index 0000000000..0ac7b00019
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/name/index.html
@@ -0,0 +1,29 @@
+---
+title: HTMLFormElement.name
+slug: Web/API/HTMLFormElement/name
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/name
+---
+<h2 id="Summary" name="Summary">概要</h2>
+<p>form の <code>name</code> 属性は、その <code>form</code> 要素の名前を文字列として返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><em>string</em> = form.name; //取得
+form.name = <em>string</em>; //設定</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var form1_Name = document.getElementById("form1").name;
+
+if (form1_Name != document.form.name) {
+   // browser doesn't support this form of reference
+}</pre>
+<h2 id="Notes" name="Notes">注意</h2>
+<p>この属性は読み書きともに可能であり、フォーム名の読取り及び設定に使用できます。</p>
+<p>もしフォーム内に "name" と名付けられた要素を含めてしまった場合、その要素が優先され、<code>name</code> 属性でのフォームオーナーへのアクセスが出来なくなってしまいます。</p>
+<p>Internet Explorer (IE) では、<code>createElement()</code> メソッドによって作成された要素に対する <code>name</code> 属性を用いての名前の設定 / 書換は許可されていません。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+  <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-name" title="http://www.w3.org/TR/html5/forms.html#dom-form-name">HTML5, Section 4.10.3, The form Element</a></li>
+  <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/reset/index.html b/files/ja/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..4c38250dde
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,26 @@
+---
+title: HTMLFormElement.reset
+slug: Web/API/HTMLFormElement/reset
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - form
+  - form Methods
+translation_of: Web/API/HTMLFormElement/reset
+---
+<h2 id="Summary" name="Summary">概要</h2>
+<p><code>reset</code> はフォームを初期状態にリセットします。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>HTMLFormElement</var>.reset()
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">document.forms["myform"].reset();
+</pre>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>このメソッドは、フォームのリセットボタン押下と同様の効果となります。</p>
+<p>もしフォームコントロール（※リセットボタンなど）の id 属性か name 属性の値に "<code>reset</code>" が指定されている場合、フォームの <code>reset</code> メソッドをマスキングしてしまうという点に注意して下さい。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+  <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677">DOM Level 2 HTML: reset</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/reset_event/index.html b/files/ja/web/api/htmlformelement/reset_event/index.html
new file mode 100644
index 0000000000..204cd3aa3f
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/reset_event/index.html
@@ -0,0 +1,111 @@
+---
+title: 'HTMLFormElement: reset イベント'
+slug: Web/API/HTMLFormElement/reset_event
+tags:
+  - API
+  - Event
+  - Forms
+  - HTML DOM
+  - HTMLFormElement
+  - Reference
+translation_of: Web/API/HTMLFormElement/reset_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>reset</code></strong> イベントは {{HTMLElement("form")}} がリセットされたときに発行されます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり (ただし、バブリングしない単純なイベントとして指定されている)</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers.onreset")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は {{domxref("EventTarget.addEventListener()")}} を使用してフォームがリセットされるのを、実行されたときに現在の {{domxref("Event.timeStamp")}} をログ出力します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form id="form"&gt;
+  &lt;label&gt;Test field: &lt;input type="text"&gt;&lt;/label&gt;
+  &lt;br&gt;&lt;br&gt;
+  &lt;button type="reset"&gt;Reset form&lt;/button&gt;
+&lt;/form&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function logReset(event) {
+  log.textContent = `Form reset! Time stamp: ${event.timeStamp}`;
+}
+
+const form = document.getElementById('form');
+const log = document.getElementById('log');
+form.addEventListener('reset', logReset);</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-reset", "reset")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "fullindex.html#eventdef-global-reset", "reset")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "fullindex.html#eventdef-global-reset", "reset")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "index.html#events-0", "reset")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.HTMLFormElement.reset_event")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML の {{HTMLElement("form")}} 要素</li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/submit/index.html b/files/ja/web/api/htmlformelement/submit/index.html
new file mode 100644
index 0000000000..744606cdcd
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/submit/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.submit
+slug: Web/API/HTMLFormElement/submit
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLFormElement/submit
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><code>submit</code> はフォームを送信します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>HTMLFormElement</var>.submit();
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">document.forms["myform"].submit()
+</pre>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>このメソッドはフォームの送信ボタンをクリックするのと同じ動作をします。</p>
+
+<p>Gecko ベースのアプリケーションからこのメソッドを呼び出すときに、フォームの <code>onsubmit</code> イベントハンドラ (例 : <code>onsubmit="return false;"</code>) はトリガされません。一般的に、ユーザエージェントによる呼び出しは保証されていません (※参照 : <a href="http://lists.w3.org/Archives/Public/www-dom/2012JanMar/0011.html" title="http://lists.w3.org/Archives/Public/www-dom/2012JanMar/0011.html">http://lists.w3.org/Archives/Public/www-dom/2012JanMar/0011.html</a>)</p>
+<p>もしフォームコントロール (送信ボタン等) の <code>name</code> 属性か <code>id</code> 属性の属性値に "<code>submit</code>" が設定されていた場合、フォームの <code>submit</code> メソッドはマスキングされてしまいます。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676">DOM Level 2 HTML: submit</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/submit_event/index.html b/files/ja/web/api/htmlformelement/submit_event/index.html
new file mode 100644
index 0000000000..bddb3e649c
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/submit_event/index.html
@@ -0,0 +1,124 @@
+---
+title: 'HTMLFormElement: submit イベント'
+slug: Web/API/HTMLFormElement/submit_event
+tags:
+  - Event
+  - Forms
+  - HTML DOM
+  - HTMLFormElement
+  - Reference
+  - events
+  - submit
+  - イベント
+  - フォーム
+translation_of: Web/API/HTMLFormElement/submit_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>submit</code></strong> イベントは {{HtmlElement("form")}} が送信されたときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり (ただし、バブリングしない単純なイベントとして指定されている)</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{DOMxRef("SubmitEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers.onsubmit")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>submit</code> イベントは <code>&lt;form&gt;</code> 要素自身で発生するものであり、その中の {{HtmlElement("button")}} や {{HtmlElement('input/submit', '&lt;input type="submit"&gt;')}} で発生するものではないことに注意してください。しかし、フォームの送信が起動されたことを示すために送信される {{domxref("SubmitEvent")}} には、送信リクエストがどのボタンで起動されたかを {{domxref("SubmitEvent.submitter", "submitter")}} プロパティが含まれています。</p>
+
+<p><code>submit</code> イベントは、ユーザーが送信ボタン ({{HtmlElement("button")}} または {{HtmlElement('input/submit', '&lt;input type="submit"&gt;')}}) を押したり、 <kbd>Enter</kbd> キーをフォーム内のフィールド (例えば {{HtmlElement('input/text', '&lt;input type="text"&gt;')}}) の編集中に押したりしたときに発生します。このイベントは {{domxref("HTMLFormElement.submit()", "form.submit()")}} メソッドを呼び出した場合には送信されません。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> <a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームの検証</a>に合格していないフォームを送信しようとすると、 {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生します。この場合、フォーム検証が送信を阻止しますので、 <code>submit</code> イベントは発生しません。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は {{domxref("EventTarget.addEventListener()")}} を使用してフォームの送信を待受けし、実行されたときに現在の {{domxref("Event.timeStamp")}} をログ出力し、それからフォームを送信する既定の動作を阻止します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form id="form"&gt;
+  &lt;label&gt;Test field: &lt;input type="text"&gt;&lt;/label&gt;
+  &lt;br&gt;&lt;br&gt;
+  &lt;button type="submit"&gt;Submit form&lt;/button&gt;
+&lt;/form&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function logSubmit(event) {
+  log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
+  event.preventDefault();
+}
+
+const form = document.getElementById('form');
+const log = document.getElementById('log');
+form.addEventListener('submit', logSubmit);</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-submit", "submit")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "fullindex.html#eventdef-global-submit", "submit")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "fullindex.html#eventdef-global-submit", "submit")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "index.html#events-0", "submit")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.HTMLFormElement.submit_event")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML の {{HtmlElement("form")}} 要素</li>
+ <li>関連イベント: {{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/target/index.html b/files/ja/web/api/htmlformelement/target/index.html
new file mode 100644
index 0000000000..64fce37630
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/target/index.html
@@ -0,0 +1,23 @@
+---
+title: HTMLFormElement.target
+slug: Web/API/HTMLFormElement/target
+tags:
+  - Reference
+  - form
+translation_of: Web/API/HTMLFormElement/target
+---
+<h2 id="Summary" name="Summary">概要</h2>
+<p>フォームのアクションの対象を取得 / 設定します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>string</var> = form.target // 取得
+
+form.target = <var>string</var> // 設定</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">myForm.target = document.frames[1].name;
+// フレームセット中の 2 番目のフレームを myForm の操作対象に設定
+</pre>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+  <li><a 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></li>
+  <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></li>
+</ul>