【6日でできるHTML＆CSS入門】フォームによるデータの送信

　Webサイトで「お問い合わせ」「会員登録」「アンケート」など、ユーザーから情報を入力してもらう場面はとても多くあります。こうしたユーザーの入力を受け取るための仕組みがフォームです。フォームは、テキストボックスやラジオボタン、送信ボタンなどの入力欄をまとめて管理し、入力されたデータをサーバーへ送信する役割を持ちます。

　本記事では、フォームの基本構造や各種入力フィールド、データの送信方法（GETとPOST）、そしてサンプルHTMLを使いながら、フォームの使い方と仕組みについて詳しく解説します。

１．フォームの基本構造と作成方法

1.1. フォームとは

　フォームとは、ユーザーから情報を効率よく入力してもらうための入力画面や入力欄の集合です。たとえば、Web上のアンケートや、資料請求、登録画面でよく利用されます。

1.2. フォームのサンプルとタグ解説

実際に、シンプルなフォームを作成してみましょう。
例）お問い合わせフォーム

ファイル名： lesson42_1.html

<!DOCTYPE html>
<html>
<head>
  <title>お問い合わせフォーム</title>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: sans-serif;
      padding: 30px;
    }
    form {
      width: 350px;
      margin: 0 auto;
      background: #f9f9f9;
      padding: 16px;
      border-radius: 6px;
    }
    .form-group {
      margin-bottom: 14px;
    }
    label {
      display: block;
      margin-bottom: 4px;
      font-weight: bold;
    }
    input[type="text"],
    textarea {
      width: 100%;
      padding: 6px;
      box-sizing: border-box;
      font-size: 1em;
    }
    textarea {
      min-height: 60px;
    }
    .radio-group {
      margin-bottom: 4px;
    }
    input[type="submit"] {
      padding: 8px 18px;
      font-size: 1em;
      border: none;
      border-radius: 4px;
      background: #3399cc;
      color: #fff;
      cursor: pointer;
    }
    input[type="submit"]:hover {
      background: #21709b;
    }
  </style>
</head>
<body>
  <form method="GET" action="sample-form.html" autocomplete="off">
    <div class="form-group">
      <label for="user">お名前</label>
      <input type="text" id="user" name="user" placeholder="例：佐藤花子">
    </div>
    <div class="form-group">
      <label>ご希望の連絡方法</label>
      <div class="radio-group">
        <label><input type="radio" name="contact" value="メール" checked>メール</label>
        <label><input type="radio" name="contact" value="電話">電話</label>
      </div>
    </div>
    <div class="form-group">
      <label for="message">ご用件</label>
      <textarea id="message" name="message" placeholder="ご用件を入力してください"></textarea>
    </div>
    <input type="submit" value="送信">
  </form>
</body>
</html>

表示結果

お名前（テキストボックス）
ご希望の連絡方法（ラジオボタン：メール／電話）
ご用件（テキストエリア）
送信ボタン

２．フォームの主なタグと属性の解説

2.1. フォームを構成する主なタグ

タグ	主な役割・属性	詳細な説明
`<form>`	method, action	フォームの開始・終了を示し、送信方法や送信先を指定する。
`<input>`	type, name, placeholder, value	テキスト入力、ラジオボタン、ボタンなど多様な入力に使う。
`<textarea>`	name, rows, cols, placeholder	複数行テキスト入力用
`<label>`	for	入力欄のラベル。for属性で対応するinput/textareaと連携
`<br>`	—	改行を入れる。
`<b>`	—	文字を太字で表示（視覚的強調）

2.2. 主要な属性のポイント

属性	主な役割	使用例
method	データ送信方法（GET/POST）	<form method="GET" ...>
action	データ送信先のURL	<form action="...">
type	入力欄の種類（text, radio, submitなど）	<input type="text">
name	入力欄の識別名（データ送信時に必要）	<input name="user">
value	初期値やボタンの表示内容	<input value="送信">
placeholder	入力欄未入力時に表示される案内テキスト	<input placeholder="例：佐藤花子">
for	ラベルがどの入力欄と対応するかを指定	<label for="user">
checked	ラジオ・チェックボックスの初期選択状態	<input type="radio" checked>
rows	テキストエリアの行数	<textarea rows="4">

３．フォームのデータ送信方法

3.1. GETとPOSTの違い

送信方法	特徴	主な用途
GET	データをURLの末尾に付与して送信	検索、データの閲覧（再現性あり）
POST	データを本文に含めて送信、URLには表示されない。	パスワード、個人情報の送信

GETの例

http://example.com/sample-form.html?user=佐藤花子&contact=メール&message=こんにちは

URLに入力値が含まれる
データが短い場合や再現性が必要な場合に利用

POSTの特徴

URLにはパラメータが表示されない。
長い文章や機密性の高いデータに適している。

3.2. name属性の重要性

フォーム内の入力要素には必ずname属性をつけること
送信時に「name=値」という形でデータが送信される

まとめ

フォームはWebページでユーザーからデータを集めるための必須要素です。
　主なタグ（form、input、textarea、labelなど）の使い方や、GET/POSTの違い、name属性の役割を理解し、正しいフォームを作成できるようにしましょう。
サンプルHTMLを実際に作成して、動作やデータの送信方法を確認することが理解への近道です。