フォームのきほん

入力を受け取る部品

問い合わせ欄や検索まどのように、読む人が文字を打ち込む場所をフォームと呼びます。使うタグは次の通りです。

• form が入力欄の全体を囲みます
• input は 1 行の入力欄です。type で種類が変わります
• textarea は複数行の入力欄です。rows で見える行数を決めます
• button は送信ボタンです

input の type を text にすると普通の文字入力、email にするとメールアドレス用になります。スマホでは type に合わせてキーボードの並びが切り替わるので、打ちやすさが変わります。

label と id をつなぐ

入力欄には、何を書く欄かを示す label を必ず付けます。label の for と入力欄の id に同じ文字を書くと、2 つがつながります。

つながると、ラベルの文字を押しただけで入力欄にカーソルが入ります。押せる範囲が広がるので、指で操作する人にやさしくなります。name はその欄の中身に付ける名前で、送信するときの見出しになります。

今回書くこと

作品のうしろに お問い合わせ の section をつくり、form の中にお名前・メールアドレス・メッセージの 3 つの欄と送信ボタンを置きます。ラベルと入力欄の組を div で囲むと、あとで整えやすくなります。

1. 作品のうしろに contact の id を付けた section をつくる
2. form の中に label と入力欄の組を 3 つ置く
3. メッセージはテキストエリアにし、rows で行数を決める
4. 送信ボタンを button で置く