HTMLフォームの属性

HTMLフォーム HTML フォーム要素

この章では、HTML <form> 要素のさまざまな属性について説明します。

アクション属性

action 属性は、フォームの送信時に実行されるアクションを定義します。

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

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

例

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

<form action="/demo_form.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 属性には、次のいずれかの値を指定できます。

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

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

例

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

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

自分で試してみてください

Method 属性

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

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

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

例

この例では、フォーム データを送信するときに GET メソッドを使用します。

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

自分で試してみてください

例

この例では、フォーム データを送信するときに POST メソッドを使用します。

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

自分で試してみてください

GET に関する注意:

  • フォーム データを名前と値のペアとして URL に追加します
  • 機密データの送信には GET を使用しないでください。 (送信されたフォーム データは URL に表示されます!)
  • URL の長さは制限されています (2048 文字)
  • ユーザーが結果をブックマークしたい場合のフォーム送信に役立ちます
  • GET は、Google のクエリ文字列など、安全でないデータ用です

POST に関する注意:

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

ヒント: フォーム データに機密情報や個人情報が含まれている場合は、必ず POST を使用してください。

Autocomplete 属性

autocomplete 属性は、フォームのオートコンプリートをオンにするかどうかを指定します。

オートコンプリートが有効になっている場合、ブラウザはユーザーが入力した以前の値に基づいて値を自動的に入力します。

例

自動入力フォームを有効にする:

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

自分で試してみてください

Novalidate 属性

novalidate 属性はブール属性です。

設定した場合、送信時にフォーム データを検証しないように指定します。

例

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

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

自分で試してみてください

すべての <form> 属性のリスト

属性 説明
accept-charset フォーム送信に使用する文字エンコーディングを指定します。
action は、フォームが送信されるときにフォーム データを送信する場所を指定します。
autocomplete フォームのオートコンプリート (入力) をオンにするかどうかを指定します。
enctype は、サーバーに送信するときにフォーム データをエンコードする方法を指定します (method="post" の場合のみ)。
method フォーム データを送信するときに使用する HTTP メソッドを指定します。
name はフォームの名前を指定します。
novalidate は、送信時にフォームを検証しないことを指定します。
rel は、リンクされたリソースと現在のドキュメントの間の関係を指定します。
target は、フォームの送信後に受信した応答を表示する場所を指定します。
HTMLフォーム HTML フォーム要素