<form>要素

<form>要素の定義

英語で形や姿を現す”form”より。
IT関連で「フォーム」というと所定の形式を持った書式や入力欄、を表していることが多い。HTML文書では、Webサーバーに情報を送るための対話型コントロールを含むセクションに<form>要素を使用します。

子要素として使用できるもの

フローコンテンツを使用できますが、<form>要素自体を入れ子にすることはできません。

親要素として使えるもの

フローコンテンツを受け入れるすべての要素。

許可されているARIAロール

group, presentation

DOMインターフェース

HTMLFormElement

属性

グローバル属性が指定できます。

accept-charset

サーバーが受け入れる文字エンコーディングのリストをスペースで区切って指定します。
デフォルトは”unknown”で、これはHTML文書と同じ文字エンコーディングであることを示します。

action

フォーム経由で送信された情報を処理するプログラムのURLを記載します。<button> 要素や <input> 要素に”formaction”属性が指定されていた場合は、そちらが優先されます。

autocomplete

子要素の <input> 要素がブラウザーによる値の入力補完を受けるかを示します。フォーム内の各要素に autocomplete属性が指定されていた場合は、そちらが優先されます。

• off ： ブラウザーが入力補完をサポートすることはありません。
• on ： ブラウザーはユーザーが以前に入力した値に基づき、これを自動補完のための候補として使用することができます。

ただし、この属性を指定しても、ブラウザーが用意しているパスワードマネージャーなどの機能でログイン情報を自動入力することは抑制できません。

enctype

method属性が”post”の場合、フォームをサーバーに送信するときに使用する、コンテンツのMIMEタイプを指定します。
<button> 要素や <input> 要素に”formenctype”属性が指定されていた場合は、そちらが優先されます。

method

フォームを送信する際にブラウザーが使用する HTTP メソッドです。以下の値が指定可能です。

• post ： POSTメソッドを使用します。この場合、フォームのデータはボディー内に収めて送信されます。
• get ： GETメソッドを使用します。フォームのデータは ‘?’ をセパレーターとして action 属性の URI に追加して、その結果となる URI をサーバにー送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。
• dialog ： フォームが <dialog> 要素の中にある場合に使用し、送信するとダイアログが閉じます。

<button> 要素や <input> 要素に”formmethod”属性が指定されていた場合は、そちらが優先されます。

name

フォームの名前を指定します。ドキュメント内でユニークである必要があります。また、空文字列であってもいけません。

novalidate

フォームを送信するときに検証しないことを示す真偽値です。この属性を指定しない場合で、<button> 要素や <input> 要素に”formnovalidate”属性が指定されていた場合は、そちらが優先されます。

target

フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。

• _self ： （デフォルト値）応答を現在と同じ閲覧コンテキストに表示します。この値は、属性が指定されていない場合の既定値です。
• _blank ： 応答を新しい名前のつけられていない閲覧コンテキストに読み込みます。
• _parent ： 応答を現在の親閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
• _top ： 応答をトップレベルの閲覧コンテキストに読み込みます（現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です）親要素がない場合、このオプションは _self と同じ振る舞いをします。
• iframename ： 応答を名前のついた <iframe> 要素内に読み込みます。

<button> 要素や <input> 要素に”formtarget”属性が指定されていた場合は、そちらが優先されます。

サンプル

See the Pen OJLwYKw by Masahiko Iwakiri (@m-iwakiri) on CodePen.