HTMLフォームの使い方完全ガイド｜タグ構造から送信までの全体像

HTMLフォームとは何か

HTMLのフォーム（<form>タグ）は、ユーザーが入力した情報をサーバーへ送信するための仕組みです。
ログインフォーム、検索フォーム、お問い合わせフォームなど、ウェブ上のやり取りには欠かせません。

例：検索フォーム

<form action="/search" method="GET">
  <input type="text" name="q" placeholder="検索ワード">
  <button type="submit">検索</button>
</form>

基本構造と必須属性

<form>タグとaction属性

  • action：送信先URL（空だと現在のページに送信）
  • method：送信方法（GETかPOST）
<form action="/submit" method="POST">
  <!-- フォーム内容 -->
</form>

GETとPOSTの違い

methodデータの送信方法主な用途特徴
GETURLパラメータとして送信検索、ページ切り替えブックマーク可、URLに見える
POSTリクエストボディに送信ログイン、登録、送信フォームURLに表示されない

入力フォームの部品（input要素）

<form>
  <label>名前：
    <input type="text" name="username" required>
  </label>
  <label>メール：
    <input type="email" name="email">
  </label>
  <label>年齢：
    <input type="number" name="age" min="0">
  </label>
  <label>パスワード：
    <input type="password" name="password">
  </label>
</form>

ラジオボタンとチェックボックス

<p>性別：</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<p>興味のある分野：</p>
<label><input type="checkbox" name="interest" value="html"> HTML</label>
<label><input type="checkbox" name="interest" value="css"> CSS</label>

ファイルアップロード

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="profile_image">
  <button type="submit">アップロード</button>
</form>

※enctype="multipart/form-data"が必須

セレクトボックスとテキストエリア

<label>国：
  <select name="country">
    <option value="jp">日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
  </select>
</label>

<label>自己紹介：
  <textarea name="bio" rows="4" cols="40"></textarea>
</label>

送信とリセット

<button type="submit">送信</button>
<button type="reset">リセット</button>
  • type="submit"：フォームを送信
  • type="reset"：入力内容を初期化

フォームのバリデーション（入力チェック）

<form>
  <input type="text" name="username" required placeholder="必須入力">
  <input type="email" name="email" pattern=".+@.+\..+" title="メール形式で入力してください">
  <button type="submit">送信</button>
</form>

フォーム送信の仕組みとサーバー側の処理

GET送信例

/search?q=HTML

POST送信例（リクエストボディ）

username=John&email=john@example.com

セキュリティの注意点

  • CSRF対策：送信元が正しいかをトークンで検証
  • XSS対策：入力値をHTMLエスケープ
  • SQLインジェクション対策：プレースホルダー付きSQLを使う

まとめと次のステップ

  • <form>タグは入力と送信の基本
  • 部品や属性を組み合わせて自由にカスタマイズ可能
  • 次はJavaScriptで動的なバリデーションやAjax送信に挑戦すると実用度がアップ

-HTML/CSS