HTMLフォームの基本構造

このページの目的

ユーザーが情報を入力し、サイトに送信するための「フォーム」を作成する、基本的なHTMLタグの使い方を学びます。
<label>と<input>を正しく紐付けるなど、アクセシビリティ（使いやすさ）にも配慮した、セマンティックなフォーム構造をマスターすることが目標です。

checklistやることリスト

  • <form>タグで、フォーム全体を囲む
  • <label>タグで、各入力欄の項目名を作成する
  • <input>タグの様々なtype属性（text, email, password, checkbox, radioなど）を理解する
  • 複数行のテキスト入力欄である<textarea>の使い方を学ぶ
  • 送信ボタンとして<button type="submit">を配置する

buildフォームの基本構造と主要タグ

フォームは、いくつかの異なるタグを組み合わせて作成します。

1. フォーム全体を囲む <form>

すべての入力欄やボタンは、この<form>タグで囲む必要があります。action属性には送信先のURL、method属性には送信方法（POSTが一般的）を指定します。

<form action="submit.php" method="POST">
  ...この中にすべての入力部品が入る...
</form>

2. 項目名を作る <label>

「お名前」「メールアドレス」といった、入力欄の項目名を作るためのタグです。for属性と、対応する<input>のid属性を同じ値にすることで、両者が関連付けられ、ラベルをクリックしても入力欄にフォーカスが当たるようになります。

<label for="user-name">お名前</label>
<input type="text" id="user-name" name="user_name">

3. 入力欄を作る <input>

type属性を変えることで、様々な形式の入力欄を作ることができます。

type="text"
一行のテキスト入力欄（名前など）
type="email"
メールアドレス専用の入力欄（簡易的な形式チェック機能付き）
type="password"
パスワード用の入力欄（入力内容が黒丸で表示される）
type="checkbox"
複数選択可能なチェックボックス
type="radio"
一つだけ選択可能なラジオボタン

4. 複数行の入力欄を作る <textarea>

「お問い合わせ内容」のような、長い文章を入力するためのテキストエリアです。

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="user_message" rows="5"></textarea>

5. 送信ボタンを作る <button>

フォームの内容を送信するためのボタンです。type="submit"を指定するのが一般的です。

<button type="submit">送信する</button>

warningよくある間違いと対策

<label>を使わず、<p>タグなどで項目名を書いている
必ず<label>を使い、for属性とid属性で入力欄と紐付けましょう。ユーザビリティとアクセシビリティが大きく向上します。
ラジオボタンが複数選択できてしまう
同じグループのラジオボタンには、必ず同じname属性（例: name="gender"）を指定しましょう。これにより、グループ内で一つしか選択できなくなります。
すべての入力欄をtype="text"で作ってしまう
「メールアドレス」にはtype="email"、「電話番号」にはtype="tel"など、用途に合ったtype属性を使うことで、スマートフォンで入力する際に最適なキーボードが表示されるようになります。
arrow_back Tips集トップへ戻る