<form>: フォーム要素
<form>
は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
試してみましょう
CSS の :valid
および :invalid
擬似クラスを使用すると、 <form>
要素をフォーム内の要素が有効であるかどうかに応じてスタイル付けすることができます。
コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 | フローコンテンツ。ただし、 <form> 要素を内包することは許可されていません。 |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | form (フォームにアクセシブル名がある場合)、それ以外の場合は対応するロールなし |
許可されている ARIA ロール | search , none (en-US) , presentation |
DOM インターフェイス | HTMLFormElement |
属性
この要素にはグローバル属性があります。
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
-
この値に応じてハイパーリンクや注釈を作成します。詳しくは
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
: HTML5 でデバッグ用に導入されました。
この値は、
<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
-
フォームを送信した後に受け取ったレスポンスの表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレームなど)の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。
_self
(既定値): 現在と同じ閲覧コンテキストに読み込みます。_blank
: 無名の新しい閲覧コンテキストに読み込みます。_parent
: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、_self
と同じ動作をします。_top
: 最上位の閲覧コンテキスト(すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの)に読み込みます。親がない場合は、_self
と同じ動作をします。
この値は、
<button>
,<input type="submit">
,<input type="image">
のformtarget
属性によって上書きすることが可能です。メモ:
target="_blank"
を<form>
要素に設定すると、暗黙でrel
の動作がrel="noopener"
を設定したのと同じになり、window.opener
を設定しません。
例
HTML
<!-- 現在の URL に GET リクエストを送信するフォーム -->
<form>
<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>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
仕様書
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 ロール