Web/API/FormDataEvent を新規翻訳 (#1489)

2021/07/11 時点の英語版に基づき新規翻訳

4 files changed, 327 insertions, 0 deletions

diff --git a/files/ja/web/api/formdataevent/formdata/index.html b/files/ja/web/api/formdataevent/formdata/index.html
new file mode 100644
index 0000000000..0e8e0bb711
--- /dev/null
+++ b/files/ja/web/api/formdataevent/formdata/index.html
@@ -0,0 +1,75 @@
+---
+title: FormDataEvent.formData
+slug: Web/API/FormDataEvent/formData
+tags:
+- API
+- Experimental
+- FormDataEvent
+- Forms
+- Property
+- Reference
+browser-compat: api.FormDataEvent.formData
+translation_of: Web/API/FormDataEvent/formData
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>formData</code> は {{domxref("FormDataEvent")}} インターフェイスの読み取り専用プロパティで、このイベントが発行された時点のフォームに含まれていたデータを表す {{domxref("FormData")}} オブジェクトが入っています。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre
+  class="brush: js"><em>formData</em> = formDataEvent.formData</pre>
+
+<h3 id="Returns">返値</h3>
+
+<p>{{domxref("FormData")}} オブジェクト</p>
+
+<h2 id="Examples">例</h2>
+
+<pre class="brush: js">// フォームの参照を取得
+
+const formElem = document.querySelector('form');
+
+// submit ハンドラー
+
+formElem.addEventListener('submit', (e) =&gt; {
+  // フォームの送信時、既定の動作を抑止
+  e.preventDefault();
+
+  // FormData オブジェクトを構築、これにより formdata イベントが発行
+  new FormData(formElem);
+});
+
+// データを取得するための formdata ハンドラー
+
+formElem.addEventListener('formdata', (e) =&gt; {
+  console.log('formdata fired');
+
+  // イベントオブジェクトからのフォームデータの取得
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // XHR を介してデータを送信
+  var request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+});</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("XMLHTTPRequest")}}</li>
+  <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li>
+  <li><a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a></li>
+  <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ja/web/api/formdataevent/formdataevent/index.html b/files/ja/web/api/formdataevent/formdataevent/index.html
new file mode 100644
index 0000000000..fbdc54fb29
--- /dev/null
+++ b/files/ja/web/api/formdataevent/formdataevent/index.html
@@ -0,0 +1,62 @@
+---
+title: FormDataEvent()
+slug: Web/API/FormDataEvent/FormDataEvent
+tags:
+- API
+- Constructor
+- Experimental
+- FormDataEvent
+- Forms
+- Reference
+browser-compat: api.FormDataEvent.FormDataEvent
+translation_of: Web/API/FormDataEvent/FormDataEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>FormDataEvent()</strong></code> コンストラクターは、新しい {{domxref("FormDataEvent")}} オブジェクトインスタンスを生成します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre
+  class="brush: js">new FormDataEvent(<var>type</var>[, form<var>EventInit</var>]);</pre>
+
+<h3 id="Values">値</h3>
+
+<dl>
+  <dt><code>type</code></dt>
+  <dd>{{domxref("DOMString")}} で、このイベントの名前を表します。</dd>
+  <dt><code>formEventInit</code> {{optional_inline}}</dt>
+  <dd><code>FormEventInit</code> 辞書で、以下の任意のフィールドを取ります。
+    <ul>
+      <li><code>bubbles</code>: <code>true</code> または <code>false</code> の値で、イベントがバブリングするかどうかを示します。既定値は <code>false</code> です。</li>
+      <li><code>cancelable</code>: <code>true</code> または <code>false</code> の値で、イベントがキャンセル可能であるかどうかを示します。既定値は <code>false</code> です。</li>
+      <li><code>composed</code>: <code>true</code> または <code>false</code> の値で、イベントがシャドウルートの外側でリスナーを起動するかどうかを示します。既定値は <code>false</code> です。</li>
+      <li><code>formData</code>: FormDataEvent に事前に入力する {{domxref("FormData")}} オブジェクトです。これには、 {{domxref("FormDataEvent.formData")}} プロパティを介してアクセスします。</li>
+    </ul>
+  </dd>
+</dl>
+
+<h2 id="Examples">例</h2>
+
+<pre class="brush: js">let fd = new FormData();
+fd.append('test', 'test');
+
+let fdEv = new FormDataEvent('formdata', { formData: fd });
+
+for (let value of fdEv.formData.values()) {
+  console.log(value);
+}</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("FormDataEvent")}}</li>
+</ul>
diff --git a/files/ja/web/api/formdataevent/index.html b/files/ja/web/api/formdataevent/index.html
new file mode 100644
index 0000000000..b6a21f0287
--- /dev/null
+++ b/files/ja/web/api/formdataevent/index.html
@@ -0,0 +1,88 @@
+---
+title: FormDataEvent
+slug: Web/API/FormDataEvent
+tags:
+  - API
+  - Experimental
+  - FormDataEvent
+  - Forms
+  - Landing
+  - Reference
+browser-compat: api.FormDataEvent
+translation_of: Web/API/FormDataEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>FormDataEvent</code></strong> インターフェイスは <a href="/ja/docs/Web/API/HTMLFormElement/formdata_event"><code>formdata</code> イベント</a>を表します。 — このようなイベントは {{domxref("HTMLFormElement")}} オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターの呼び出しでも発行させることができます。</p>
+
+<p>これにより、 {{domxref("XMLHttpRequest")}} などのメソッドでフォームデータを送信する際に、自分で用意しなくても、 <code>formdata</code> イベントの発行に応じて、 {{domxref("FormData")}} オブジェクトをすばやく取得することができます (<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>を参照)。</p>
+
+<h2 id="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{domxref("FormDataEvent.FormDataEvent","FormDataEvent()")}}</dt>
+ <dd>新しい <code>FormDataEvent</code> オブジェクトインスタンスを生成します。</dd>
+</dl>
+
+<h2 id="Properties">プロパティ</h2>
+
+<p><em>親インターフェイスである {{domxref("Event")}} からプロパティを継承しています。</em></p>
+
+<dl>
+ <dt>{{domxref("FormDataEvent.formData")}}</dt>
+ <dd>イベントが発行された時点のフォーム内に含まれるデータを表す {{domxref("FormData")}} オブジェクトです。</dd>
+</dl>
+
+<h2 id="Methods">メソッド</h2>
+
+<p><em>親インターフェイスである {{domxref("Event")}} からメソッドを継承しています。</em></p>
+
+<h2 id="Examples">例</h2>
+
+<pre class="brush: js">// フォームの参照を得る
+
+const formElem = document.querySelector('form');
+
+// submit ハンドラー
+
+formElem.addEventListener('submit', (e) =&gt; {
+  // on form submission, prevent default
+  e.preventDefault();
+
+  // FormData オブジェクトを構築し、 formdata イベントを発行させる
+  new FormData(formElem);
+});
+
+// データを受け取るための formdata ハンドラー
+
+formElem.addEventListener('formdata', (e) =&gt; {
+  console.log('formdata fired');
+
+  // イベントお武衛ジェクトからフォームデータを取得
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // XHR を通じてデータを送信
+  var request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+});</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li>{{domxref("FormData")}}</li>
+ <li><a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlformelement/formdata_event/index.html b/files/ja/web/api/htmlformelement/formdata_event/index.html
new file mode 100644
index 0000000000..1d63da9889
--- /dev/null
+++ b/files/ja/web/api/htmlformelement/formdata_event/index.html
@@ -0,0 +1,102 @@
+---
+title: 'HTMLFormElement: formdata イベント'
+slug: Web/API/HTMLFormElement/formdata_event
+tags:
+  - Event
+  - Forms
+  - Reference
+  - formevent
+browser-compat: api.HTMLFormElement.formdata_event
+translation_of: Web/API/HTMLFormElement/formdata_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>formdata</code></strong> イベントは、フォームのデータを表すエントリーリストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。</p>
+
+<h2 id="General_info">一般情報</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th>キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{DOMxRef("FormDataEvent")}}</td>
+  </tr>
+  <tr>
+   <th>イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers.onformdata")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">例</h2>
+
+<pre class="brush: js">// フォームの参照を得る
+
+const formElem = document.querySelector('form');
+
+// submit ハンドラー
+
+formElem.addEventListener('submit', (e) =&gt; {
+  // フォームの送信時、既定の動作を抑止
+  e.preventDefault();
+
+  // FormData オブジェクトを構築し、 formdata イベントが発行される
+  new FormData(formElem);
+});
+
+// データを受け取るための formdata ハンドラー
+
+formElem.addEventListener('formdata', (e) =&gt; {
+  console.log('formdata fired');
+
+  // イベントオブジェクトからフォームデータを取得する
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // XHR でデータを送信
+  var request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+});</pre>
+
+<p><code>onformdata</code> 版はこのようになります。</p>
+
+<pre class="brush: js">formElem.onformdata = (e) =&gt; {
+  console.log('formdata fired');
+
+  // イベントオブジェクトからフォームデータを取得する
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // XHR でデータを送信
+  var request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+};</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML の {{htmlElement("form")}} 要素</li>
+ <li>{{domxref("FormDataEvent")}}</li>
+</ul>