ウェブフォームは、ユーザーから情報を収集するために不可欠なツールです。ここでは、フォームでよく使われる要素とその使い方について紹介します。
テキストボックス: 名前やメールを書く場所
どんなときに使う？
お名前やメールアドレスみたいな、ちょっとした情報を書いてもらいたいとき。
どうやって作る？
<input type="text">って書くだけ。ラベル（説明）もつけられます。
HTML
<label for="name">お名前:</label>
<input type="text" id="name" name="name">ラジオボタン: いくつかから1つだけ選ぶボタン
どんなときに使う？
「男性」「女性」みたいに、いくつかの選択肢の中から1つだけ選んでもらいたいとき。
どうやって作る？
同じ名前をつけると、グループになって1つだけ選べるようになります。
HTML
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>チェックボックス: いくつでも選べるボタン
どんなときに使う？
趣味や好きなものを複数選んでもらいたいとき。
どうやって作る？
複数選択がOKなので、好きなだけ選べます。
HTML
<label><input type="checkbox" name="hobby" value="sports"> スポーツ</label>
<label><input type="checkbox" name="hobby" value="music"> 音楽</label>セレクトメニュー: ドロップダウンリスト
どんなときに使う？
国名を選んでもらったり、年齢層を選んでもらったりするとき。
どうやって作る？
<select>でリストを作り、<option>で選択肢を入れます。
HTML
<label for="country">国名:</label>
<select id="country" name="country">
<option value="japan">日本</option>
<option value="usa">アメリカ</option>
</select>テキストエリア: たくさん書いてもらう場所
どんなときに使う？
感想やメッセージをたくさん書いてもらいたいとき。
どうやって作る？
<textarea>で大きな書き込みスペースを作れます。
HTML
<label for="message">メッセージ:</label>
<textarea id="message" name="message"></textarea>まとめ
これで、ウェブフォームの基本はバッチリ！みんなからの情報を簡単に集められるようになります。これらのパーツを組み合わせて、あなたのウェブサイトにぴったりのフォームを作ってみましょう！
コメント