HTML 速習チュートリアル

HTML フォーム属性

<form> 要素には、ユーザーが入力したデータを「どのように」「どこへ」送信するかを定義するための様々な属性があります。これらを正しく設定することで、フォームの挙動を詳細にコントロールできます。

1. action 属性

action 属性は、フォームが送信されたときに実行されるアクション（送信先）を定義します。通常、これはフォームデータを処理するためのサーバー側スクリプト（PHP, Python, Node.js など）の URL です。

<form action="/action_page.php">
</form>
[!TIP]
action 属性が省略された場合、データは現在のページ自体に送信されます。

2. target 属性

target 属性は、フォーム送信後に返ってくるレスポンス（処理結果画面など）をどこに表示するかを指定します。

値説明
_selfデフォルト。現在のウィンドウで表示します。
_blank新しいウィンドウやタブで表示します。
_parent親フレームで表示します。
_topウィンドウの全文（すべてのフレームを解除）で表示します。

3. method 属性

method 属性は、データを送信する際の HTTP メソッド を指定します。主に GET と POST の2種類があります。

3.1 GET メソッド

URL の末尾にデータを付与（?name=value&...）して送信します。

  • 用途: 検索フォームなど、ブックマーク可能なページ。
  • 制限: 送信できるデータ量に制限があり、パスワードなどの機密情報には絶対に使用しないでください。

3.2 POST メソッド

HTTP リクエストの本文（ボディ）にデータを含めて送信します。

  • 用途: ログイン、個人情報の送信、ファイルアップロード。
  • 利点: データ量の制限がなく、URL にデータが表示されないため、セキュリティ面で GET より優れています。

4. autocomplete 属性

autocomplete 属性は、ブラウザに自動補完機能（過去の入力履歴を表示する機能）を使用するかどうかを指示します。

  • on: デフォルト。ブラウザは入力を補助します。
  • off: 入力履歴を表示させたくない場合（クレジットカード情報の入力欄など）に使用します。
<form action="/action_page.php" autocomplete="on">
</form>

5. novalidate 属性

novalidate 属性は、フォーム送信時にブラウザによる入力チェック（バリデーション）をスキップしたい場合に使用します。これは論理属性（属性名だけで機能する属性）です。

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

6. まとめ

属性説明
action送信先の URL。
methodHTTP メソッド (GET または POST)。
target結果を表示する場所 (_blank など)。
autocomplete自動補完の有効 (on) / 無効 (off)。
novalidateブラウザバリデーションを行わない。
enctype送信データのエンコード形式（ファイル送信時は multipart/form-data が必須）。

フォーム要素全体の「司令塔」となるこれらの属性を理解すれば、バックエンドとの連携もスムーズになりますね。