【6日でできるHTML入門】フォームの作成

　Webサイト上でアンケートを行ったり、ユーザーから情報を受け取ったりするには、HTMLのフォーム要素を使って「入力画面」を作成します。本章では、フォームの基本から主要な入力コントロール、そしてフォームをまとめる<form>タグの使い方までを、サンプルHTMLとともに詳しく解説します。

１．フォームとは…？

　フォームは、ユーザーに文字や選択肢を入力させ、その情報をサーバーへ送信するための仕組みです。以下のような要素を使って構成します。

要素名	タグ/属性	用途
ラベル	<label>	入力コントロールの説明文（ラベル）をグループ化
テキスト入力	<input type="text">	一行テキストボックス
テキストエリア	<textarea>	複数行テキスト入力
チェックボックス	<input type="checkbox">	複数選択可能なチェックボックス
ラジオボタン	<input type="radio">	単一選択のラジオボタン
セレクトメニュー	<select>, <option>	ドロップダウンリスト
ボタン	<input type="submit/reset/button"> または <button>	送信・クリア・任意操作のボタン
フォーム領域	<form action="" method="">	送信先・送信方式を指定するフォーム本体

注意: HTMLだけでは送信後の処理は行えず、CGIやPHPなどサーバー側プログラムが必要になります。

２．ラベルによる関連付け `<label>`

<label>タグで囲むと、文字部分をクリックしても対応する入力欄にフォーカスが移動します。

ファイル名： lesson30-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📋 ラベルの例</title>
  <style>
    label { font-weight: bold; }
  </style>
</head>
<body>
  <p>
    <label>
      お名前：<input type="text" name="username" size="20">
    </label>
  </p>
</body>
</html>

ポイント：ユーザビリティを向上させる必須テクニックです。

ブラウザの出力例

３．for属性を使用した関連付け

<label for="ID">と<input id="ID">を組み合わせても同様に関連付けが可能です。

属性	説明
for	対応するフォーム要素の`id`属性値を指定

ファイル名： lesson30-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📋 for属性の例</title></head>
<body>
  <p>
    <label for="email">メール：</label>
    <input type="email" id="email" name="email" size="25">
  </p>
</body>
</html>

ブラウザの出力例

４．テキストボックス・テキストエリア `<input>`, `<textarea>`

属性	説明
name	サーバーへ送信する際のキー名
size	`<input>`の表示幅（文字数）
cols	`<textarea>`の列数（文字数）
rows	`<textarea>`の行数

一行入力: <input type="text" name="" size="">
複数行入力: <textarea name="" cols="" rows=""></textarea>

ファイル名： lesson30-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📋 テキスト入力の例</title>
  <style>
    textarea { vertical-align: top; }
  </style>
</head>
<body>
  <h1>📋 コメント欄</h1>
  <p>
    <label for="comment">ご意見：</label><br>
    <textarea id="comment" name="comment" cols="40" rows="5"></textarea>
  </p>
</body>
</html>

ブラウザの出力例

５．チェックボックス・ラジオボタン `<input>`

ファイル名： lesson30-4.html

type	説明
checkbox	複数選択可能
radio	同じ`name`内で一つだけ選択可能

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📋 選択入力の例</title></head>
<body>
  <h1>📋 アンケート</h1>
  <form>
    <p>— 趣味を選んでください（複数可） —<br>
      <label><input type="checkbox" name="hobby" value="sports">スポーツ</label>
      <label><input type="checkbox" name="hobby" value="music">音楽</label>
      <label><input type="checkbox" name="hobby" value="travel">旅行</label>
    </p>
    <p>— 性別を選んでください —<br>
      <label><input type="radio" name="gender" value="male">男性</label>
      <label><input type="radio" name="gender" value="female">女性</label>
    </p>
  </form>
</body>
</html>

ブラウザの出力例

６．セレクトメニュー `<select>`, `<option>`

要素	説明
<select>	ドロップダウンリスト
<option>	リスト項目。`value`属性で送信値を指定

ファイル名： lesson30-5.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📋 セレクトの例</title></head>
<body>
  <h1>📋 注文フォーム</h1>
  <form>
    <label for="size">用紙サイズ：</label>
    <select id="size" name="size">
      <option value="">選択してください</option>
      <option value="A3">A3</option>
      <option value="A4">A4</option>
      <option value="A5">A5</option>
    </select>
  </form>
</body>
</html>

ブラウザの出力例

７．ボタン `<input>`, `<button>`

タグ／type	説明
<input>	`type="submit"`(送信), `reset`(クリア), `button`(任意)
<button>	同上だがコンテンツ内にHTMLが置ける

ファイル名： lesson30-6.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📋 ボタンの例</title></head>
<body>
  <form>
    <input type="submit" value="送信">
    <input type="reset"  value="クリア">
    <button type="button" onclick="alert('クリック')">テスト</button>
  </form>
</body>
</html>

ブラウザの出力例

８．フォーム領域の指定 `<form>`

属性	説明
action	送信先プログラムのURLまたはファイル名
method	`get`または`post`。大容量データは`post`推奨
enctype	`application/x-www-form-urlencoded`(標準)`multipart/form-data`(ファイル送信)

ファイル名： lesson30-7.html

フォーム要素をまとめ、送信先や方式を指定します。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📋 フォーム全体の例</title></head>
<body>
  <h1>📋 お問い合わせ</h1>
  <form action="submit.php" method="post" enctype="multipart/form-data">
    <p><label for="name">お名前：</label><input type="text" id="name" name="name" size="20"></p>
    <p><label for="email">メール：</label><input type="email" id="email" name="email" size="25"></p>
    <p><label for="message">内容：</label><textarea id="message" name="message" cols="40" rows="5"></textarea></p>
    <p><input type="submit" value="送信"></p>
  </form>
</body>
</html>

ブラウザの出力例

まとめ

フォーム要素はユーザー入力を受け取るためのインターフェース。
<label> でラベルと入力欄を関連付け、操作性を向上。
<input> や <textarea>, <select> など、多彩なコントロールが利用可能。
<form> タグで送信先 (action)・方式 (method)・形式 (enctype) をまとめて指定。

　基本的なタグと属性を押さえておけば、アンケートやお問い合わせフォームはもちろん、複雑な注文フォームやログイン画面まで自由に作成できます。実際に手を動かして、さまざまなフォームを試してみましょう！

【6日でできるHTML入門】フォームの作成