diff --git a/files/ja/web/html/element/form/index.md b/files/ja/web/html/element/form/index.md index 13da21a465d4f0..fd71b18ca3f490 100644 --- a/files/ja/web/html/element/form/index.md +++ b/files/ja/web/html/element/form/index.md @@ -1,6 +1,8 @@ --- -title: '
: フォーム要素' +title: ": フォーム要素" slug: Web/HTML/Element/form +l10n: + sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c --- {{HTMLSidebar}} @@ -9,61 +11,7 @@ slug: Web/HTML/Element/form {{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}} -CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)を使用すると、 `` 要素をフォーム内の{{domxref("HTMLFormElement.elements", "要素", "", 1)}}が有効であるかどうかに応じてスタイル付けすることができます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- コンテンツカテゴリー - - フローコンテンツ, 知覚可能コンテンツ -
許可されている内容 - フローコンテンツ。ただし、 <form> 要素を内包することは許可されていません。
タグの省略{{no_tag_omission}}
許可されている親要素 - フローコンテンツを受け入れるすべての要素 -
暗黙の ARIA ロール - form(フォームにアクセシブル名がある場合)、それ以外の場合は対応するロールなし -
許可されている ARIA ロール - search, none, presentation -
DOM インターフェイス{{domxref("HTMLFormElement")}}
+CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)を使用すると、`` 要素をフォーム内の{{domxref("HTMLFormElement.elements", "要素", "", 1)}}が有効であるかどうかに応じてスタイル付けすることができます。 ## 属性 @@ -71,16 +19,16 @@ CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス - `accept` {{deprecated_inline}} - - : サーバーが受け付けるコンテンツ型のカンマ区切りリストです。 + - : サーバーが受け付ける[コンテンツ型](/ja/docs/Web/SVG/Content_type)のカンマ区切りリストです。 - > **メモ:** この属性は HTML5 の仕様から削除されており、すでに使用不可となっています。代わりに個々の {{HTMLElement("input")}} 要素の [`accept`](/ja/docs/Web/HTML/Element/input#accept) 属性を使用してください。 + > **メモ:** **この属性は非推奨であり、使用すべきではありません。** 代わりに `` 要素の [`accept`](/ja/docs/Web/HTML/Element/input#accept) 属性を使用してください。 - `accept-charset` - - : サーバーが受け付ける空白区切りの[文字エンコーディング](/ja/docs/Glossary/character_encoding)です。ブラウザーは、列挙されたされた順に使用します。既定値は、[ページと同じエンコーディング](/ja/docs/Web/HTTP/Headers/Content-Encoding)を意味します。 - (以前のバージョンのHTMLでは、文字エンコーディングはカンマで区切ることもできました。) + - : サーバーが受け付ける空白区切りの{{Glossary("character encoding", "文字エンコーディング")}}です。ブラウザーは、列挙されたされた順に使用します。既定値は、[ページと同じエンコーディング](/ja/docs/Web/HTTP/Headers/Content-Encoding)を意味します。 + (以前のバージョンの HTML では、文字エンコーディングをカンマで区切ることもできました。) - `autocapitalize` {{non-standard_inline}} - - : これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の `autocapitalize` 属性は、 `` のものより優先します。指定可能な値は次の通りです。 + - : これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の `autocapitalize` 属性は、`` のものより優先します。指定可能な値は次の通りです。 - `none`: 自動大文字化機能を無効にします。 - `sentences`: 文の先頭文字を自動的に大文字化します。 @@ -91,72 +39,71 @@ CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス - : input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。フォーム要素の `autocomplete` 属性は、 `` のものより優先します。指定可能な値は次の通りです。 - - `off`: ブラウザーは自動的には項目を補完しません。(ブラウザーは、ログインフォームの疑いがある場合、これを無視する傾向があります。 [autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields)を参照してください。 + - `off`: ブラウザーは自動的には項目を補完しません。(ブラウザーは、ログインフォームが疑わしい場合、これを無視する傾向があります。[autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields)を参照してください。 - `on`: ブラウザーは自動的に項目を補完することがあります。 - `name` + - : フォームの名前。この値は空文字列であってはならず、また、フォームコレクションに含まれる `form` 要素がある場合は、その中で一意でなければなりません。 - `rel` - - : この値に応じてハイパーリンクや注釈を作成します。詳しくは [`rel`](/ja/docs/Web/HTML/Attributes/rel) 属性を参照してください。 + - : 注釈や、このフォームが作成するリンク種別を制御します。注釈には [`external`](/ja/docs/Web/HTML/Attributes/rel#external)、[`nofollow`](/ja/docs/Web/HTML/Attributes/rel#nofollow)、[`opener`](/ja/docs/Web/HTML/Attributes/rel#opener)、[`noopener`](/ja/docs/Web/HTML/Attributes/rel#noopener)、[`noreferrer`](/ja/docs/Web/HTML/Attributes/rel#noreferrer) があります。リンク種別には [`help`](/ja/docs/Web/HTML/Attributes/rel#help)、[`prev`](/ja/docs/Web/HTML/Attributes/rel#prev)、[`next`](/ja/docs/Web/HTML/Attributes/rel#next)、[`search`](/ja/docs/Web/HTML/Attributes/rel#search)、[`license`](/ja/docs/Web/HTML/Attributes/rel#license) があります。[`rel`](/ja/docs/Web/HTML/Attributes/rel) の値はこれらの列挙値の空白区切りの値です。 ### フォーム送信のための属性 以下の属性は、フォーム送信中の動作を制御します。 - `action` - - : フォーム経由で送信された情報を処理するプログラムの URL。この値は {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の [`formaction`](/ja/docs/Web/HTML/Element/button#formaction) 属性によって上書きすることが可能です。この属性は `method="dialog"` が設定されている場合は無視されます。 + - : フォーム経由で送信された情報を処理するプログラムの URL。この値は {{HTMLElement("button")}}、[``](/ja/docs/Web/HTML/Element/input/submit)、[``](/ja/docs/Web/HTML/Element/input/image) の [`formaction`](/ja/docs/Web/HTML/Element/button#formaction) 属性によって上書きすることが可能です。この属性は `method="dialog"` が設定されている場合は無視されます。 - `enctype` - : `method` 属性の値が `post` であるとき、この属性はフォームをサーバーに送信する際に使用する、コンテンツの [MIME タイプ](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%BF%E3%82%A4%E3%83%97)を示します。以下の値が指定可能です。 - - `application/x-www-form-urlencoded`: 既定値。属性を指定していない場合、この値が使用されます。 + - `application/x-www-form-urlencoded`: 既定値です。 - `multipart/form-data`: フォームが {{HTMLElement("input")}} の `type=file` を含む場合に使用してください。 - - `text/plain`: HTML5 でデバッグ用に導入されました。 + - `text/plain`: デバッグ用に有用です。 - この値は、{{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の [`formenctype`](/ja/docs/Web/HTML/Element/button#formenctype) 属性によって上書きすることが可能です。 + この値は、{{HTMLElement("button")}}、[``](/ja/docs/Web/HTML/Element/input/submit)、[``](/ja/docs/Web/HTML/Element/input/image) の [`formenctype`](/ja/docs/Web/HTML/Element/button#formenctype) 属性によって上書きすることが可能です。 - `method` - : フォームを送信する際にブラウザーが使用する [HTTP](/ja/docs/Web/HTTP) メソッドです。以下の値が指定可能です。 - - `post`: [POST メソッド](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)です。フォームのデータは[リクエスト本文](/ja/docs/Web/API/Request/body)として送信されます。 - - `get`: [GET メソッド](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)です。フォームのデータは `action` 属性の URL に `?` で区切って追加されます。このメソッドはフォームに[副作用がない](/ja/docs/Glossary/Idempotent)場合に使用してください。 - - `dialog`: フォームが {{HTMLElement("dialog")}} 要素の中にある場合に使用し、送信の操作を行うと、ダイアログが閉じて submit イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。 + - `post`: {{HTTPMethod("POST")}} メソッドです。フォームのデータは[リクエスト本体](/ja/docs/Web/API/Request/body)として送信されます。 + - `get`: {{HTTPMethod("GET")}} メソッドです。フォームのデータは `action` 属性の URL に `?` で区切って追加されます。このメソッドはフォームに[副作用がない](/ja/docs/Glossary/Idempotent)場合に使用してください。 + - `dialog`: フォームが {{HTMLElement("dialog")}} 要素の中にある場合に使用し、送信の操作を行うと、ダイアログが閉じて `submit` イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。 - この値は、 {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の [`formmethod`](/ja/docs/Web/HTML/Element/button#formmethod) 属性によって上書きすることが可能です。 + この値は、 {{HTMLElement("button")}}、[``](/ja/docs/Web/HTML/Element/input/submit)、[``](/ja/docs/Web/HTML/Element/input/image) の [`formmethod`](/ja/docs/Web/HTML/Element/button#formmethod) 属性によって上書きすることが可能です。 - `novalidate` - - : フォームを送信するときに検証しないことを示す論理値です。この属性を指定していない(つまり検証される)場合は、既定の設定を {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の [`formnovalidate`](/ja/docs/Web/HTML/Element/button#formnovalidate) 属性で上書きすることが可能です。 + - : フォームを送信するときに検証しないことを示す論理値です。この属性を指定していない(つまり検証される)場合は、既定の設定を {{HTMLElement("button")}}、[``](/ja/docs/Web/HTML/Element/input/submit)、[``](/ja/docs/Web/HTML/Element/input/image) の [`formnovalidate`](/ja/docs/Web/HTML/Element/button#formnovalidate) 属性で上書きすることが可能です。 - `target` - - : フォームを送信した後に受け取ったレスポンスの表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、_閲覧コンテキスト_ (例えば、タブ、ウィンドウ、インラインフレームなど)の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。 + - : フォームを送信した後に受け取ったレスポンスの表示先を示す名前またはキーワードです。これは _閲覧コンテキスト_(タブ、ウィンドウ、インラインフレームなど)の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。 - - `_self` (既定値): 現在と同じ閲覧コンテキストに読み込みます。 + - `_self`(既定値): 現在と同じ閲覧コンテキストに読み込みます。 - `_blank`: 無名の新しい閲覧コンテキストに読み込みます。 - - `_parent`: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、 `_self` と同じ動作をします。 - - `_top`: 最上位の閲覧コンテキスト(すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの)に読み込みます。親がない場合は、 `_self` と同じ動作をします。 + - `_parent`: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、`_self` と同じ動作をします。 + - `_top`: 最上位の閲覧コンテキスト(すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの)に読み込みます。親がない場合は、`_self` と同じ動作をします。 - この値は、 {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の [`formtarget`](/ja/docs/Web/HTML/Element/button#formtarget) 属性によって上書きすることが可能です。 - - > **メモ:** `target="_blank"` を `` 要素に設定すると、暗黙で `rel` の動作が [`rel="noopener"`](/ja/docs/Web/HTML/Link_types/noopener) を設定したのと同じになり、 `window.opener` を設定しません。 + この値は、 {{HTMLElement("button")}}、[``](/ja/docs/Web/HTML/Element/input/submit)、[``](/ja/docs/Web/HTML/Element/input/image) の [`formtarget`](/ja/docs/Web/HTML/Element/button#formtarget) 属性によって上書きすることが可能です。 ## 例 -### HTML - ```html - -