フォームの作り方の基本 — input と label をセットで書く

フォームは、見た目を作るだけなら簡単です。ただ、入力欄とラベルの結びつけ方を知らないまま作ると、使いにくいフォームになります。最初に型を覚えてしまいましょう。

3つの部品でできている

• form … 全体を囲む箱。送信先などを指定する
• input / textarea / select … 実際に入力する部品
• label … その入力欄が何なのかを示す文字

label と input を結びつける

ここが最大のポイントです。label の for属性と、input の id属性を同じ文字にします。これで2つが結びつき、ラベルの文字をクリックしただけで入力欄にカーソルが入るようになります。

スマホでは指でタップするので、押せる範囲が広がることの効果は大きいです。読み上げ環境でも「お名前の入力欄」と正しく読まれるようになります。

type を変えると、スマホのキーボードが変わる

input の type属性は見た目のためだけではありません。スマホでは、type に応じて出てくるキーボードが変わります。メール欄なら @ が最初から出るキーボードになり、電話番号なら数字のキーパッドになります。

• text … ふつうの文字
• email … メールアドレス。@ を含むかを簡易的にチェックしてくれる
• tel … 電話番号。数字キーパッドが出る
• number … 数値。増減ボタンが付く
• date … 日付。カレンダーから選べる
• checkbox / radio … チェックボックスとラジオボタン

placeholder はラベルの代わりにならない

入力欄の中に薄く出る文字が placeholder です。便利ですが、入力を始めると消えてしまいます。何を入れる欄だったか分からなくなるので、label の代わりには使えません。placeholder は「例」を見せるものと考えてください。

送信ボタンは button

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

form の中に置いた button は、初期状態で送信ボタンとして動きます。div にクリック処理を付けて代用すると、Enterキーでの送信ができなくなります。

実際に送信するには

HTMLだけでは、入力された内容をどこかに届けることはできません。届け先を用意する必要があり、これはサーバー側の話になります。学習中は、フォームの見た目と使い勝手を作るところまでで十分です。届け先が必要になったら、フォーム専用のサービスを使うのがいちばん手軽です。