From 64d717a674899b27c9653024f7b818c253264022 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 11 Jan 2022 23:50:25 +0900 Subject: 2021/11/18 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/form/index.md | 360 ++++++++++++++++---------------- 1 file changed, 180 insertions(+), 180 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/html/element/form/index.md b/files/ja/web/html/element/form/index.md index a0e559ae56..83b3bf4e8d 100644 --- a/files/ja/web/html/element/form/index.md +++ b/files/ja/web/html/element/form/index.md @@ -1,200 +1,200 @@ --- -title:
+title: ': フォーム要素' slug: Web/HTML/Element/form tags: + - 要素 + - フォーム要素 + - フォーム - HTML + - HTML フォーム要素 - HTML フォーム - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' - - Reference + - リファレンス - ウェブ - - フォーム - - 要素 +browser-compat: html.elements.form translation_of: Web/HTML/Element/form --- -
{{HTMLRef}}
-

HTML の <form> 要素は、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。

+{{HTMLRef}} -
{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}
+**``** は [HTML](/ja/docs/Web/HTML) の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。 - +{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}} -

<form> 要素には、 CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} 疑似クラスを使用して整形することが可能です。

+CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)を使用すると、 `` 要素をフォーム内の{{domxref("HTMLFormElement.elements", "要素", "", 1)}}が有効であるかどうかに応じてスタイル付けすることができます。 - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 知覚可能コンテンツ
許可されている内容フローコンテンツ。ただし、<form> 要素の中に別の <form> 要素を内包することは許可されていません。
タグの省略{{no_tag_omission}}
許可されている親要素フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール{{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM インターフェイス{{domxref("HTMLFormElement")}}
+ コンテンツカテゴリー + + フローコンテンツ, 知覚可能コンテンツ +
許可されている内容 + フローコンテンツ。ただし、 <form> 要素を内包することは許可されていません。
タグの省略{{no_tag_omission}}
許可されている親要素 + フローコンテンツを受け入れるすべての要素 +
暗黙の ARIA ロール + form（フォームにアクセシブル名がある場合）、それ以外の場合は対応するロールなし +
許可されている ARIA ロール + search, {{ARIARole("none")}}, {{ARIARole("presentation")}} +
DOM インターフェイス{{domxref("HTMLFormElement")}}
-

属性

- -

この要素にはグローバル属性があります。

- -
-
{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}
-
サーバーが受け付けるコンテンツ型のコンマ区切りリスト。 -
使用上のメモ: この属性は HTML5 の仕様から削除されており、すでに使用不可となっています。代わりに個々の {{HTMLElement("input")}} 要素の {{htmlattrxref("accept", "input")}} 属性を使用してください。
-
-
{{htmlattrdef("accept-charset")}}
-
サーバーが受け入れる文字エンコーディングのリスト。リストはスペースまたはコンマで区切ることができます。ブラウザーは、それらがリストされている順序を優先順位として使用します。既定値である予約語 "UNKNOWN" は、 form 要素を含む文書のエンコーディングと同じであることを示します。
- 以前のバージョンの HTML では、さまざまな文字エンコーディングをスペースまたはコンマで区切ることができました。これは HTML5 ではあてはまらず、スペースだけが適切です。
-
{{htmlattrdef("action")}}
-
フォーム経由で送信された情報を処理するプログラムの URI。この値は {{HTMLElement("button")}}, <input type="submit">, <input type="image"> の {{htmlattrxref("formaction", "button")}} 属性によって上書きすることが可能です。
-
{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
-
これは iOS 版 Safari Mobile で使用する非標準属性であり、子孫の文字列型フォームコントロールでユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。autocapitalize 属性を個別にフォームコントロール子孫要素で指定した場合は、フォーム全体に設定した autocapitalize より優先します。非推奨とされていない値は、iOS 5 以降で使用できます。既定値は sentences です。以下の値を指定できます。 -
    -
  • none: 自動大文字化機能を無効にします。
    • -
  • sentences: 文の先頭文字を自動的に大文字化します。
    • -
  • words: 単語の先頭文字を自動的に大文字化します。
    • -
  • characters: すべての文字を自動的に大文字化します。
    • -
  • on: {{deprecated_inline}} iOS 5 から非推奨です。
    • -
  • off: {{deprecated_inline}} iOS 5 から非推奨です。
    • -
-
-
{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}
-
input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。 -
    -
  • off: ユーザーは、フォームを使用するたびにすべての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザーが入力補完をサポートすることはありません。
    • -
  • on: ブラウザーはユーザーが以前に入力した値に基づき、これを自動補完のための候補として使用することができます。
    • -
- ほとんどの現行ブラウザー (Firefox 38+、Google Chrome 34+、IE 11+ など) では autocomplete 属性を設定しても、ブラウザーのパスワードマネージャーがユーザーにログイン情報 (ユーザー名やパスワード) を保存したいかを問い合わせる、またユーザーが同意した場合に次回以降ページを訪れた際にログイン情報を自動入力することは抑制できません。autocomplete 属性とログインフィールドをご覧ください。
-
-
-

メモ: 文書で独自の入力補完を提供するために autocomplete を off に設定する場合は、フォーム内で入力補完が可能なそれぞれの input 要素でも autocomplete を off に設定するべきです。詳しくは、互換性一覧表の Google Chrome に関するメモを参照してください。

-
-
-
{{htmlattrdef("enctype")}}
-
method 属性の値が post であるとき、この属性はフォームをサーバーに送信する際に使用する、コンテンツの MIME タイプを示します。以下の値が指定可能です。 -
    -
  • application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
    • -
  • multipart/form-data: type 属性で "file" を指定した {{HTMLElement("input")}} 要素のために使用する値です。
    • -
  • text/plain: (HTML5)
    • -
- -

この値は、 {{HTMLElement("button")}}, <input type="submit">, <input type="image"> の {{htmlattrxref("formenctype", "button")}} 属性によって上書きすることが可能です。

-
-
{{htmlattrdef("method")}}
-
フォームを送信する際にブラウザーが使用する HTTP メソッドです。以下の値が指定可能です。 -
    -
  • post: HTTP POST メソッドに相当します。フォームのデータはボディに収めてサーバーに送信します。
    • -
  • get: HTTP GET メソッドに相当します。フォームのデータは '?' をセパレーターとして action 属性の URI に追加して、その結果となる URI をサーバにー送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。
    • -
  • dialog: フォームが {{HTMLElement("dialog")}} 要素の中にある場合に使用し、送信するとダイアログが閉じます。
    • -
- -

この値は、 {{HTMLElement("button")}}, <input type="submit">, <input type="image"> の {{htmlattrxref("formmethod", "button")}} 属性によって上書きすることが可能です。

-
-
{{htmlattrdef("name")}}
-
フォームの名前です。HTML 4 では推奨されていません（代わりに id を用いるべきです）。HTML 5 ではドキュメント内のフォーム間でユニークである必要があり、また空文字列であってはいけません。
-
{{htmlattrdef("novalidate")}} {{HTMLVersionInline("5")}}
-
フォームを送信するときに検証しないことを示す真偽値です。この属性を指定していない（つまり検証される）場合は、既定の設定を {{HTMLElement("button")}}, <input type="submit">, <input type="image"> の {{htmlattrxref("formnovalidate", "button")}} 属性で上書きすることが可能です。
-
{{htmlattrdef("target")}}
-
フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、閲覧コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます: -
    -
  • _self: 応答を現在と同じ HTML 4 フレーム (または HTML5 閲覧コンテキスト) に表示します。この値は、属性が指定されていない場合の既定値です。
    • -
  • _blank: 応答を新しい名前のつけられていない、HTML 4 ウィンドウまたは HTML5 の閲覧コンテキストに読み込みます。
    • -
  • _parent: 応答を現在のフレームの HTML 4 フレームセットの親要素または HTML5 の現在の親閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
    • -
  • _top: HTML 4 では、応答を元のウィンドウ全体に読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルの閲覧コンテキストに読み込みます (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは _self と同じ振る舞いをします。
    • -
  • iframename: 応答を、名前のついた {{HTMLElement("iframe")}} に読み込みます。
    • -
- -

HTML5: この値は、 {{HTMLElement("button")}}, <input type="submit">, <input type="image"> の {{htmlattrxref("formtarget", "button")}} 属性によって上書きすることが可能です。

-
-
- -

例

- -

HTML

- -
<!-- Simple form which will send a GET request -->
-<form action="" method="get">
-  <label for="GET-name">Name:</label>
-  <input id="GET-name" type="text" name="name">
-  <input type="submit" value="Save">
-</form>
-
-<!-- POST 要求を送信する簡単なフォーム -->
-<form action="" method="post">
-  <label for="POST-name">Name:</label>
-  <input id="POST-name" type="text" name="name">
-  <input type="submit" value="Save">
-</form>
-
-<!-- fieldset、legend、label を用いたフォームのマークアップの例 -->
-<form action="" method="post">
-  <fieldset>
-    <legend>Title</legend>
-    <input type="radio" name="radio" id="radio">
-    <label for="radio">Click me</label>
-  </fieldset>
-</form>
-
- -

{{ EmbedLiveSample('Examples', '100%', 110) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}{{Spec2('HTML4.01')}}初回定義
+## 属性 + +この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。 + +- {{htmlattrdef("accept")}} {{deprecated_inline}} + + - : サーバーが受け付けるコンテンツ型のカンマ区切りリストです。 + + > **Note:** この属性は HTML5 の仕様から削除されており、すでに使用不可となっています。代わりに個々の {{HTMLElement("input")}} 要素の {{htmlattrxref("accept", "input")}} 属性を使用してください。 + +- {{htmlattrdef("accept-charset")}} + - : サーバーが受け付ける空白区切りの[文字エンコーディング](/ja/docs/Glossary/character_encoding)です。ブラウザーは、列挙されたされた順に使用します。既定値は、[ページと同じエンコーディング](/ja/docs/Web/HTTP/Headers/Content-Encoding)を意味します。 + （以前のバージョンのHTMLでは、文字エンコーディングはカンマで区切ることもできました。） +- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}} + + - : これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の `autocapitalize` 属性は、 `` のものより優先します。指定可能な値は次の通りです。 + + - `none`: 自動大文字化機能を無効にします。 + - `sentences`: 文の先頭文字を自動的に大文字化します。 + - `words`: 単語の先頭文字を自動的に大文字化します。 + - `characters`: すべての文字を自動的に大文字化します。 + +- {{htmlattrdef("autocomplete")}} + + - : input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。フォーム要素の `autocomplete` 属性は、 `` のものより優先します。指定可能な値は次の通りです。 + + - `off`: ブラウザーは自動的には項目を補完しません。（ブラウザーは、ログインフォームの疑いがある場合、これを無視する傾向があります。 [autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields)を参照してください。 + - `on`: ブラウザーは自動的に項目を補完することがあります。 + +- {{htmlattrdef("name")}} + - : フォームの名前。この値は空文字列であってはならず、また、フォームコレクションに含まれる `form` 要素がある場合は、その中で一意でなければなりません。 +- {{htmlattrdef("rel")}} + - : この値に応じてハイパーリンクや注釈を作成します。詳しくは [`rel`](/ja/docs/Web/HTML/Attributes/rel) 属性を参照してください。 + +### フォーム送信のための属性 + +以下の属性は、フォーム送信中の動作を制御します。 + +- {{htmlattrdef("action")}} + - : フォーム経由で送信された情報を処理するプログラムの URL。この値は {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の {{htmlattrxref("formaction", "button")}} 属性によって上書きすることが可能です。この属性は `method="dialog"` が設定されている場合は無視されます。 +- {{htmlattrdef("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`: 既定値。属性を指定していない場合、この値が使用されます。 + - `multipart/form-data`: フォームが {{HTMLElement("input")}} の `type=file` を含む場合に使用してください。 + - `text/plain`: HTML5 でデバッグ用に導入されました。 + + この値は、{{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の {{htmlattrxref("formenctype", "button")}} 属性によって上書きすることが可能です。 + +- {{htmlattrdef("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 イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。 + + この値は、 {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の {{htmlattrxref("formmethod", "button")}} 属性によって上書きすることが可能です。 + +- {{htmlattrdef("novalidate")}} + - : フォームを送信するときに検証しないことを示す論理値です。この属性を指定していない（つまり検証される）場合は、既定の設定を {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の {{htmlattrxref("formnovalidate", "button")}} 属性で上書きすることが可能です。 +- {{htmlattrdef("target")}} + + - : フォームを送信した後に受け取ったレスポンスの表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、_閲覧コンテキスト_ （例えば、タブ、ウィンドウ、インラインフレームなど）の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。 + + - `_self` (既定値): 現在と同じ閲覧コンテキストに読み込みます。 + - `_blank`: 無名の新しい閲覧コンテキストに読み込みます。 + - `_parent`: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、 `_self` と同じ動作をします。 + - `_top`: 最上位の閲覧コンテキスト（すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの）に読み込みます。親がない場合は、 `_self` と同じ動作をします。 + + この値は、 {{HTMLElement("button")}}, [``](/ja/docs/Web/HTML/Element/input/submit), [``](/ja/docs/Web/HTML/Element/input/image) の {{htmlattrxref("formtarget", "button")}} 属性によって上書きすることが可能です。 + + > **Note:** `target="_blank"` を `` 要素に設定すると、暗黙で `rel` の動作が [`rel="noopener"`](/ja/docs/Web/HTML/Link_types/noopener) を設定したのと同じになり、 `window.opener` を設定しません。 + +## 例 + +### HTML + +```html + + + + +
+ + +
+ + +
+ + +
+
+ Title + +
+
+``` + +{{ EmbedLiveSample('Examples', '100%', 110) }} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

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

{{Compat("html.elements.form")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [HTML フォームガイド](/ja/docs/Learn/Forms) +- フォームの作成に使用される、その他の要素: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} +- フォーム内の要素一覧の取得: {{domxref("HTMLFormElement.elements")}} +- [ARIA: Form ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [ARIA: Search ロール](/ja/docs/Web/Accessibility/ARIA/Roles/Search_role) -- cgit v1.2.3-54-g00ecf