フォームで入力をまとめよう

ここまで、打ち込む欄・選ぶ欄と、いろいろな入力部品を置いてきました。でもバラバラのままでは、「どこからどこまでが1つの申し込みで、どうやって送るのか」があいまいです。それらをひとまとまりにして送り出すのが <form>。お問い合わせや会員登録でおなじみの、あの入力フォームの正体です。

入力欄をひとまとめに

これまでの <input> や <button> を <form> で囲みます。

<form>
  <input type="text" placeholder="お名前">
  <button type="submit">送信する</button>
</form>

<button type="submit"> は「送信ボタン」。押すと、フォームの中身がまとめて送られます。「入力欄 → 送信ボタン」を <form> で包む——これがフォームの基本の形です。

ラベルで「何の欄か」を示す

入力欄には、「これは何を入れる欄か」を示すラベルをつけると、ぐっと親切になります。使うのは <label>。

<form>
  <label>
    お名前
    <input type="text">
  </label>
  <button type="submit">送信する</button>
</form>

<label> で説明の文字と入力欄をひとまとめにすると、ラベルの文字を押しても入力欄が反応するようになります。指で押しやすくなり、読み上げソフトにも「この欄は“お名前”だ」と伝わります。小さな工夫ですが、効果は大きいです。

どこへ送るかを決める

フォームを本当に送るには、「どこへ、どうやって送るか」を <form> に書きます。

<form action="/submit" method="post">
  ...
</form>

このレッスンのまとめ

1. 入力欄やボタンは <form> でひとまとめにする
2. <label> をつけると「何の欄か」が伝わり、押しやすくなる
3. action（送り先）と method（送り方）で送信先を決める

これで、あなたのページにおたよりフォームがつきました。送信の中身を受け取るのはまた別のステップですが、「入力の形」は完成です。そしてこれでHTMLの骨組みは完成です。 :::