HTML - form 要素

概要

名前
form
カテゴリー
  • Flow content
  • Palpable content
配置できる場所
Flow content が期待される場所。
コンテンツモデル
なし。
説明
form 要素は、入力フォームを構成する様々な入力・選択部品 (テキスト入力フィールド、ボタン、メニューなど) をとりまとめ、それらのデータの取り扱いに関する設定を行う要素です。ユーザが送信ボタンを押すと、フォームの内容は action 属性で指定された URL に送信されます。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLFormElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
accept
accept-charset
action
autocapitalize××××××××
autocomplete
enctype
method
name
novalidate10411537
target
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
accept-charset
サーバが受け入れる文字エンコーディングのリストです。リストはスペースまたはコンマで区切ることができます。ブラウザは、それらがリストされている順序を優先順位として使用します。既定値である予約語 UNKNOWNform 要素を含む文書のエンコーディングと同じであることを示します。以前のバージョンの HTML では、さまざまな文字エンコーディングをスペースまたはコンマで区切ることができました。これは HTML5 ではあてはまらず、スペースだけが適切です。
action
フォーム経由で送信された情報を処理するプログラムの URI です。この値は button または inputformaction 属性によって上書きすることが可能です。
autocomplete
input 要素が既定で、ブラウザによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。
  • off: ユーザは、フォームを使用するたびにすべての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートすることはありません。
  • on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完のための候補として使用することができます。
現行ブラウザでは autocomplete 属性を設定しても、ブラウザのパスワードマネージャーがユーザにログイン情報 (ユーザ名やパスワード) を保存したいかを問い合わせる、またユーザが同意した場合に次回以降ページを訪れた際にログイン情報を自動入力することは抑制できません。ドキュメントで独自の入力補完を提供するため autocompleteoff に設定する場合は、フォーム内で入力補完が可能な各 input 要素でも autocompleteoff に設定するべきです。
enctype
method 属性の値が post であるとき、この属性はフォームをサーバに送信する際に使用します、 以下の値が指定可能です。
  • application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
  • multipart/form-data: type 属性で file を指定した input 要素のために使用する値です。
  • text/plain (HTML5)
method
フォームを送信する際にブラウザが使用する HTTP メソッドです。以下の値が指定可能です。
  • post: HTTP POST メソッドに相当します。フォームのデータはボディに収めてサーバに送信します。
  • get: GET メソッドに相当します。フォームのデータは ? をセパレーターとして action 属性の URI に追加して、その結果となる URI をサーバにー送信します。フォームが ASCII 文字列だけを含み副作用がない場合にのみ、このメソッドを使用してください。
  • dialog: フォームが dialog 要素の中にある場合に使用し、送信するとダイアログが閉じます。
この値は button または inputformmethod 属性によって上書きすることが可能です。
name
フォームの名前です。HTML 4 では推奨されていません。HTML 5 ではドキュメント内のフォーム間でユニークである必要があり、また空文字列であってはいけません。
target
フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、閲覧コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます:
  • _self: 応答を現在と同じ HTML 4 フレーム (または HTML5 閲覧コンテキスト) に表示します。この値は、属性が指定されていない場合の既定値です。
  • _blank: 応答を新しい名前のつけられていない、HTML 4 ウィンドウまたは HTML5 の閲覧コンテキストに読み込みます。
  • _parent: 応答を現在のフレームの HTML 4 フレームセットの親要素または HTML5 の現在の親閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
  • _top: HTML 4 では、応答を元のウィンドウ全体に読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルの閲覧コンテキストに読み込みます (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは _self と同じ振る舞いをします。
  • iframename: 応答を名前のついた iframe に読み込みます。
この値は button または inputformtarget 属性によって上書きすることが可能です。

非推奨の属性

以下の属性は非推奨、非標準、実験的、または廃止された属性のため、使用しないでください。

accept
非推奨。新しいウェブサイトでは使用しないでください。
autocapitalize
非標準。ブラウザ間の互換性が低い可能性があります。

サンプルコード

form 要素のサンプルコードは以下のとおりです。

<form action="" method="get">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>
form 要素のサンプルコード

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
34
Shares:
0
Tag:
HTML