From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/htmlformelement/acceptcharset/index.html | 27 +++ files/ja/web/api/htmlformelement/action/index.html | 30 +++ .../ja/web/api/htmlformelement/elements/index.html | 25 ++ .../ja/web/api/htmlformelement/encoding/index.html | 12 + .../ja/web/api/htmlformelement/enctype/index.html | 28 +++ files/ja/web/api/htmlformelement/index.html | 266 +++++++++++++++++++++ files/ja/web/api/htmlformelement/length/index.html | 25 ++ files/ja/web/api/htmlformelement/method/index.html | 29 +++ files/ja/web/api/htmlformelement/name/index.html | 29 +++ files/ja/web/api/htmlformelement/reset/index.html | 26 ++ .../web/api/htmlformelement/reset_event/index.html | 111 +++++++++ files/ja/web/api/htmlformelement/submit/index.html | 28 +++ .../api/htmlformelement/submit_event/index.html | 124 ++++++++++ files/ja/web/api/htmlformelement/target/index.html | 23 ++ 14 files changed, 783 insertions(+) create mode 100644 files/ja/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/ja/web/api/htmlformelement/action/index.html create mode 100644 files/ja/web/api/htmlformelement/elements/index.html create mode 100644 files/ja/web/api/htmlformelement/encoding/index.html create mode 100644 files/ja/web/api/htmlformelement/enctype/index.html create mode 100644 files/ja/web/api/htmlformelement/index.html create mode 100644 files/ja/web/api/htmlformelement/length/index.html create mode 100644 files/ja/web/api/htmlformelement/method/index.html create mode 100644 files/ja/web/api/htmlformelement/name/index.html create mode 100644 files/ja/web/api/htmlformelement/reset/index.html create mode 100644 files/ja/web/api/htmlformelement/reset_event/index.html create mode 100644 files/ja/web/api/htmlformelement/submit/index.html create mode 100644 files/ja/web/api/htmlformelement/submit_event/index.html create mode 100644 files/ja/web/api/htmlformelement/target/index.html (limited to 'files/ja/web/api/htmlformelement') 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 +--- +
+ {{APIRef}}
+
+  
+
+ 概要
+

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

+

構文

+
string = form.acceptCharset;
+
+

例

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

仕様書

+ 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 +--- +

概要

+

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

+

構文

+
string = form.action; //取得
+form.action = string; //設定
+
+ + +

例

+
form.action = "/cgi-bin/publish";
+ + +

注記

+

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

+ + +

仕様

+ 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 +--- +
+ {{ApiRef()}}
+

概要

+

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

+

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

+

構文

+
nodeList =HTMLFormElement.elements
+

例

+
var inputs = document.getElementById("form1").elements;
+var inputByIndex = inputs[2];
+var inputByName = inputs["login"];
+

仕様書

+ 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 +--- +
+ {{ApiRef}}
+

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

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 +--- +

概要

+

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

+

構文

+
string = form.enctype // 取得
+
+form.enctype = string // 設定
+
+

例

+
var firstForm = document.getElementsByTagName("form")[0]; // 文書中の最初の form 要素を取得
+
+firstForm.enctype = "application/x-www-form-urlencoded"; // 設定
+alert( firstForm.enctype ); // 確認
+
+

注記

+

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

+

仕様書

+ 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 +--- +
{{APIRef("HTML DOM")}}
+ +

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

+ +

{{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") }} 属性の値を反映し、フォームの検証を行わないかどうかを示します。
+
+ +

名前の付いた入力欄がプロパティとしてオーナーのフォームのインスタンスに追加され、同じ名前のネイティブのプロパティがあると上書きしてしまいます (例えば、フォームに 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("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}
+
ネイティブのブラウザーインターフェイスを起動して、自動補完フィールド名 の値が 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")}} プロパティからも利用できます。
+
+ +

使用上の注意

+ +

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

+ +

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

+ +

{{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の他の属性と混合されることがないです。

+ +

要素の名前付けの問題

+ +

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

+ +

例えば、

+ + + +

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

+ + + +

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

+ +

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

+ +

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

+ + + +

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.

+ +

例

+ +

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

+ +
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:

+ +
<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>
+
+ <textarea id="form-info" rows="15" cols="20"></textarea>
+</form>
+
+<script>
+  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 <textarea> 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";
+  }
+</script>
+
+ +

Submit a <form> into a new window:

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Example new-window form submission</title>
+</head>
+<body>
+
+<form action="test.php" target="_blank">
+  <p><label>First name: <input type="text" name="firstname"></label></p>
+  <p><label>Last name: <input type="text" name="lastname"></label></p>
+  <p><label><input type="password" name="pwd"></label></p>
+
+  <fieldset>
+   <legend>Pet preference</legend>
+
+    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
+    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
+  </fieldset>
+
+  <fieldset>
+    <legend>Owned vehicles</legend>
+
+    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
+    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
+  </fieldset>
+
+  <p><button>Submit</button></p>
+</form>
+
+</body>
+</html>
+ +

XMLHttpRequest を使用したフォームの送信とファイルのアップロード

+ +

If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read this paragraph.

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{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")}}

+ +

関連情報

+ + 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 +--- +
+ {{ApiRef}}
+

概要

+

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

+

構文

+
integer = form.length
+
+

例

+
if (document.getElementById("form1").length > 1) {
+  // more than one form control here
+}
+
+

仕様書

+ 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 +--- +
+ {{APIRef}}
+
+  
+
+ 概要
+

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

+

構文

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

例

+
var myform = document.forms["myform"];
+
+myform.method = "post";
+
+

仕様

+ 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 +--- +

概要

+

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

+

構文

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

例

+
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 属性を用いての名前の設定 / 書換は許可されていません。

+

仕様書

+ 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 +--- +

概要

+

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

+

構文

+
HTMLFormElement.reset()
+
+

例

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

注記

+

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

+

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

+

仕様書

+ 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 +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onreset")}}
+ +

例

+ +

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

+ +

HTML

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

JavaScript

+ +
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")}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

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

+
+ +

関連情報

+ + 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 +--- +
+ {{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 メソッドはマスキングされてしまいます。

+

仕様書

+ 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 +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり (ただし、バブリングしない単純なイベントとして指定されている)
キャンセル可
インターフェイス{{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">')}}) を押したり、 Enter キーをフォーム内のフィールド (例えば {{HtmlElement('input/text', '<input type="text">')}}) の編集中に押したりしたときに発生します。このイベントは {{domxref("HTMLFormElement.submit()", "form.submit()")}} メソッドを呼び出した場合には送信されません。

+ +
+

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

+
+ +

例

+ +

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

+ +

HTML

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

JavaScript

+ +
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")}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

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

+
+ +

関連情報

+ + 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 +--- +

概要

+

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

+

構文

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

例

+
myForm.target = document.frames[1].name;
+// フレームセット中の 2 番目のフレームを myForm の操作対象に設定
+
+

仕様書

+ -- cgit v1.2.3-54-g00ecf