ここまで、打ち込む欄・選ぶ欄と、いろいろな入力部品を置いてきました。でもバラバラのままでは、「どこからどこまでが1つの申し込みで、どうやって送るのか」があいまいです。それらをひとまとまりにして送り出すのが <form>。お問い合わせや会員登録でおなじみの、あの入力フォームの正体です。
入力欄をひとまとめに
これまでの <input> や <button> を <form> で囲みます。
<form>
<input type="text" placeholder="お名前">
<button type="submit">送信する</button>
</form><button type="submit"> は「送信ボタン」。押すと、フォームの中身がまとめて送られます。「入力欄 → 送信ボタン」を <form> で包む——これがフォームの基本の形です。
<form>にまとまりました。実際に文字を打ち込んでみてください。ラベルで「何の欄か」を示す
入力欄には、「これは何を入れる欄か」を示すラベルをつけると、ぐっと親切になります。使うのは <label>。
<form>
<label>
お名前
<input type="text">
</label>
<button type="submit">送信する</button>
</form><label> で説明の文字と入力欄をひとまとめにすると、ラベルの文字を押しても入力欄が反応するようになります。指で押しやすくなり、読み上げソフトにも「この欄は“お名前”だ」と伝わります。小さな工夫ですが、効果は大きいです。
送るデータに名前をつける（name）
フォームの中身が送られるとき、それぞれの値は「どの欄の値か」という名前つきで届きます。その名前をつけるのが name です。
<form action="/submit" method="post">
<label>お名前
<input type="text" name="username">
</label>
</form>こうしておくと、送信のとき「username＝打ち込まれた文字」というペアで届きます。受け取る側は、この名前を手がかりに「これはお名前、これはメッセージ」と仕分けるわけです。逆にいうと、name のない欄の中身は送信に含まれません。前回ラジオボタンのグループ分けに使った name と同じ属性が、ここでは「データの名札」として働きます。
どこへ送るかを決める
フォームを本当に送るには、「どこへ、どうやって送るか」を <form> に書きます。
<form action="/submit" method="post">
...
</form>| 書くもの | 意味 |
|---|---|
action="..." | 入力を送る先（送信先の住所） |
method="post" | 送り方の種類 |
送り方（method）には、おもに2種類あります。
| method | 送り方 | 向いている場面 |
|---|---|---|
get | 入力内容をURLの後ろにくっつけて送る | 検索など、結果のページを共有したいとき |
post | 入力内容を包んで送る（URLに出ない） | 申し込み・お問い合わせ・パスワードなど |
検索フォームのあとにURLへ ?q=しまえなが のような文字がつくのを見たことがあるかもしれません。あれが get の送り方。名前やメッセージのようにURLに出てほしくない中身を送るフォームでは、post を選びます。迷ったら post、と覚えておけば大丈夫です。
さわってみよう
<form>で囲んで、<label>をつけたフォームです。ラベルの文字を押すと、その入力欄にカーソルが移ることを確かめてみてください。
<label>の効果です。このレッスンのまとめ
- 入力欄やボタンは
<form>でひとまとめにする <label>をつけると「何の欄か」が伝わり、押しやすくなるnameは送るデータの名札。ない欄の中身は送られないaction（送り先）とmethod（送り方）で送信のしかたを決める
