HTML フォーム属性

この章ではHTMLについて紹介します <form> 要素の異なる属性。

Action属性

action 属性はフォームを送信する際に実行する操作を定義します。

通常、ユーザーが「提交」ボタンをクリックすると、フォームデータがサーバー上のファイルに送信されます。

以下の例では、フォームデータが「action_page.php」と呼ばれるファイルに送信されます。このファイルにはフォームデータを処理するサーバーサイドのスクリプトが含まれています：

例

送信後、フォームデータを「action_page.php」に送信します：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

自分で試してみる

ヒント：action属性を省略すると、actionを現在のページに設定します。

Target属性

target 属性はフォームデータを送信した後に応答をどこに表示するかを定義します。

target 属性は以下のいずれかの値を設定できます：

値 説明
_blank 応答が新しいウィンドウまたはタブに表示されます。
_self 応答が現在のウィンドウに表示されます。
_parent 応答が親フレームに表示されます。
_top 応答がウィンドウの全体のbodyに表示されます。
framename 応答が名前付きiframeに表示されます。

デフォルト値は _self、これは現在のウィンドウで応答が開かれることを意味します。

例

ここでは、送信された結果が新しいブラウザタブで開かれます：

<form action="/action_page.php" target="_blank">

自分で試してみる

Method属性

method属性は、フォームデータを送信する際に使用するHTTPメソッドを指定します。

フォームデータはURL変数として使用できます（使用 method="get"）またはHTTP POSTトランザクション（使用 method="post"）を送信します。

フォームデータを送信する際のデフォルトのHTTPメソッドはGETです。

例

この例では、フォームデータを送信する際にGETメソッドを使用しています：

<form action="/action_page.php" method="get">

自分で試してみる

例

この例では、フォームデータを送信する際にPOSTメソッドを使用しています：

<form action="/action_page.php" method="post">

自分で試してみる

GETに関する注意点：

  • フォームデータを名前/値対の形式でURLに追加します
  • 決してGETを使用して敏感データを送信しないでください！（送信されたフォームデータはURLに表示されます！）
  • URLの長さには制限があります（2048文字）
  • ユーザーが結果をブックマークに追加したいフォームの送信に非常に役立ちます。
  • GETは非安全データ、例えばGoogleのクエリ文字列に適しています。

POSTに関する注意点：

  • フォームデータをHTTPリクエストの本文に付加します（URLに表示されないようにするため）
  • POSTにはサイズの制限がなく、大量のデータを送信するのに使用できます。
  • POSTを使用するフォームの送信ではブックマークを追加できません

ヒント：フォームデータに敏感情報や個人情報が含まれている場合は、POSTを使用する必要があります！

Autocomplete 属性

autocomplete 属性はフォームが自動完成機能を有効にするかどうかを定義します。

自動完成機能を有効にすると、ブラウザはユーザーが以前に入力した値に基づいて自動的に値を入力します。

例

自動入力機能を有効にするフォーム：

<form action="/action_page.php" autocomplete="on">

自分で試してみる

Novalidate 属性

novalidate 属性はボルン属性です。

設定されている場合、フォームデータの送信時に検証しないことを指定します。

例

novalidate 属性が設定されていないフォーム：

<form action="/action_page.php" novalidate>

自分で試してみる

すべての <form> 属性の一覧

属性 説明
accept-charset フォーム送信に使用する文字エンコーディングを指定します。
action フォームを送信する際にフォームデータをどこに送信するかを指定します。
autocomplete フォームに自動完成（入力）機能を有効にするかどうかを指定します。
enctype フォームデータをサーバーに送信する際にどのようにエンコードするかを指定します（method="post"のみ）。
method フォームデータを送信する際に使用する HTTP メソッドを指定します。
name フォームの名前を指定します。
novalidate フォームの送信時にフォームデータを検証しないように指定します。
rel リンクリソースと現在のドキュメントの関係を指定します。
target フォームを送信した後にどこに受信した応答を表示するかを指定します。