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 フォームを送信した後、受信した応答をどこに表示するかを指定します。