Webページの基礎、HTMLのフォーム <form> 内で使用する部品タグ <select> についてです。
目次
はじめに
ユーザーに入力させる内容を限定したい場合は、<select> タグが便利です。
この記事では、プルダウンメニューを作成する <select> タグの使い方を解説します。
<select> タグとは？
<select> タグは、選択肢の中から1つ（または複数）を選択させるためのフォーム部品です。
入力ミスを防ぎたい場合や限定したい場合に最適です。
<select name="pref">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
💡 ポイント
✔ optionタグとセットで使う(選択肢設定)
✔ 入力内容を制限できる
✔ UIが分かりやすい
基本構文
<select name=”項目名”>
<option value=”値”>表示名</option>
</select>
便利な属性
| 属性 | 説明 |
|---|---|
| multiple | 複数選択可能にする |
| selected | 初期選択を指定する場合に使用 |
| disabled | 選択不可にする |
基本的な使用例
<label>都道府県</label>
<select name="pref">
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
初期選択させたい場合
特定の項目を初期選択させたい場合、次のように <opton> に selected 属性を付けます。
<option value="tokyo" selected>東京都</option>
複数選択（応用）例
multiple 属性を設定すると複数選択が可能になります。
<select name="hobby" multiple>
<option>読書</option>
<option>音楽</option>
<option>映画鑑賞</option>
<option>スポーツ</option>
</select>
実用サンプル
<form> <label>都道府県</label>
<select name="pref">
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
<input type="submit" value="送信">
</form>
おわりに (まとめ)
まとめ
今回は、Webページ「HTML」の フォーム部品の <select> について勉強しました。
- <select> はプルダウンによる選択式入力用の部品です
- 選択式は入力ミス防止に最適です
- 選択項目は <option> で設定します
- フォームではよく使われる重要な要素のひとつです
👉 フォーム作成の基本は
「form + input・textarea・select + label」の組み合わせと言えます。
フォームについてはここでひと区切りとします。
次回からはCSSについて勉強したいと思います。
この記事が、少しでも誰かのお役に立てれば幸いです。
当サイトの記事で使用したVBAなどのサンプルをDLできます
この記事のサンプルはありません！
ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！
サンプルのダウンロードはこちらから
【Excel VBA】サンプルファイル_ダウンロードのページ
・最新の登録データが一番上になっています。・目次クリックでジャンプできますのでご利用ください。 ダウンロード一覧（1/7ページ目）新しい登録順です 記事ごとに使っ…
