【HTML】フォーム（Form）の基本構造とコーディング規則まとめ

HTML

Webサイトにおけるユーザーとの最大の接点、それがフォーム（form）です。

お問い合わせ、会員登録、アンケートなど、用途は多岐にわたりますが、アクセシビリティやユーザーの使いやすさ（EFO）を考慮した正しいマークアップをしないと、離脱の原因になってしまいます。

今回は、フォームを構成する基本タグの使い方から、安全で使いやすいフォーム作りのための規則を備忘録としてまとめました。

1. フォームの全体像と <form> タグの基本

フォーム全体は必ず <form> タグで囲みます。このタグには、データをどこに・どうやって送るかを指定する重要な属性があります。

HTML
<form action="/contact/confirm" method="post">
</form>
  • action: ユーザーが入力したデータを送信する先のURLを指定します。
  • method: データの送信方法を指定します。
    • post: お問い合わせやログインなど、データを新しく登録・更新する場合（URLにデータが表示されないため安全）。
    • get: サイト内検索など、データを検索・取得する場合（URLの後ろに入力内容が付与される）。

2. 主要な入力パーツとマークアップ規則

フォーム内では、用途に合わせた適切なパーツ（input、select、textarea など）を選びます。

① <label> タグで入力欄と項目名を紐付ける（必須推奨）

項目名（テキスト）と入力欄は、必ず <label> タグを使って関連付けます。これにより、項目名をクリックしても入力欄にフォーカスが当たる（またはチェックが入る）ようになり、操作性が大幅に向上します。

紐付け方には2通りあります。

パターンA（非内包型）：id と for で紐付ける（推奨）

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

パターンB（内包型）：<label> で丸ごと囲む

HTML
<label>
  お名前
  <input type="text" name="username">
</label>

② ラジオボタンとチェックボックスの使い分け

  • ラジオボタン（type="radio"）: 複数の選択肢から1つだけを選ばせる場合。
  • チェックボックス（type="checkbox"）: 複数の選択肢から複数を同時選択させたい場合、または「規約に同意する」などの単一のチェック。
HTML
<p>ご希望の連絡方法：</p>
<label><input type="radio" name="contact-method" value="email"> メール</label>
<label><input type="radio" name="contact-method" value="tel"> 電話</label>
<p>興味のある分野（複数選択可）：</p>
<label><input type="checkbox" name="interest[]" value="html"> HTML</label>
<label><input type="checkbox" name="interest[]" value="css"> CSS</label>
<label><input type="checkbox" name="interest[]" value="js"> JavaScript</label>

⚠️ 注意点

ラジオボタンで1つのグループ（例：性別や都道府県）にするには、必ず同じ name 属性を指定する必要があります。

③ 選択肢から選ばせるセレクトボックス（プルダウン）

多数の選択肢から1つを選ばせる場合は、<select> タグと <option> タグを組み合わせます。ラジオボタンと違って画面のスペースを取らないのがメリットです。

HTML
非内包型
<label for="prefecture">お住まいの都道府県</label>
<select id="prefecture" name="pref">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="fukuoka">福岡県</option>
</select>

内包型
<label>お住まいの都道府県
  <select name="pref">
    <option value="">選択してください</option>
    <option value="tokyo">東京都</option>
    <option value="osaka">大阪府</option>
    <option value="fukuoka">福岡県</option>
  </select>
</label>

💡 ポイント 最初の選択肢に value=""（空）を指定しておくことで、未選択状態を作ることができ、required 属性を使った必須チェックが正しく働くようになります。

④ 複数行のテキストを入力するテキストエリア

お問い合わせ内容や備考欄など、長文を入力してもらう場合は <textarea> タグを使用します。 ※input タグとは違い、終了タグ（</textarea>）が必要な点に注意してください。

HTML
非内包型
<label for="contact-message">お問い合わせ内容</label>
<textarea id="contact-message" name="message" rows="5" placeholder="こちらにお問い合わせ内容をご記入ください。"></textarea>

内包型
<label>お問い合わせ内容
<textarea name="message" rows="5" placeholder="こちらにお問い合わせ内容をご記入ください。"></textarea>
</label>

💡 ポイント rows 属性で初期状態の縦の行数（高さ）を指定できます（上記の例では5行分）。横幅はCSSで width: 100%; のように調整するのが一般的です。

3. 使いやすさ（EFO）を高める属性

HTML5から、JavaScriptを使わずにブラウザ標準の機能で入力補助やバリデーション（チェック）を行える属性が多数追加されました。

属性名役割コード例
required必須入力にする（未入力だと送信時にエラーを表示）<input type="text" required>
placeholder入力欄に薄い文字でヒント（記入例など）を表示<input type="email" placeholder="[email protected]">
autocompleteブラウザの自動入力を有効にする（例: email や tel）<input type="tel" autocomplete="tel">

1. 必須入力を示す required 属性

未入力のまま送信ボタンを押すと、ブラウザが自動で「このフィールドは入力必須です」という警告を出して送信をストップしてくれます。

HTML
<label for="user-email">メールアドレス（必須）</label>
<input type="email" id="user-email" name="email" required>

2. 入力のヒントを表示する placeholder 属性

入力欄の中に、薄いグレーの文字で記入例などを表示できます。フォーカスすると自動で消えます。 ※注意：項目のラベル（見出し）の代わりに使うと、入力中に何の項目かわからなくなるため、あくまで「補助的な記入例」として使います。

HTML
<label for="user-tel">電話番号</label>
<input type="tel" id="user-tel" name="tel" placeholder="090-1234-5678">

3. 自動入力を助ける autocomplete 属性

ブラウザが記憶しているユーザーの情報を、自動で補完させる属性です。 特にスマートフォンでの入力ストレスを劇的に減らすことができるため、EFO（入力フォーム最適化）において非常に重要です。

HTML
<label for="full-name">お名前</label>
<input type="text" id="full-name" name="name" autocomplete="name">

<label for="email-address">メールアドレス</label>
<input type="email" id="email-address" name="email" autocomplete="email">

<label for="phone-number">電話番号</label>
<input type="tel" id="phone-number" name="tel" autocomplete="tel">

これらをまとめた、実際の入力画面のイメージとコードの組み合わせは以下のようになります。

HTML
<div class="form-group">
  <label for="contact-email">メールアドレス <span class="required-badge">必須</span></label>
  <input 
    type="email" 
    id="contact-email" 
    name="email" 
    placeholder="[email protected]" 
    autocomplete="email" 
    required
  >
</div>

スマートフォン対応：適切な type を選ぶ

スマートフォンのキーボードは、input の type 属性に合わせて自動で切り替わります。ユーザーのストレスを減らすために必ず適切なタイプを指定しましょう。

  • type="email"：英語キーボードになり、「@」が押しやすい位置に表示される。
  • type="tel"：数字のテンキーが表示される。
  • type="number"：数値入力用のキーボードが表示される。

4. グループ化と送信ボタン

長いフォームは <fieldset> と <legend> で整理する

項目が多いフォームの場合、関連する項目を <fieldset> でグループ化し、<legend> でそのグループの見出しをつけます。

HTML
<fieldset>
  <legend>お届け先情報</legend>
</fieldset>

送信ボタンは <button> タグを使う

送信ボタンには <input type="submit"> も使えますが、最近のマークアップでは、デザインの自由度（子要素にアイコン画像を入れられる等）が高い <button type="submit"> が主流です。

HTML
<button type="submit" class="submit-btn">
  <span>送信する</span>
</button>

※ type="button"（ただのボタン）と区別するため、フォーム送信時は必ず type="submit" を明記します。

まとめ

  • フォーム全体は <form action="…" method="post/get"> で囲む。
  • 入力欄はユーザーの押しやすさ、アクセシビリティのために必ず <label> と紐付ける。
  • スマートフォンでの入力の手間を減らすため、type="email" や type="tel"、autocomplete 属性を適切に設定する。
  • 送信ボタンはデザインのカスタマイズがしやすい <button type="submit"> がおすすめ。

正しくマークアップされたフォームは、ユーザーにとっても、データを処理するシステムにとっても優しい設計になります。基本を押さえて、バグのない美しいコードを書きましょう！

コメント