diff --git a/files/ja/web/api/htmlformelement/acceptcharset/index.md b/files/ja/web/api/htmlformelement/acceptcharset/index.md index adb1ccf6eca61c..f64f1261ce3510 100644 --- a/files/ja/web/api/htmlformelement/acceptcharset/index.md +++ b/files/ja/web/api/htmlformelement/acceptcharset/index.md @@ -7,21 +7,23 @@ tags: - Gecko DOM Reference translation_of: Web/API/HTMLFormElement/acceptCharset --- -
- {{APIRef}}
-
-
-
- 概要
-

acceptCharset は対象フォームでサポートされる文字エンコーディングのリストを返します。リストの各アイテムは、カンマか半角スペースで区切られます。

-

構文

-
string = form.acceptCharset;
-
-

例

-
inputs = document.forms["myform"].acceptCharset
-
-

仕様書

- +{{APIRef}}概要 + +`acceptCharset` は対象フォームでサポートされる文字エンコーディングのリストを返します。リストの各アイテムは、カンマか半角スペースで区切られます。 + +## 構文 + +``` +string = form.acceptCharset; +``` + +## 例 + +```js +inputs = document.forms["myform"].acceptCharset +``` + +## 仕様書 + +- [HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) +- [DOM Level 2 HTML: acceptCharset](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795) diff --git a/files/ja/web/api/htmlformelement/action/index.md b/files/ja/web/api/htmlformelement/action/index.md index b1239ad50cde9b..398f3b5b0c38be 100644 --- a/files/ja/web/api/htmlformelement/action/index.md +++ b/files/ja/web/api/htmlformelement/action/index.md @@ -7,24 +7,28 @@ tags: - Reference translation_of: Web/API/HTMLFormElement/action --- -

概要

-

{{HTMLElement("form")}} 要素の action を取得 / 設定します。

-

構文

-
string = form.action; //取得
-form.action = string; //設定
-
+## 概要 +{{HTMLElement("form")}} 要素の action を取得 / 設定します。 -

例

-
form.action = "/cgi-bin/publish";
+## 構文 +``` +string = form.action; //取得 +form.action = string; //設定 +``` -

注記

-

フォームの action はフォームが投稿されたときサーバ上で実行されるプログラムです。このプロパティは読み書きともに可能です。

+## 例 +```js +form.action = "/cgi-bin/publish"; +``` -

仕様

- +## 注記 + +フォームの action はフォームが投稿されたときサーバ上で実行されるプログラムです。このプロパティは読み書きともに可能です。 + +## 仕様 + +- [HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method) +- [DOM Level 2 HTML: action](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184) diff --git a/files/ja/web/api/htmlformelement/elements/index.md b/files/ja/web/api/htmlformelement/elements/index.md index a52442f8f5d452..ff9819d8039e1d 100644 --- a/files/ja/web/api/htmlformelement/elements/index.md +++ b/files/ja/web/api/htmlformelement/elements/index.md @@ -7,19 +7,29 @@ tags: - Gecko DOM Reference translation_of: Web/API/HTMLFormElement/elements --- -
- {{ApiRef()}}
-

概要

-

elements は、form 要素に含まれるすべてのフォームコントロールを含む HTMLCollection を返します。

-

index 、または要素の name か id の何れかを使って個々の要素にアクセスすることができます。

-

構文

-
nodeList =HTMLFormElement.elements
-

例

-
var inputs = document.getElementById("form1").elements;
+{{ApiRef()}}
+
+## 概要
+
+**elements** は、form 要素に含まれるすべてのフォームコントロールを含む [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506) を返します。
+
+index 、または要素の [name](/ja/docs/DOM/element.name) か [id](/ja/docs/DOM/element.id) の何れかを使って個々の要素にアクセスすることができます。
+
+## 構文
+
+```
+nodeList =HTMLFormElement.elements
+```
+
+## 例
+
+```js
+var inputs = document.getElementById("form1").elements;
 var inputByIndex = inputs[2];
-var inputByName = inputs["login"];
-

仕様書

- +var inputByName = inputs["login"]; +``` + +## 仕様書 + +- [HTML5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-elements) +- [DOM Level 2 HTML: elements](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479) diff --git a/files/ja/web/api/htmlformelement/encoding/index.md b/files/ja/web/api/htmlformelement/encoding/index.md index fc0a58923ad545..b0541743ad82d6 100644 --- a/files/ja/web/api/htmlformelement/encoding/index.md +++ b/files/ja/web/api/htmlformelement/encoding/index.md @@ -7,6 +7,6 @@ tags: - Gecko DOM Reference translation_of: Web/API/HTMLFormElement/encoding --- -
- {{ApiRef}}
-

encoding は、 DOM {{domxref("HTMLFormElement")}} オブジェクトの {{domxref("form.enctype","enctype")}} プロパティの別名です。

+{{ApiRef}} + +`encoding` は、 DOM {{domxref("HTMLFormElement")}} オブジェクトの {{domxref("form.enctype","enctype")}} プロパティの別名です。 diff --git a/files/ja/web/api/htmlformelement/enctype/index.md b/files/ja/web/api/htmlformelement/enctype/index.md index b3bf6371fa7bd2..aa381aca25cd71 100644 --- a/files/ja/web/api/htmlformelement/enctype/index.md +++ b/files/ja/web/api/htmlformelement/enctype/index.md @@ -6,23 +6,32 @@ tags: - form translation_of: Web/API/HTMLFormElement/enctype --- -

概要

-

enctype は form 要素のコンテンツタイプの取得 / 設定に用います。

-

構文

-
string = form.enctype // 取得
+## 概要
 
-form.enctype = string // 設定
-
-

例

-
var firstForm = document.getElementsByTagName("form")[0]; // 文書中の最初の form 要素を取得
+`enctype` は form 要素のコンテンツタイプの取得 / 設定に用います。
+
+## 構文
+
+```
+string = form.enctype // 取得
+
+form.enctype = string // 設定
+```
+
+## 例
+
+```js
+var firstForm = document.getElementsByTagName("form")[0]; // 文書中の最初の form 要素を取得
 
 firstForm.enctype = "application/x-www-form-urlencoded"; // 設定
 alert( firstForm.enctype ); // 確認
-
-

注記

-

エンコーディングタイプは一般的に "application/x-www-form-urlencoded" となります。

-

仕様書

- +``` + +## 注記 + +エンコーディングタイプは一般的に "application/x-www-form-urlencoded" となります。 + +## 仕様書 + +- [HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method) +- [DOM Level 2 HTML: enctype](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810) diff --git a/files/ja/web/api/htmlformelement/formdata_event/index.md b/files/ja/web/api/htmlformelement/formdata_event/index.md index 1d63da98896ca0..0d7fdb10d967b7 100644 --- a/files/ja/web/api/htmlformelement/formdata_event/index.md +++ b/files/ja/web/api/htmlformelement/formdata_event/index.md @@ -6,45 +6,46 @@ tags: - Forms - Reference - formevent -browser-compat: api.HTMLFormElement.formdata_event translation_of: Web/API/HTMLFormElement/formdata_event +browser-compat: api.HTMLFormElement.formdata_event --- -
{{APIRef}}
+{{APIRef}} -

formdata イベントは、フォームのデータを表すエントリーリストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。

+**`formdata`** イベントは、フォームのデータを表すエントリーリストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。 -

一般情報

+## 一般情報 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("FormDataEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onformdata")}}
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("FormDataEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onformdata")}}
-

例

+## 例 -
// フォームの参照を得る
+```js
+// フォームの参照を得る
 
 const formElem = document.querySelector('form');
 
 // submit ハンドラー
 
-formElem.addEventListener('submit', (e) => {
+formElem.addEventListener('submit', (e) => {
   // フォームの送信時、既定の動作を抑止
   e.preventDefault();
 
@@ -54,7 +55,7 @@ formElem.addEventListener('submit', (e) => {
 
 // データを受け取るための formdata ハンドラー
 
-formElem.addEventListener('formdata', (e) => {
+formElem.addEventListener('formdata', (e) => {
   console.log('formdata fired');
 
   // イベントオブジェクトからフォームデータを取得する
@@ -67,11 +68,13 @@ formElem.addEventListener('formdata', (e) => {
   var request = new XMLHttpRequest();
   request.open("POST", "/formHandler");
   request.send(data);
-});
+}); +``` -

onformdata 版はこのようになります。

+`onformdata` 版はこのようになります。 -
formElem.onformdata = (e) => {
+```js
+formElem.onformdata = (e) => {
   console.log('formdata fired');
 
   // イベントオブジェクトからフォームデータを取得する
@@ -84,19 +87,18 @@ formElem.addEventListener('formdata', (e) => {
   var request = new XMLHttpRequest();
   request.open("POST", "/formHandler");
   request.send(data);
-};
+}; +``` -

仕様書

+## 仕様書 {{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat}}

+{{Compat}} -

関連情報

+## 関連情報 - +- HTML の {{htmlElement("form")}} 要素 +- {{domxref("FormDataEvent")}} diff --git a/files/ja/web/api/htmlformelement/index.md b/files/ja/web/api/htmlformelement/index.md index 9990b4ba558d71..c4edf882b716d3 100644 --- a/files/ja/web/api/htmlformelement/index.md +++ b/files/ja/web/api/htmlformelement/index.md @@ -12,165 +12,151 @@ tags: - Reference translation_of: Web/API/HTMLFormElement --- -
{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}} -

The HTMLFormElement インターフェイスは DOM 内で {{HTMLElement("form")}} 要素を表します。これは、フォームのコンポーネント要素へのアクセスだけでなく、フォームの様々な側面へのアクセスや、場合によっては変更を可能にします。

+The **`HTMLFormElement`** インターフェイスは DOM 内で {{HTMLElement("form")}} 要素を表します。これは、フォームのコンポーネント要素へのアクセスだけでなく、フォームの様々な側面へのアクセスや、場合によっては変更を可能にします。 -

{{InheritanceDiagram(600,120)}}

+{{InheritanceDiagram(600,120)}} -

プロパティ

- -

このインターフェイスは親である {{domxref("HTMLElement")}} からプロパティを継承しています。

+## プロパティ -
-
{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}
-
{{domxref("HTMLFormControlsCollection")}} で、このフォーム要素に所属するすべてのフォームコントロールを保持します。
-
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
-
long で、フォーム内のコントロールの数を反映します。
-
{{domxref("HTMLFormElement.name")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("name", "form") }} 属性の値を反映し、フォームの名前を表します。
-
{{domxref("HTMLFormElement.method")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("method", "form") }} 属性の値を反映し、フォームを送信するために使用する HTTP メソッドを示します。指定された値のみが設定できます。
-
{{domxref("HTMLFormElement.target")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("target", "form") }} 属性の値を反映し、フォームを送信して受け取った結果を表示する場所を示します。
-
{{domxref("HTMLFormElement.action")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("action", "form") }} 属性の値を反映し、フォームによって送信された情報を処理するプログラムの URI を示します。
-
{{domxref("HTMLFormElement.encoding")}} または {{domxref("HTMLFormElement.enctype")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("enctype", "form") }} 属性の値を反映し、フォームをサーバーへ送信するのに使用するコンテンツの型を示します。指定された方のみが設定できます。二つのプロパティは別名です。
-
{{domxref("HTMLFormElement.acceptCharset")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("accept-charset", "form") }} 属性の値を反映し、サーバーが受け付ける文字エンコーディングを表します。
-
{{domxref("HTMLFormElement.autocomplete")}}
-
{{domxref("DOMString")}} で、フォームの {{ htmlattrxref("autocomplete", "form") }} 属性の値を反映し、ブラウザーが自動的にこのフォーム内のコントロールの値を生み出すことができるかどうかを示します。
-
{{domxref("HTMLFormElement.noValidate")}}
-
{{jsxref("Boolean")}} で、フォームの {{ htmlattrxref("novalidate", "form") }} 属性の値を反映し、フォームの検証を行わないかどうかを示します。
-
+_このインターフェイスは親である {{domxref("HTMLElement")}} からプロパティを継承しています。_ -

名前の付いた入力欄がプロパティとしてオーナーのフォームのインスタンスに追加され、同じ名前のネイティブのプロパティがあると上書きしてしまいます (例えば、フォームに action という名前の入力欄がある場合、action プロパティはフォームの {{ htmlattrxref("action", "form") }} 属性ではなくその入力欄を返します)。

+- {{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}} + - : {{domxref("HTMLFormControlsCollection")}} で、このフォーム要素に所属するすべてのフォームコントロールを保持します。 +- {{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}} + - : `long` で、フォーム内のコントロールの数を反映します。 +- {{domxref("HTMLFormElement.name")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("name", "form") }} 属性の値を反映し、フォームの名前を表します。 +- {{domxref("HTMLFormElement.method")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("method", "form") }} 属性の値を反映し、フォームを送信するために使用する HTTP メソッドを示します。指定された値のみが設定できます。 +- {{domxref("HTMLFormElement.target")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("target", "form") }} 属性の値を反映し、フォームを送信して受け取った結果を表示する場所を示します。 +- {{domxref("HTMLFormElement.action")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("action", "form") }} 属性の値を反映し、フォームによって送信された情報を処理するプログラムの URI を示します。 +- {{domxref("HTMLFormElement.encoding")}} または {{domxref("HTMLFormElement.enctype")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("enctype", "form") }} 属性の値を反映し、フォームをサーバーへ送信するのに使用するコンテンツの型を示します。指定された方のみが設定できます。二つのプロパティは別名です。 +- {{domxref("HTMLFormElement.acceptCharset")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("accept-charset", "form") }} 属性の値を反映し、サーバーが受け付ける文字エンコーディングを表します。 +- {{domxref("HTMLFormElement.autocomplete")}} + - : {{domxref("DOMString")}} で、フォームの {{ htmlattrxref("autocomplete", "form") }} 属性の値を反映し、ブラウザーが自動的にこのフォーム内のコントロールの値を生み出すことができるかどうかを示します。 +- {{domxref("HTMLFormElement.noValidate")}} + - : {{jsxref("Boolean")}} で、フォームの {{ htmlattrxref("novalidate", "form") }} 属性の値を反映し、フォームの検証を行わないかどうかを示します。 -

メソッド

+名前の付いた入力欄がプロパティとしてオーナーのフォームのインスタンスに追加され、同じ名前のネイティブのプロパティがあると上書きしてしまいます (例えば、フォームに `action` という名前の入力欄がある場合、`action` プロパティはフォームの {{ htmlattrxref("action", "form") }} 属性ではなくその入力欄を返します)。 -

このインターフェイスは親である {{domxref("HTMLElement")}} からメソッドを継承しています。

+## メソッド -
-
{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}
-
この要素の子コントロールが制約検証の対象となり、それらの制約を満たしている場合は true を返します。制約を満たさないコントロールがある場合は false を返します。制約を満たさないコントロールに対して、{{domxref("HTMLInputElement/invalid_event", "invalid")}} という名前のイベントを発生させます。イベントがキャンセルされない場合、そのようなコントロールは無効とみなされます。false にどう対応するかはプログラマ次第です。
-
{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}
-
要素の子コントロールがその検証する制約を満たしている場合、true を返します。false が返された場合、無効な子要素それぞれにキャンセル可能な {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生し、検証上の問題がユーザーに報告されます。
-
{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}
-
指定された送信ボタンとそれに対応する設定を使用してフォームを送信するよう要求します。
-
{{domxref("HTMLFormElement.reset", "reset()")}}
-
フォームを初期状態にリセットします。
-
{{domxref("HTMLFormElement.submit", "submit()")}}
-
フォームをサーバーへ送信します。
-
+_このインターフェイスは親である {{domxref("HTMLElement")}} からメソッドを継承しています。_ -

非推奨のメソッド

+- {{domxref("HTMLFormElement.checkValidity", "checkValidity()")}} + - : この要素の子コントロールが[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)の対象となり、それらの制約を満たしている場合は `true` を返します。制約を満たさないコントロールがある場合は `false` を返します。制約を満たさないコントロールに対して、{{domxref("HTMLInputElement/invalid_event", "invalid")}} という名前のイベントを発生させます。イベントがキャンセルされない場合、そのようなコントロールは無効とみなされます。`false` にどう対応するかはプログラマ次第です。 +- {{domxref("HTMLFormElement.reportValidity", "reportValidity()")}} + - : 要素の子コントロールがその[検証する制約](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)を満たしている場合、`true` を返します。`false` が返された場合、無効な子要素それぞれにキャンセル可能な {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生し、検証上の問題がユーザーに報告されます。 +- {{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}} + - : 指定された送信ボタンとそれに対応する設定を使用してフォームを送信するよう要求します。 +- {{domxref("HTMLFormElement.reset", "reset()")}} + - : フォームを初期状態にリセットします。 +- {{domxref("HTMLFormElement.submit", "submit()")}} + - : フォームをサーバーへ送信します。 -
-
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}
-
ネイティブのブラウザーインターフェイスを起動して、自動補完フィールド名 の値が off または on ではないフィールドを補完してユーザーを支援します。ユーザーがインターフェイスの操作を終えると、フォームはフィールドが入力された場合は {{event("autocomplete")}}、問題があった場合は {{event("autocompleteerror")}} のいずれかのイベントを受け取ります。
-
+### 非推奨のメソッド -

イベント

+- {{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}} + - : ネイティブのブラウザーインターフェイスを起動して、[自動補完フィールド名](https://html.spec.whatwg.org/#autofill-field-name) の値が `off` または `on` ではないフィールドを補完してユーザーを支援します。ユーザーがインターフェイスの操作を終えると、フォームはフィールドが入力された場合は {{event("autocomplete")}}、問題があった場合は {{event("autocompleteerror")}} のいずれかのイベントを受け取ります。 -

これらのイベントを待ち受けするには、addEventListener() を使用するか、このインターフェイスの oneventname プロパティへイベントリスナーを代入するかしてください。

+## イベント -
-
{{domxref("HTMLFormElement/formdata_event", "formdata")}}
-
formdata イベントは、フォームのデータを表す項目リストが構築されると発行されます。
- {{domxref("GlobalEventHandlers/onformdata", "onformdata")}} プロパティからも利用できます。
-
{{domxref("HTMLFormElement/reset_event", "reset")}}
-
reset イベントはフォームがリセットされたときに発行されます。
-
{{domxref("GlobalEventHandlers/onreset", "onreset")}} プロパティからも利用できます。
-
{{domxref("HTMLFormElement/submit_event", "submit")}}
-
submit イベントはフォームが送信されたときに発行されます。
- {{domxref("GlobalEventHandlers/onsubmit", "onsubmit")}} プロパティからも利用できます。
-
+これらのイベントを待ち受けするには、`addEventListener()` を使用するか、このインターフェイスの `oneventname` プロパティへイベントリスナーを代入するかしてください。 -

使用上の注意

+- {{domxref("HTMLFormElement/formdata_event", "formdata")}} + - : `formdata` イベントは、フォームのデータを表す項目リストが構築されると発行されます。 + {{domxref("GlobalEventHandlers/onformdata", "onformdata")}} プロパティからも利用できます。 +- {{domxref("HTMLFormElement/reset_event", "reset")}} + - : `reset` イベントはフォームがリセットされたときに発行されます。 + {{domxref("GlobalEventHandlers/onreset", "onreset")}} プロパティからも利用できます。 +- {{domxref("HTMLFormElement/submit_event", "submit")}} + - : `submit` イベントはフォームが送信されたときに発行されます。 + {{domxref("GlobalEventHandlers/onsubmit", "onsubmit")}} プロパティからも利用できます。 -

フォーム要素オブジェクトの取得

+## 使用上の注意 -

HTMLFormElement オブジェクトを取得するには、CSS selector と {{domxref("ParentNode.querySelector", "querySelector()")}}を使うか、document の {{domxref("Document.forms", "forms")}} プロパティを使ってすべてのフォームのリストを取得できます。

+### フォーム要素オブジェクトの取得 -

{{domxref("Document.forms")}} は HTMLFormElement オブジェクトの配列、つまりそのページの各フォームの一覧を返します。個別のフォームを取得するには、下記の文法を使うことができます:

+`HTMLFormElement` オブジェクトを取得するには、[CSS selector](/ja/docs/Web/CSS/CSS_Selectors) と {{domxref("ParentNode.querySelector", "querySelector()")}}を使うか、document の {{domxref("Document.forms", "forms")}} プロパティを使ってすべてのフォームのリストを取得できます。 -
-
document.forms[index]
-
フォーム配列の指定した index のフォームを返します。
-
document.forms[id]
-
ID が idであるフォームを返します。
-
document.forms[name]
-
{{domxref("Element.name", "name")}} 属性値が nameであるフォームを返します。
-
+{{domxref("Document.forms")}} は `HTMLFormElement` オブジェクトの配列、つまりそのページの各フォームの一覧を返します。個別のフォームを取得するには、下記の文法を使うことができます: -

フォーム内の要素へのアクセス

+- `document.forms[index]` + - : フォーム配列の指定した `index` のフォームを返します。 +- `document.forms[id]` + - : ID が `id`であるフォームを返します。 +- `document.forms[name]` + - : {{domxref("Element.name", "name")}} 属性値が `name`であるフォームを返します。 -

フォームのデータを含む要素の一覧にアクセスするには、フォームの{{domxref("HTMLFormElement.elements", "elements")}} プロパティを調べることでできます。これはフォームのユーザーデータ入力要素の全一覧の{{domxref("HTMLFormControlsCollection")}} を返し、これには <form> の子孫と、form 属性を使ったフォームのメンバーからなるものの両方が返されます。

+### フォーム内の要素へのアクセス -

フォームの要素を探すのに form のキーとして name 属性を使うこともできますが、 elements を使うのがより良い方法です—フォーム要素のみを含み、formの他の属性と混合されることがないです。

+フォームのデータを含む要素の一覧にアクセスするには、フォームの{{domxref("HTMLFormElement.elements", "elements")}} プロパティを調べることでできます。これはフォームのユーザーデータ入力要素の全一覧の{{domxref("HTMLFormControlsCollection")}} を返し、これには `
` の子孫と、`form` 属性を使ったフォームのメンバーからなるものの両方が返されます。 -

要素の名前付けの問題

+フォームの要素を探すのに `form` のキーとして `name` 属性を使うこともできますが、 `elements` を使うのがより良い方法です—フォーム要素*のみ*を含み、`form`の他の属性と混合されることがないです。 -

名前によっては JavaScript からのプロパティや要素のアクセスが干渉します。

+### 要素の名前付けの問題 -

例えば、

+名前によっては JavaScript からのプロパティや要素のアクセスが干渉します。 - +例えば、 -

要素名のこうした問題を避けるには:

- - +- `` は ``に優先します。つまり `form.id` ではフォームの id を参照せずに、名前が "`id`"である要素を参照します。その他のプロパティも同様であり、例えば `` や ``もそうです。 +- `` はフォーム `elements` のコレクションをアクセス不能にします。`form.elements` は個別の要素を参照します。 -

JavaScript を使っていなければ、これは問題になりません。

+要素名のこうした問題を避けるには: -

フォームコントロールと見なされる要素

+- _常に_ `elements` のコレクションを使って、要素名とフォームプロパティとのあいまいさを避けます。 +- *決して*要素名に "`elements`" を使わない。 -

The elements included by HTMLFormElement.elements and HTMLFormElement.length are the following:

+JavaScript を使っていなければ、これは問題になりません。 - +### フォームコントロールと見なされる要素 -

No other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.

+The elements included by `HTMLFormElement.elements` and `HTMLFormElement.length` are the following: -

例

+- {{HTMLElement("button")}} +- {{HTMLElement("fieldset")}} +- {{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is `"image"` are omitted for historical reasons) +- {{HTMLElement("object")}} +- {{HTMLElement("output")}} +- {{HTMLElement("select")}} +- {{HTMLElement("textarea")}} -

Creating a new form element, modifying its attributes, then submitting it:

+No other elements are included in the list returned by `elements`, which makes it an excellent way to get at the elements most important when processing forms. -
const f = document.createElement("form"); // Create a form
+## 例
+
+Creating a new form element, modifying its attributes, then submitting it:
+
+```js
+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
-
+``` -

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

+Extract information from a `` element and set some of its attributes: -
<form name="formA" action="/cgi-bin/test" method="post">
- <p>Press "Info" for form details, or "Set" to change those details.</p>
- <p>
-  <button type="button" onclick="getFormInfo();">Info</button>
-  <button type="button" onclick="setFormInfo(this.form);">Set</button>
-  <button type="reset">Reset</button>
- </p>
+```html
+
+ 
Press "Info" for form details, or "Set" to change those details.

+ 

+  
+  
+  
+ 

 
- <textarea id="form-info" rows="15" cols="20"></textarea>
-</form>
+ 
+
 
-<script>
+
+```
+
+Submit a `
` into a new window:
+
+```html
+
+
+
+
+Example new-window form submission
+
+
+
+
+  

+  

+  

+
+  

+   Pet preference
+
+    

+    

+  

+
+  

+    Owned vehicles
+
+    

+    

+  

+
+  

+

+
+
+
+```
+
+### XMLHttpRequest を使用したフォームの送信とファイルのアップロード
+
+If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read [this paragraph](/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files).
+
+## 仕様書
+
+| 仕様書                                                                                                   | 状態                             | 備考                                                                                                                                                                                                                                                                                 |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}                 | {{Spec2('HTML WHATWG')}} | `requestAutocomplete()` メソッドを追加。                                                                                                                                                                                                                                             |
+| {{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "HTMLFormElement")}} | {{Spec2('HTML5 W3C')}}     | elements プロパティが生の {{domxref("HTMLCollection")}} の代わりに {{domxref("HTMLFormControlsCollection")}} を返すようになった。これは主に技術的な変更。`checkValidity()` メソッドを追加。`autocomplete`, `noValidate`, `encoding` の各プロパティを追加。 |
+
+## ブラウザーの互換性
+
+{{Compat("api.HTMLFormElement")}}
+
+## 関連情報
+
+- このインターフェイスを実装している HTML 要素: {{ HTMLElement("form") }}
diff --git a/files/ja/web/api/htmlformelement/length/index.md b/files/ja/web/api/htmlformelement/length/index.md
index f079d6e63b3741..3ce94d09040239 100644
--- a/files/ja/web/api/htmlformelement/length/index.md
+++ b/files/ja/web/api/htmlformelement/length/index.md
@@ -7,19 +7,26 @@ tags:
   - Gecko DOM Reference
 translation_of: Web/API/HTMLFormElement/length
 ---
-

- {{ApiRef}}

-
概要

-
length は {{htmlelement("form")}} 要素内のフォームコントロールの数を返します。

-
構文

-
integer = form.length
-

-
例

-
if (document.getElementById("form1").length > 1) {
+{{ApiRef}}
+
+## 概要
+
+`length` は {{htmlelement("form")}} 要素内のフォームコントロールの数を返します。
+
+## 構文
+
+```
+integer = form.length
+```
+
+## 例
+
+```js
+if (document.getElementById("form1").length > 1) {
   // more than one form control here
 }
-

-
仕様書

-
+```
+
+## 仕様書
+
+- [DOM Level 2: length](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length)
diff --git a/files/ja/web/api/htmlformelement/method/index.md b/files/ja/web/api/htmlformelement/method/index.md
index da72427aacd983..2d8a16f7a1270b 100644
--- a/files/ja/web/api/htmlformelement/method/index.md
+++ b/files/ja/web/api/htmlformelement/method/index.md
@@ -7,23 +7,25 @@ tags:
   - Gecko DOM Reference
 translation_of: Web/API/HTMLFormElement/method
 ---
-

- {{APIRef}}

-

-  

-

- 概要

-
method は、 フォーム送信時に使用する HTTPメソッドを取得 / 設定する。

-
構文

-
string = form.method; //取得
-form.method = string; //設定
-

-
例

-
var myform = document.forms["myform"];
+{{APIRef}}概要
+
+`method` は、 フォーム送信時に使用する HTTP メソッドを取得 / 設定する。
+
+## 構文
+
+```
+string = form.method; //取得
+form.method = string; //設定
+```
+
+## 例
+
+```js
+var myform = document.forms["myform"];
 
 myform.method = "post";
-

-
仕様

-
+```
+
+## 仕様
+
+- [DOM Level 2 HTML: method](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539)
diff --git a/files/ja/web/api/htmlformelement/name/index.md b/files/ja/web/api/htmlformelement/name/index.md
index 0933aa22b7773f..0039f1c1845a76 100644
--- a/files/ja/web/api/htmlformelement/name/index.md
+++ b/files/ja/web/api/htmlformelement/name/index.md
@@ -7,23 +7,36 @@ tags:
   - Gecko DOM Reference
 translation_of: Web/API/HTMLFormElement/name
 ---
-
概要

-
form の name 属性は、その form 要素の名前を文字列として返します。

-
構文

-
string = form.name; //取得
-form.name = string; //設定

-
例

-
var form1_Name = document.getElementById("form1").name;
+## 概要
+
+form の `name` 属性は、その `form` 要素の名前を文字列として返します。
+
+## 構文
+
+```
+string = form.name; //取得
+form.name = string; //設定
+```
+
+## 例
+
+```js
+var form1_Name = document.getElementById("form1").name;
 
 if (form1_Name != document.form.name) {
    // browser doesn't support this form of reference
-}

-
注意

-
この属性は読み書きともに可能であり、フォーム名の読取り及び設定に使用できます。

-
もしフォーム内に "name" と名付けられた要素を含めてしまった場合、その要素が優先され、name 属性でのフォームオーナーへのアクセスが出来なくなってしまいます。

-
Internet Explorer (IE) では、createElement() メソッドによって作成された要素に対する name 属性を用いての名前の設定 / 書換は許可されていません。

-
仕様書

-
+}
+```
+
+## 注意
+
+この属性は読み書きともに可能であり、フォーム名の読取り及び設定に使用できます。
+
+もしフォーム内に "name" と名付けられた要素を含めてしまった場合、その要素が優先され、`name` 属性でのフォームオーナーへのアクセスが出来なくなってしまいます。
+
+Internet Explorer (IE) では、`createElement()` メソッドによって作成された要素に対する `name` 属性を用いての名前の設定 / 書換は許可されていません。
+
+## 仕様書
+
+- [HTML5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name)
+- [DOM Level 2 HTML: name](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454)
diff --git a/files/ja/web/api/htmlformelement/reportvalidity/index.md b/files/ja/web/api/htmlformelement/reportvalidity/index.md
index a37ba5229c3ace..9dd32c034c1e6c 100644
--- a/files/ja/web/api/htmlformelement/reportvalidity/index.md
+++ b/files/ja/web/api/htmlformelement/reportvalidity/index.md
@@ -6,34 +6,37 @@ tags:
   - HTMLFormElement
   - Method
   - Reference
-browser-compat: api.HTMLFormElement.reportValidity
 translation_of: Web/API/HTMLFormElement/reportValidity
+browser-compat: api.HTMLFormElement.reportValidity
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLFormElement.reportValidity() メソッドは、この要素の子コントロールが制約の検証を満たしていれば true を返します。
-  false が返された場合、キャンセル可能な
-  invalid イベントが無効な子それぞれについて発行され、ユーザーに検証の問題を報告します。

+**`HTMLFormElement.reportValidity()`** メソッドは、この要素の子コントロールが制約の検証を満たしていれば `true` を返します。
+`false` が返された場合、キャンセル可能な
+[`invalid`](/ja/docs/Web/API/HTMLInputElement/invalid_event) イベントが無効な子それぞれについて発行され、ユーザーに検証の問題を報告します。
 
-
構文

+## 構文
 
-
HTMLFormElement.reportValidity()
-

+```js
+HTMLFormElement.reportValidity()
+```
 
-
返値

+### 返値
 
-
true または false

+`true` または `false`
 
-
例

+## 例
 
-
document.forms['myform'].addEventListener('submit', function() {
+```js
+document.forms['myform'].addEventListener('submit', function() {
   document.forms['myform'].reportValidity();
-}, false);

+}, false);
+```
 
-
仕様書

+## 仕様書
 
 {{Specifications}}
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat}}

+{{Compat}}
diff --git a/files/ja/web/api/htmlformelement/reset/index.md b/files/ja/web/api/htmlformelement/reset/index.md
index 4c38250ddecf1f..aa23271da46808 100644
--- a/files/ja/web/api/htmlformelement/reset/index.md
+++ b/files/ja/web/api/htmlformelement/reset/index.md
@@ -9,18 +9,28 @@ tags:
   - form Methods
 translation_of: Web/API/HTMLFormElement/reset
 ---
-
概要

-
reset はフォームを初期状態にリセットします。

-
構文

-
HTMLFormElement.reset()
-

-
例

-
document.forms["myform"].reset();
-

-
注記

-
このメソッドは、フォームのリセットボタン押下と同様の効果となります。

-
もしフォームコントロール（※リセットボタンなど）の id 属性か name 属性の値に "reset" が指定されている場合、フォームの reset メソッドをマスキングしてしまうという点に注意して下さい。

-
仕様書

-
+## 概要
+
+`reset` はフォームを初期状態にリセットします。
+
+## 構文
+
+```
+HTMLFormElement.reset()
+```
+
+## 例
+
+```js
+document.forms["myform"].reset();
+```
+
+## 注記
+
+このメソッドは、フォームのリセットボタン押下と同様の効果となります。
+
+もしフォームコントロール（※リセットボタンなど）の id 属性か name 属性の値に "`reset`" が指定されている場合、フォームの `reset` メソッドをマスキングしてしまうという点に注意して下さい。
+
+## 仕様書
+
+- [DOM Level 2 HTML: reset](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767677)
diff --git a/files/ja/web/api/htmlformelement/reset_event/index.md b/files/ja/web/api/htmlformelement/reset_event/index.md
index 27ab5054f0b45e..aeb916fc80358d 100644
--- a/files/ja/web/api/htmlformelement/reset_event/index.md
+++ b/files/ja/web/api/htmlformelement/reset_event/index.md
@@ -10,100 +10,75 @@ tags:
   - Reference
 translation_of: Web/API/HTMLFormElement/reset_event
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
reset イベントは {{HTMLElement("form")}} がリセットされたときに発行されます。

+**`reset`** イベントは {{HTMLElement("form")}} がリセットされたときに発行されます。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
バブリングあり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onreset")}}
バブリングあり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onreset")}}

 

 
-
例

+## 例
 
-
この例は {{domxref("EventTarget.addEventListener()")}} を使用してフォームがリセットされるのを、実行されたときに現在の {{domxref("Event.timeStamp")}} をログ出力します。

+この例は {{domxref("EventTarget.addEventListener()")}} を使用してフォームがリセットされるのを、実行されたときに現在の {{domxref("Event.timeStamp")}} をログ出力します。
 
-
HTML

+### HTML
 
-
<form id="form">
-  <label>Test field: <input type="text"></label>
-  <br><br>
-  <button type="reset">Reset form</button>
-</form>
-<p id="log"></p>

+```html
+

+  
+  


+  
+

+

+```
 
-
JavaScript

+### JavaScript
 
-
function logReset(event) {
+```js
+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);

-
-
結果

-
-
{{EmbedLiveSample("Examples")}}

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("HTML WHATWG", "indices.html#event-reset", "reset")}}{{Spec2("UI Events")}}変更なし
{{SpecName("HTML5.2", "fullindex.html#eventdef-global-reset", "reset")}}{{Spec2("HTML5.2")}}変更なし
{{SpecName("HTML5.1", "fullindex.html#eventdef-global-reset", "reset")}}{{Spec2("HTML5.1")}}変更なし
{{SpecName("HTML5 W3C", "index.html#events-0", "reset")}}{{Spec2("HTML5 W3C")}}初回定義

+form.addEventListener('reset', logReset);
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples")}}
+
+## 仕様書
+
+| 仕様書                                                                                           | 状態                         | 備考     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "indices.html#event-reset", "reset")}}             | {{Spec2("UI Events")}} | 変更なし |
+| {{SpecName("HTML5.2", "fullindex.html#eventdef-global-reset", "reset")}} | {{Spec2("HTML5.2")}} | 変更なし |
+| {{SpecName("HTML5.1", "fullindex.html#eventdef-global-reset", "reset")}} | {{Spec2("HTML5.1")}} | 変更なし |
+| {{SpecName("HTML5 W3C", "index.html#events-0", "reset")}}                     | {{Spec2("HTML5 W3C")}} | 初回定義 |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-

-
{{Compat("api.HTMLFormElement.reset_event")}}

-

+{{Compat("api.HTMLFormElement.reset_event")}}
 
-
関連情報

+## 関連情報
 
-
+- HTML の {{HTMLElement("form")}} 要素
diff --git a/files/ja/web/api/htmlformelement/submit/index.md b/files/ja/web/api/htmlformelement/submit/index.md
index 5fd02f11bb7ac2..0c9843cbdada1e 100644
--- a/files/ja/web/api/htmlformelement/submit/index.md
+++ b/files/ja/web/api/htmlformelement/submit/index.md
@@ -7,22 +7,32 @@ tags:
   - Gecko DOM Reference
 translation_of: Web/API/HTMLFormElement/submit
 ---
-

- {{ApiRef}}

-
概要

-
submit はフォームを送信します。

-
構文

-
HTMLFormElement.submit();
-

-
例

-
document.forms["myform"].submit()
-

-
注記

-
このメソッドはフォームの送信ボタンをクリックするのと同じ動作をします。

-
-
Gecko ベースのアプリケーションからこのメソッドを呼び出すときに、フォームの onsubmit イベントハンドラ (例 : onsubmit="return false;") はトリガされません。一般的に、ユーザエージェントによる呼び出しは保証されていません (※参照 : http://lists.w3.org/Archives/Public/www-dom/2012JanMar/0011.html)

-
もしフォームコントロール (送信ボタン等) の name 属性か id 属性の属性値に "submit" が設定されていた場合、フォームの submit メソッドはマスキングされてしまいます。

-
仕様書

-
+{{ApiRef}}
+
+## 概要
+
+`submit` はフォームを送信します。
+
+## 構文
+
+```
+HTMLFormElement.submit();
+```
+
+## 例
+
+```js
+document.forms["myform"].submit()
+```
+
+## 注記
+
+このメソッドはフォームの送信ボタンをクリックするのと同じ動作をします。
+
+Gecko ベースのアプリケーションからこのメソッドを呼び出すときに、フォームの `onsubmit` イベントハンドラ (例 : `onsubmit="return false;"`) はトリガされません。一般的に、ユーザエージェントによる呼び出しは保証されていません (※参照 : )
+
+もしフォームコントロール (送信ボタン等) の `name` 属性か `id` 属性の属性値に "`submit`" が設定されていた場合、フォームの `submit` メソッドはマスキングされてしまいます。
+
+## 仕様書
+
+- [DOM Level 2 HTML: submit](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76767676)
diff --git a/files/ja/web/api/htmlformelement/submit_event/index.md b/files/ja/web/api/htmlformelement/submit_event/index.md
index e4c57481e1ab02..effb6b74175b85 100644
--- a/files/ja/web/api/htmlformelement/submit_event/index.md
+++ b/files/ja/web/api/htmlformelement/submit_event/index.md
@@ -13,110 +13,83 @@ tags:
   - フォーム
 translation_of: Web/API/HTMLFormElement/submit_event
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
submit イベントは {{HtmlElement("form")}} が送信されたときに発生します。

+**`submit`** イベントは {{HtmlElement("form")}} が送信されたときに発生します。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
バブリングあり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル可
インターフェイス{{DOMxRef("SubmitEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onsubmit")}}
バブリングあり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル可
インターフェイス{{DOMxRef("SubmitEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onsubmit")}}

 

 
-
submit イベントは <form> 要素自身で発生するものであり、その中の {{HtmlElement("button")}} や {{HtmlElement('input/submit', '<input type="submit">')}} で発生するものではないことに注意してください。しかし、フォームの送信が起動されたことを示すために送信される {{domxref("SubmitEvent")}} には、送信リクエストがどのボタンで起動されたかを {{domxref("SubmitEvent.submitter", "submitter")}} プロパティが含まれています。

+`submit` イベントは `
` 要素自身で発生するものであり、その中の {{HtmlElement("button")}} や {{HtmlElement('input/submit', '<input type="submit">')}} で発生するものではないことに注意してください。しかし、フォームの送信が起動されたことを示すために送信される {{domxref("SubmitEvent")}} には、送信リクエストがどのボタンで起動されたかを {{domxref("SubmitEvent.submitter", "submitter")}} プロパティが含まれています。
 
-
submit イベントは、ユーザーが送信ボタン ({{HtmlElement("button")}} または {{HtmlElement('input/submit', '<input type="submit">')}}) を押したり、 Enter キーをフォーム内のフィールド (例えば {{HtmlElement('input/text', '<input type="text">')}}) の編集中に押したりしたときに発生します。このイベントは {{domxref("HTMLFormElement.submit()", "form.submit()")}} メソッドを呼び出した場合には送信されません。

+`submit` イベントは、ユーザーが送信ボタン ({{HtmlElement("button")}} または {{HtmlElement('input/submit', '<input type="submit">')}}) を押したり、 Enter キーをフォーム内のフィールド (例えば {{HtmlElement('input/text', '<input type="text">')}}) の編集中に押したりしたときに発生します。このイベントは {{domxref("HTMLFormElement.submit()", "form.submit()")}} メソッドを呼び出した場合には送信されません。
 
-

-
注: フォームの検証に合格していないフォームを送信しようとすると、 {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生します。この場合、フォーム検証が送信を阻止しますので、 submit イベントは発生しません。

-

+> **Note:** **注:** [フォームの検証](/ja/docs/Learn/HTML/Forms/Form_validation)に合格していないフォームを送信しようとすると、 {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生します。この場合、フォーム検証が送信を阻止しますので、 `submit` イベントは発生しません。
 
-
例

+## 例
 
-
この例は {{domxref("EventTarget.addEventListener()")}} を使用してフォームの送信を待受けし、実行されたときに現在の {{domxref("Event.timeStamp")}} をログ出力し、それからフォームを送信する既定の動作を阻止します。

+この例は {{domxref("EventTarget.addEventListener()")}} を使用してフォームの送信を待受けし、実行されたときに現在の {{domxref("Event.timeStamp")}} をログ出力し、それからフォームを送信する既定の動作を阻止します。
 
-
HTML

+### HTML
 
-
<form id="form">
-  <label>Test field: <input type="text"></label>
-  <br><br>
-  <button type="submit">Submit form</button>
-</form>
-<p id="log"></p>

+```html
+
+  
+  


+  
+

+

+```
 
-
JavaScript

+### JavaScript
 
-
function logSubmit(event) {
+```js
+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);

-
-
結果

-
-
{{EmbedLiveSample("Examples")}}

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("HTML WHATWG", "indices.html#event-submit", "submit")}}{{Spec2("UI Events")}}変更なし
{{SpecName("HTML5.2", "fullindex.html#eventdef-global-submit", "submit")}}{{Spec2("HTML5.2")}}変更なし
{{SpecName("HTML5.1", "fullindex.html#eventdef-global-submit", "submit")}}{{Spec2("HTML5.1")}}変更なし
{{SpecName("HTML5 W3C", "index.html#events-0", "submit")}}{{Spec2("HTML5 W3C")}}初回定義

+form.addEventListener('submit', logSubmit);
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples")}}
+
+## 仕様書
+
+| 仕様書                                                                                               | 状態                         | 備考     |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "indices.html#event-submit", "submit")}}             | {{Spec2("UI Events")}} | 変更なし |
+| {{SpecName("HTML5.2", "fullindex.html#eventdef-global-submit", "submit")}} | {{Spec2("HTML5.2")}} | 変更なし |
+| {{SpecName("HTML5.1", "fullindex.html#eventdef-global-submit", "submit")}} | {{Spec2("HTML5.1")}} | 変更なし |
+| {{SpecName("HTML5 W3C", "index.html#events-0", "submit")}}                         | {{Spec2("HTML5 W3C")}} | 初回定義 |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-

-
{{Compat("api.HTMLFormElement.submit_event")}}

-

+{{Compat("api.HTMLFormElement.submit_event")}}
 
-
関連情報

+## 関連情報
 
-
    
- 
  • HTML の {{HtmlElement("form")}} 要素
    • 
- 
  • 関連イベント: {{domxref("HTMLInputElement/invalid_event", "invalid")}}
    • 
-

+- HTML の {{HtmlElement("form")}} 要素
+- 関連イベント: {{domxref("HTMLInputElement/invalid_event", "invalid")}}
diff --git a/files/ja/web/api/htmlformelement/target/index.md b/files/ja/web/api/htmlformelement/target/index.md
index 088b0f329f736e..84d965ff640421 100644
--- a/files/ja/web/api/htmlformelement/target/index.md
+++ b/files/ja/web/api/htmlformelement/target/index.md
@@ -6,18 +6,26 @@ tags:
   - form
 translation_of: Web/API/HTMLFormElement/target
 ---
-
概要

-
フォームのアクションの対象を取得 / 設定します。

-
構文

-
string = form.target // 取得
-
-form.target = string // 設定

-
例

-
myForm.target = document.frames[1].name;
+## 概要
+
+フォームのアクションの対象を取得 / 設定します。
+
+## 構文
+
+```
+string = form.target // 取得
+
+form.target = string // 設定
+```
+
+## 例
+
+```js
+myForm.target = document.frames[1].name;
 // フレームセット中の 2 番目のフレームを myForm の操作対象に設定
-

-
仕様書

-
+```
+
+## 仕様書
+
+- [HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method)
+- [DOM Level 2 HTML: target](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890)