From f445a0df5c49aad0ca5e781ac8a0c856ecc7c998 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 16 Jun 2023 23:43:16 +0900 Subject: [PATCH] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../htmlformelement/acceptcharset/index.md | 9 ++++--- .../web/api/htmlformelement/action/index.md | 7 ++--- .../web/api/htmlformelement/elements/index.md | 20 ++++++++++---- .../web/api/htmlformelement/encoding/index.md | 5 ++-- .../web/api/htmlformelement/enctype/index.md | 7 ++--- .../htmlformelement/formdata_event/index.md | 27 ++++++++++--------- .../web/api/htmlformelement/length/index.md | 9 ++++--- .../web/api/htmlformelement/method/index.md | 11 ++++---- .../ja/web/api/htmlformelement/name/index.md | 8 +++--- .../htmlformelement/reportvalidity/index.md | 15 +++++++---- .../htmlformelement/requestsubmit/index.md | 13 ++++++--- .../ja/web/api/htmlformelement/reset/index.md | 7 ++--- .../api/htmlformelement/reset_event/index.md | 15 ++++++----- .../api/htmlformelement/submit_event/index.md | 17 ++++++------ .../web/api/htmlformelement/target/index.md | 3 ++- 15 files changed, 102 insertions(+), 71 deletions(-) diff --git a/files/ja/web/api/htmlformelement/acceptcharset/index.md b/files/ja/web/api/htmlformelement/acceptcharset/index.md index da78e1a7ea1168..17aa6ab8a6b4cf 100644 --- a/files/ja/web/api/htmlformelement/acceptcharset/index.md +++ b/files/ja/web/api/htmlformelement/acceptcharset/index.md @@ -1,13 +1,14 @@ --- -title: HTMLFormElement.acceptCharset +title: "HTMLFormElement: acceptCharset プロパティ" +short-title: acceptCharset slug: Web/API/HTMLFormElement/acceptCharset l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} -**`HTMLFormElement.acceptCharset`** プロパティは、指定された {{htmlelement("form")}} 要素で対応している[文字エンコーディング](/ja/docs/Glossary/character_encoding) の一覧を表します。このリストは、カンマ区切りまたはスペース区切りで記述することができます。 +**`HTMLFormElement.acceptCharset`** プロパティは、指定された {{htmlelement("form")}} 要素で対応している[文字エンコーディング](/ja/docs/Glossary/Character_encoding) の一覧を表します。このリストは、カンマ区切りまたはスペース区切りで記述することができます。 ## 値 @@ -16,7 +17,7 @@ l10n: ## 例 ```js -let inputs = document.forms['myform'].acceptCharset; +let inputs = document.forms["myform"].acceptCharset; ``` ## 仕様書 diff --git a/files/ja/web/api/htmlformelement/action/index.md b/files/ja/web/api/htmlformelement/action/index.md index af6370046f6713..3a3614682ddb50 100644 --- a/files/ja/web/api/htmlformelement/action/index.md +++ b/files/ja/web/api/htmlformelement/action/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.action +title: "HTMLFormElement: action プロパティ" +short-title: action slug: Web/API/HTMLFormElement/action l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -18,7 +19,7 @@ l10n: ## 例 ```js -form.action = '/cgi-bin/publish'; +form.action = "/cgi-bin/publish"; ``` ## 仕様書 diff --git a/files/ja/web/api/htmlformelement/elements/index.md b/files/ja/web/api/htmlformelement/elements/index.md index 4f1eb5a51fa83e..f886ecf890c49e 100644 --- a/files/ja/web/api/htmlformelement/elements/index.md +++ b/files/ja/web/api/htmlformelement/elements/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.elements +title: "HTMLFormElement: elements プロパティ" +short-title: elements slug: Web/API/HTMLFormElement/elements l10n: - sourceCommit: 03f91ed2e2c6123fbf711f1759c7e99a2dc63de6 + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -43,9 +44,18 @@ HTML 5 より前のバージョンでは、返されるオブジェクトは {{d ```html
- - - + + +
``` diff --git a/files/ja/web/api/htmlformelement/encoding/index.md b/files/ja/web/api/htmlformelement/encoding/index.md index 048beef2615b2a..6ce6222173e9cc 100644 --- a/files/ja/web/api/htmlformelement/encoding/index.md +++ b/files/ja/web/api/htmlformelement/encoding/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.encoding +title: "HTMLFormElement: encoding プロパティ" +short-title: encoding slug: Web/API/HTMLFormElement/encoding l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} diff --git a/files/ja/web/api/htmlformelement/enctype/index.md b/files/ja/web/api/htmlformelement/enctype/index.md index f3cc603eeb2181..0eb19d630c2af7 100644 --- a/files/ja/web/api/htmlformelement/enctype/index.md +++ b/files/ja/web/api/htmlformelement/enctype/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.enctype +title: "HTMLFormElement: enctype プロパティ" +short-title: enctype slug: Web/API/HTMLFormElement/enctype l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -22,7 +23,7 @@ l10n: ## 例 ```js -form.enctype = 'application/x-www-form-urlencoded'; +form.enctype = "application/x-www-form-urlencoded"; ``` ## 仕様書 diff --git a/files/ja/web/api/htmlformelement/formdata_event/index.md b/files/ja/web/api/htmlformelement/formdata_event/index.md index 08e878e550ac8c..97e9f0c05d4098 100644 --- a/files/ja/web/api/htmlformelement/formdata_event/index.md +++ b/files/ja/web/api/htmlformelement/formdata_event/index.md @@ -1,8 +1,9 @@ --- -title: 'HTMLFormElement: formdata イベント' +title: "HTMLFormElement: formdata イベント" +short-title: formdata slug: Web/API/HTMLFormElement/formdata_event l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef}} @@ -16,9 +17,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。 ```js -addEventListener('formdata', (event) => {}); +addEventListener("formdata", (event) => {}); -onformdata = (event) => { }; +onformdata = (event) => {}; ``` ## イベント型 @@ -39,11 +40,11 @@ _親インターフェイスである {{domxref("Event")}} から継承したプ ```js // フォームの参照を得る -const formElem = document.querySelector('form'); +const formElem = document.querySelector("form"); // submit ハンドラー -formElem.addEventListener('submit', (e) => { +formElem.addEventListener("submit", (e) => { // フォームの送信時、既定の動作を抑止 e.preventDefault(); @@ -53,8 +54,8 @@ formElem.addEventListener('submit', (e) => { // FormData オブジェクトを構築し、 formdata イベントが発行される const formData = new FormData(formElem); // formdata は formdata イベントで変更されます。 - console.log(formData.get('field1')); // foo - console.log(formData.get('field2')); // bar + console.log(formData.get("field1")); // foo + console.log(formData.get("field2")); // bar }); // データを受け取るための formdata ハンドラー @@ -65,8 +66,8 @@ formElem.addEventListener('formdata', (e) => { // イベントオブジェクトからフォームデータを取得する const formData = e.formData; // formdata イベントでフォームデータを変更する - formData.set('field1', formData.get('field1').toLowerCase()); - formData.set('field2', formData.get('field2').toLowerCase()); + formData.set("field1", formData.get("field1").toLowerCase()); + formData.set("field2", formData.get("field2").toLowerCase()); }); ``` @@ -74,12 +75,12 @@ formElem.addEventListener('formdata', (e) => { ```js formElem.onformdata = (e) => { - console.log('formdata fired'); + console.log("formdata fired"); // フォームデータを変更 const formData = e.formData; - formData.set('field1', formData.get('field1').toLowerCase()); - formData.set('field2', formData.get('field2').toLowerCase()); + formData.set("field1", formData.get("field1").toLowerCase()); + formData.set("field2", formData.get("field2").toLowerCase()); }; ``` diff --git a/files/ja/web/api/htmlformelement/length/index.md b/files/ja/web/api/htmlformelement/length/index.md index af9bf548a3a637..65f14fb5d9f008 100644 --- a/files/ja/web/api/htmlformelement/length/index.md +++ b/files/ja/web/api/htmlformelement/length/index.md @@ -1,13 +1,14 @@ --- -title: HTMLFormElement.length +title: "HTMLFormElement: length プロパティ" +short-title: length slug: Web/API/HTMLFormElement/length l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} -**HTMLFormElement.length`** は読み取り専用のプロパティで、 {{HTMLElement("form")}} 要素に含まれるコントロールの数を返します。 +**`HTMLFormElement.length`** は読み取り専用のプロパティで、 {{HTMLElement("form")}} 要素に含まれるコントロールの数を返します。 フォームのコントロールの一覧には {{domxref("HTMLFormElement.elements", "elements")}} プロパティを使用してアクセスすることができます。 @@ -22,7 +23,7 @@ l10n: ## 例 ```js -if (document.getElementById('form1').length > 1) { +if (document.getElementById("form1").length > 1) { // 複数のフォームコントロールがある場合 } ``` diff --git a/files/ja/web/api/htmlformelement/method/index.md b/files/ja/web/api/htmlformelement/method/index.md index de24a611b32bb7..cca8bac9ec4183 100644 --- a/files/ja/web/api/htmlformelement/method/index.md +++ b/files/ja/web/api/htmlformelement/method/index.md @@ -1,15 +1,16 @@ --- -title: HTMLFormElement.method +title: "HTMLFormElement: method プロパティ" +short-title: method slug: Web/API/HTMLFormElement/method l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} -**`HTMLFormElement.method`** プロパティは、 {{HtmlElement("form")}} を送信するために使用される {{Glossary("HTTP")}} メソッドを表します。 +**`HTMLFormElement.method`** プロパティは、{{HtmlElement("form")}} を送信するために使用される {{Glossary("HTTP")}} メソッドを表します。 -明示的に指定されない場合、既定のメソッドは 'get' です。 +明示的に指定されなかった場合、既定のメソッドは 'get' です。 ## 値 @@ -18,7 +19,7 @@ l10n: ## 例 ```js -document.forms['myform'].method = 'post'; +document.forms["myform"].method = "post"; const formElement = document.createElement("form"); // フォームを生成 document.body.appendChild(formElement); diff --git a/files/ja/web/api/htmlformelement/name/index.md b/files/ja/web/api/htmlformelement/name/index.md index 5c6ff2df99641e..4b20bdee5dedb7 100644 --- a/files/ja/web/api/htmlformelement/name/index.md +++ b/files/ja/web/api/htmlformelement/name/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.name +title: "HTMLFormElement: name プロパティ" +short-title: name slug: Web/API/HTMLFormElement/name l10n: - sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -10,7 +11,6 @@ l10n: **`HTMLFormElement.name`** プロパティは、現在の {{HtmlElement("form")}} 要素の名前を文字列で表します。 {{HTMLElement("Form")}} 要素の中に _name_ という名前の要素があると、その要素は `form.name` プロパティを上書きするので、それにアクセスすることはできません。 -Internet Explorer (IE) は `createElement()` を使用して作成された要素の name 属性を `name` プロパティで設定したり変更したりすることを許可していません。 ## 値 @@ -19,7 +19,7 @@ Internet Explorer (IE) は `createElement()` を使用して作成された要 ## 例 ```js -const form1name = document.getElementById('form1').name; +const form1name = document.getElementById("form1").name; if (form1name !== document.form.form1) { // ブラウザーがこの形の参照に対応していない diff --git a/files/ja/web/api/htmlformelement/reportvalidity/index.md b/files/ja/web/api/htmlformelement/reportvalidity/index.md index 0cc4a3eb7e25bf..cac3f2b47a35c3 100644 --- a/files/ja/web/api/htmlformelement/reportvalidity/index.md +++ b/files/ja/web/api/htmlformelement/reportvalidity/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.reportValidity() +title: "HTMLFormElement: reportValidity() メソッド" +short-title: reportValidity() slug: Web/API/HTMLFormElement/reportValidity l10n: - sourceCommit: 8573240024adc1eef906b4b2df35567144fd733e + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -24,9 +25,13 @@ reportValidity() ## 例 ```js -document.forms['myform'].addEventListener('submit', () => { - document.forms['myform'].reportValidity(); -}, false); +document.forms["myform"].addEventListener( + "submit", + () => { + document.forms["myform"].reportValidity(); + }, + false +); ``` ## 仕様書 diff --git a/files/ja/web/api/htmlformelement/requestsubmit/index.md b/files/ja/web/api/htmlformelement/requestsubmit/index.md index 8f63878a70e431..c880723dbb0cf0 100644 --- a/files/ja/web/api/htmlformelement/requestsubmit/index.md +++ b/files/ja/web/api/htmlformelement/requestsubmit/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.requestSubmit() +title: "HTMLFormElement: requestSubmit() メソッド" +short-title: requestSubmit() slug: Web/API/HTMLFormElement/requestSubmit l10n: - sourceCommit: 8573240024adc1eef906b4b2df35567144fd733e + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -20,7 +21,11 @@ requestSubmit(submitter) - `submitter` {{optional_inline}} - - : フォームを送信するための方法を記述した属性がある送信ボタンです。これは {{HTMLElement("input")}} または {{HTMLElement("button")}} 要素で `type` 属性が `submit` のものです。 + - : このフォームのメンバーである{{Glossary("submit button", "送信ボタン")}}です。 + + `submitter` が `form*` 属性を指定している場合、このフォームの送信動作を[上書きします](/ja/docs/Glossary/Submit_button#フォームの動作の上書き)（`formmethod="POST"` など）。 + + `submitter` に `name` 属性があるか`{{HtmlElement('input/image', '<input type="image">')}}` であった場合、フォームの送信時にそのデータが[含まれます](/ja/docs/Glossary/Submit_button#フォームデータ項目)（`btnName=btnValue` など）。 `submitter` 引数を省略した場合、このフォーム要素自身が送信者として使用されます。 @@ -31,7 +36,7 @@ requestSubmit(submitter) ### 例外 - {{jsxref("TypeError")}} - - : 指定された `submitter` が送信ボタンでない場合に発生します。 + - : 指定された `submitter` が{{Glossary("submit button", "送信ボタン")}}でなかった場合に発生します。 - `NotFoundError` {{domxref("DOMException")}} - : 指定された `submitter` が、 `requestSubmit()` が呼び出されたフォームのメンバーでない場合に発生します。submitter は form 要素の子孫であるか、フォームを参照する [`form`](/ja/docs/Web/HTML/Element/input#form) 属性を持たなければなりません。 diff --git a/files/ja/web/api/htmlformelement/reset/index.md b/files/ja/web/api/htmlformelement/reset/index.md index ae010be9c071f5..41bdfef93cb97f 100644 --- a/files/ja/web/api/htmlformelement/reset/index.md +++ b/files/ja/web/api/htmlformelement/reset/index.md @@ -1,8 +1,9 @@ --- -title: HTMLFormElement.reset() +title: "HTMLFormElement: reset() メソッド" +short-title: reset() slug: Web/API/HTMLFormElement/reset l10n: - sourceCommit: 8573240024adc1eef906b4b2df35567144fd733e + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef("HTML DOM")}} @@ -30,7 +31,7 @@ reset() ## 例 ```js -document.getElementById('myform').reset(); +document.getElementById("myform").reset(); ``` ## 仕様書 diff --git a/files/ja/web/api/htmlformelement/reset_event/index.md b/files/ja/web/api/htmlformelement/reset_event/index.md index 3ec818f9429510..70222298cfb2bb 100644 --- a/files/ja/web/api/htmlformelement/reset_event/index.md +++ b/files/ja/web/api/htmlformelement/reset_event/index.md @@ -1,8 +1,9 @@ --- title: "HTMLFormElement: reset イベント" +short-title: reset slug: Web/API/HTMLFormElement/reset_event l10n: - sourceCommit: a36633398f827c87eb593f9647ed00bf33fd5b34 + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef}} @@ -14,9 +15,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。 ```js -addEventListener('reset', (event) => {}); +addEventListener("reset", (event) => {}); -onreset = (event) => { }; +onreset = (event) => {}; ``` ## イベント型 @@ -42,12 +43,12 @@ onreset = (event) => { }; ```js function logReset(event) { - log.textContent = `Form reset! Time stamp: ${event.timeStamp}`; + log.textContent = `Form reset! Timestamp: ${event.timeStamp}`; } -const form = document.getElementById('form'); -const log = document.getElementById('log'); -form.addEventListener('reset', logReset); +const form = document.getElementById("form"); +const log = document.getElementById("log"); +form.addEventListener("reset", logReset); ``` ### 結果 diff --git a/files/ja/web/api/htmlformelement/submit_event/index.md b/files/ja/web/api/htmlformelement/submit_event/index.md index 7c097d5a0a4212..fda16caad34442 100644 --- a/files/ja/web/api/htmlformelement/submit_event/index.md +++ b/files/ja/web/api/htmlformelement/submit_event/index.md @@ -1,8 +1,9 @@ --- title: "HTMLFormElement: submit イベント" +short-title: submit slug: Web/API/HTMLFormElement/submit_event l10n: - sourceCommit: a36633398f827c87eb593f9647ed00bf33fd5b34 + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef}} @@ -11,7 +12,7 @@ l10n: `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` イベントは、ユーザーが{{Glossary("submit button", "送信ボタン")}}を押したり、 Enter キーをフォーム内のフィールド（例えば {{HtmlElement('input/text', '<input type="text">')}}）の編集中に押したりしたときに発生します。このイベントは {{domxref("HTMLFormElement.submit()", "form.submit()")}} メソッドを呼び出した場合には送信されません。 > **メモ:** [フォームの検証](/ja/docs/Learn/Forms/Form_validation)に合格していないフォームを送信しようとすると、 {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントが発生します。この場合、フォーム検証が送信を阻止しますので、 `submit` イベントは発生しません。 @@ -20,9 +21,9 @@ l10n: このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを使用するかしてください。 ```js -addEventListener('submit', (event) => {}); +addEventListener("submit", (event) => {}); -onsubmit = (event) => { }; +onsubmit = (event) => {}; ``` ## イベント型 @@ -57,13 +58,13 @@ _以下に列挙したプロパティに加えて、このインターフェイ ```js function logSubmit(event) { - log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`; + log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`; event.preventDefault(); } -const form = document.getElementById('form'); -const log = document.getElementById('log'); -form.addEventListener('submit', logSubmit); +const form = document.getElementById("form"); +const log = document.getElementById("log"); +form.addEventListener("submit", logSubmit); ``` ### 結果 diff --git a/files/ja/web/api/htmlformelement/target/index.md b/files/ja/web/api/htmlformelement/target/index.md index 4f8864ee733a0f..44a6548829fac4 100644 --- a/files/ja/web/api/htmlformelement/target/index.md +++ b/files/ja/web/api/htmlformelement/target/index.md @@ -1,5 +1,6 @@ --- -title: HTMLFormElement.target +title: "HTMLFormElement: target プロパティ" +short-title: target slug: Web/API/HTMLFormElement/target l10n: sourceCommit: 277e5969c63b97cfb55ab4a0e612e8040810f49b