HTML/CSS：フォームの基本

label の for と input の id が一致

<label for="name"> と <input id="name"> を対応させる。

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

for と id が一致していると、ラベルをタップしても入力欄が反応する。スマホでは押しやすさが大きく変わる。

解答 == B

要素を一意に指す属性。

B

for は id と対応する。name はサーバーに送るときの項目名なので、役割が違う。

input の type が email

type="email" にすると、スマホで@付きのキーボードが出る。

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

type を正しく選ぶとスマホの入力が楽になる。email なら@キーが最初から表示され、形式チェックも自動で行われる。

<label for="msg">お問い合わせ</label>
<____ id="msg" name="message" rows="5"></____>

textarea が存在する

「テキストの領域」を意味する8文字のタグ。

textarea

textarea は閉じタグが必要。input と違って、開始タグと終了タグの間に初期値を書く。

解答 == B

送信時のキーになる属性。

B

name が無いとデータが送信されない。見た目は正常に動いているように見えるので、気づきにくい不具合になる。

select と option が2個

<select> の中に <option> を並べる。

<label for="type">種別</label>
<select id="type" name="type">
  <option value="question">ご質問</option>
  <option value="request">ご要望</option>
</select>

表示される文字と、送信される値（value）は別にできる。日本語を表示しつつ、サーバーには英数字を送るのが一般的。

<label for="name">お名前</label>
<input type="text" id="name" name="name" ____>

input が必須になっている

「必要とされる」を意味する8文字の属性。値は不要。

required

required を付けると、未入力では送信できなくなる。ブラウザが自動でエラーメッセージを出してくれる。

解答 == B

同じグループであることを示す属性。

B

name が同じものが1グループになる。バラバラだと全部選べてしまい、ラジオボタンの意味がなくなる。

radio が2個、name が同じ

name を揃える。label で input ごと囲む書き方も使える。

<label><input type="radio" name="contact" value="mail">メール</label>
<label><input type="radio" name="contact" value="tel">電話</label>

label で input ごと囲めば、for と id を書かなくてよい。選択肢が多いラジオボタンやチェックボックスでは、この書き方が簡潔。

checkbox が required になっている

type="checkbox" に required を付ける。label で囲む。

<label><input type="checkbox" name="agree" required>規約に同意する</label>

同意チェックは required にするのが定番。チェックしないと送信できないので、確認を促せる。

form の method が post、input が2個とも required

form で全体を囲み、label と input のペアを2組並べ、最後に button を置く。

<form action="/send" method="post">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required>

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

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

これが最小の問い合わせフォーム。実際にデータを受け取るにはサーバー側の処理が必要だが、HTML側の準備はこれで整う。

4つの input の type が正しい

type を使い分ける。id と for も忘れずに。

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

<label for="age">年齢</label>
<input type="number" id="age" name="age">

<label for="birth">生年月日</label>
<input type="date" id="birth" name="birth">

<label for="pw">パスワード</label>
<input type="password" id="pw" name="password">

type によってスマホのキーボードや入力補助が変わる。date なら日付選択のカレンダーが、password なら文字が伏せ字になる。

fieldset の中に legend と radio が2個

<fieldset> の最初に <legend> を置き、その後に入力欄を並べる。

<fieldset>
  <legend>ご連絡方法</legend>

  <label><input type="radio" name="contact" value="mail">メール</label>
  <label><input type="radio" name="contact" value="tel">電話</label>
</fieldset>

fieldset は関連する入力欄をまとめる。legend がグループの見出しになり、読み上げソフトも「ご連絡方法のグループ」として伝えてくれる。

label と placeholder が両方ある

placeholder は入力例を示すもので、label の代わりにはならない。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="例：info@example.com">

placeholder は入力し始めると消える。これだけに頼ると「何の欄だったか」が分からなくなるので、label は必ず別に用意する。

option が5個、selected が1つ、textarea がある

option に selected を付けると初期選択になる。

<form action="/survey" method="post">
  <label for="score">満足度</label>
  <select id="score" name="score">
    <option value="5">とても満足</option>
    <option value="4">満足</option>
    <option value="3" selected>ふつう</option>
    <option value="2">不満</option>
    <option value="1">とても不満</option>
  </select>

  <label for="comment">ご意見</label>
  <textarea id="comment" name="comment" rows="4"></textarea>

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

selected で初期値を指定できる。中間の選択肢を初期値にしておくと、回答の負担が減る（ただし回答が中央に偏る傾向もある）。

すべての要素・属性・必須指定が一致

label は①②③④⑥に加え、ラジオとチェックボックスを囲む形でも使う。ラジオは name="reply" で揃える。required は①②⑥⑦の4箇所。

<form action="/contact" method="post">

  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required>

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required
         placeholder="例：info@example.com">

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

  <label for="category">お問い合わせ種別</label>
  <select id="category" name="category">
    <option value="question">ご質問</option>
    <option value="request">ご要望</option>
    <option value="other">その他</option>
  </select>

  <fieldset>
    <legend>ご希望の連絡方法</legend>
    <label><input type="radio" name="reply" value="mail">メール</label>
    <label><input type="radio" name="reply" value="tel">電話</label>
  </fieldset>

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

  <label><input type="checkbox" name="agree" required>プライバシーポリシーに同意する</label>

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

</form>

このフォームは、送信ボタンを押した時点でブラウザが4つの検証を自動で行う。お名前・メール・内容の未入力、そして同意チェックの未チェック——required を書いただけで、JavaScriptを1行も使わずにこれが実現する。

label の紐付けにも注目してほしい。①〜④⑥は for と id で紐付け、⑤⑦は label で入力欄ごと囲んでいる。どちらも正しい書き方で、選択肢が短いラジオやチェックボックスは囲む形のほうが簡潔になる。

そして type の使い分けだ。email は形式チェックが自動で入り、tel はスマホで数字キーボードが出る。type="text" ですべて済ませることもできるが、それではユーザーの手間が増える。

最後に、このフォームは実際にはまだデータを送れない。action="/contact" の先でデータを受け取るプログラム（PHPやNode.jsなど）が必要になる。HTMLの役割は「入力を集めて送り出すところまで」だと理解しておく。

ここまででHTMLは一区切り。次章からいよいよCSSに入り、これまで作ってきたページに見た目を与えていく。