お問い合わせフォーム

中段 / 目安 25分

陽葵さんがカウンターの奥から、受話器を片手に顔を出しました。「予約の問い合わせが電話ばっかりで大変なの! 仕込みの途中でも鳴るし、書き留めてる間にお客さん待たせちゃうし。名前と人数とメッセージを、サイトから送れるフォームが欲しい!」

フォームは見た目より中身が大事な部品です。ここで一番効くのは label と input を対応させる ことです。<label for="name"> と <input id="name"> のように for と id を同じ文字にしておくと、ラベルの文字を押しただけで入力欄にカーソルが飛びます。スマホでは指で小さな枠を狙う必要が減り、読み上げソフトを使う人には「この欄が何を聞いているのか」が伝わります。見た目に出ない仕事ですが、フォームの品質はここで決まります。

もうひとつ、人数のように必ず答えてほしい欄には required を付けます。空のまま送信を押すとブラウザが止めてくれます。

見た目は border と padding だけで十分きれいになります。入力欄は既定の枠線が細くて頼りないので、自分で border を引き直し、padding で中に余白を作り、border-radius で角を丸めます。さらに :focus を書いておくと、いま自分がどの欄を触っているのかが分かります。

完成条件

• お名前 (text)、人数 (number)、メッセージ (textarea)、送信ボタンを form の中に置く
• 3つの入力欄それぞれに label を付け、for と id を対応させる
• 人数の欄に required を付ける
• 入力欄に border と padding を自分で指定し、:focus で枠の色が変わるようにする

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

:focus は画面を触っているあいだしか起きないので判定では見ませんが、書かないとフォームとして半端です。自分の目で確かめてから提出してください。

1. form の中に、お名前 (text)、人数 (number)、メッセージ (textarea)、送信ボタンを置く
2. 3つの入力欄それぞれに label を付け、for と id を同じ文字で対応させる
3. 人数の入力欄に required を付ける
4. 入力欄に border と padding を指定し、:focus で枠の色が変わるルールも書く