フォーム部品を使ってみよう

このレッスンでは、HTMLフォーム部品の基本を学び、ユーザーが情報を入力できる画面を作れるようになることを目標にします。「HTML form input 使い方」「HTML フォーム 作り方」で調べている方向けです。

<form>の中に<input>(入力欄)や<button>(ボタン)を置くと、ユーザーが情報を入力できる画面が作れます。お問い合わせフォームやログイン画面など、ほぼすべてのWebサービスの基本となる部品です。type属性で入力欄の種類を変えられます。

サンプルコードでは、名前を入力する<input type="text">と、好きな言語を選ぶ<select>、送信用の<button>を組み合わせたフォームを作っています。<label>で入力欄に説明のラベルを付けると、何を入力すればいいか分かりやすくなります。

初心者がよくつまずくのが、type属性の使い分けです。text(文字)・email(メール)・password(パスワード)など目的に応じて使い分けることで、ブラウザが自動的に適切なキーボードや入力チェックを表示してくれます。用途に合わないtypeを使うと、ユーザーにとって使いにくいフォームになってしまいます。

実際のWebサービスでは、フォームはユーザーとの接点として非常に重要な役割を果たします。会員登録・お問い合わせ・検索など、あらゆる場面でフォーム部品の知識が必要になります。