<form>: フォーム要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<form>
は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
試してみましょう
属性
この要素にはグローバル属性があります。
accept
非推奨-
サーバーが受け付けるコンテンツ型のカンマ区切りリストです。
メモ: この属性は非推奨であり、使用すべきではありません。 代わりに
<input type=file>
要素のaccept
属性を使用してください。 accept-charset
-
サーバーが受け付ける空白区切りの文字エンコーディングです。ブラウザーは、列挙されたされた順に使用します。既定値は、ページと同じエンコーディングを意味します。 (以前のバージョンの HTML では、文字エンコーディングをカンマで区切ることもできました。)
autocapitalize
Non-standard-
これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の
autocapitalize
属性は、<form>
のものより優先します。指定可能な値は次の通りです。none
: 自動大文字化機能を無効にします。sentences
: 文の先頭文字を自動的に大文字化します。words
: 単語の先頭文字を自動的に大文字化します。characters
: すべての文字を自動的に大文字化します。
autocomplete
-
input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。フォーム要素の
autocomplete
属性は、<form>
のものより優先します。指定可能な値は次の通りです。off
: ブラウザーは自動的には項目を補完しません。(ブラウザーは、ログインフォームが疑わしい場合、これを無視する傾向があります。autocomplete 属性とログインフィールドを参照してください。on
: ブラウザーは自動的に項目を補完することがあります。
name
-
フォームの名前。この値は空文字列であってはならず、また、フォームコレクションに含まれる
form
要素がある場合は、その中で一意でなければなりません。 rel
-
注釈や、このフォームが作成するリンク種別を制御します。注釈には
external
、nofollow
、opener
、noopener
、noreferrer
があります。リンク種別にはhelp
、prev
、next
、search
、license
があります。rel
の値はこれらの列挙値の空白区切りの値です。
フォーム送信のための属性
以下の属性は、フォーム送信中の動作を制御します。
action
-
フォーム経由で送信された情報を処理するプログラムの URL。この値は
<button>
、<input type="submit">
、<input type="image">
のformaction
属性によって上書きすることが可能です。この属性はmethod="dialog"
が設定されている場合は無視されます。 enctype
-
method
属性の値がpost
であるとき、この属性はフォームをサーバーに送信する際に使用する、コンテンツの MIME タイプを示します。以下の値が指定可能です。application/x-www-form-urlencoded
: 既定値です。multipart/form-data
: フォームが<input>
のtype=file
を含む場合に使用してください。text/plain
: デバッグ用に有用です。
この値は、
<button>
、<input type="submit">
、<input type="image">
のformenctype
属性によって上書きすることが可能です。 method
-
フォームを送信する際にブラウザーが使用する HTTP メソッドです。以下の値が指定可能です。
post
:POST
メソッドです。フォームのデータはリクエスト本体として送信されます。get
:GET
メソッドです。フォームのデータはaction
属性の URL に?
で区切って追加されます。このメソッドはフォームに副作用がない場合に使用してください。dialog
: フォームが<dialog>
要素の中にある場合に使用し、送信の操作を行うと、ダイアログが閉じてsubmit
イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。
この値は、
<button>
、<input type="submit">
、<input type="image">
のformmethod
属性によって上書きすることが可能です。 novalidate
-
フォームを送信するときに検証しないことを示す論理値です。この属性を指定していない(つまり検証される)場合は、既定の設定を
<button>
、<input type="submit">
、<input type="image">
のformnovalidate
属性で上書きすることが可能です。 target
-
フォームを送信した後に受け取ったレスポンスの表示先を示す名前またはキーワードです。これは 閲覧コンテキスト(タブ、ウィンドウ、インラインフレームなど)の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。
_self
(既定値): 現在と同じ閲覧コンテキストに読み込みます。_blank
: 無名の新しい閲覧コンテキストに読み込みます。_parent
: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、_self
と同じ動作をします。_top
: 最上位の閲覧コンテキスト(すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの)に読み込みます。親がない場合は、_self
と同じ動作をします。
この値は、
<button>
、<input type="submit">
、<input type="image">
のformtarget
属性によって上書きすることが可能です。
例
<!-- 現在の URL に GET リクエストを送信するフォーム -->
<form method="get">
<label>
Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>
<!-- 現在の URL に POST リクエストを送信するフォーム -->
<form method="post">
<label>
Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>
<!-- fieldset, legend, label のあるフォーム -->
<form method="post">
<fieldset>
<legend>Do you agree to the terms?</legend>
<label><input type="radio" name="radio" value="yes" /> Yes</label>
<label><input type="radio" name="radio" value="no" /> No</label>
</fieldset>
</form>
結果
技術的概要
コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | フローコンテンツ。ただし、 <form> 要素を内包することは許可されていません。 |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | form (フォームにアクセシブル名がある場合)、それ以外の場合は対応するロールなし。 |
許可されている ARIA ロール |
search ,
none ,
presentation
|
DOM インターフェイス | HTMLFormElement |
仕様書
Specification |
---|
HTML Standard # the-form-element |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML フォームガイド
- フォームの作成に使用される、その他の要素:
<button>
,<datalist>
,<fieldset>
,<input>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
- フォーム内の要素一覧の取得:
HTMLFormElement.elements
- ARIA: Form ロール
- ARIA: Search ロール