フォームで選択式の入力を作るときに使うのが「selectタグ」と「optionタグ」です。
ユーザーに選択肢を提示できるため、入力ミスを減らすことができます。
この記事では、selectタグの基本から実践的な使い方まで解説します。
selectタグとは？
selectタグは、プルダウン形式の選択メニューを作るタグです。
<select>
<option>東京</option>
<option>大阪</option>
<option>福岡</option>
</select>
optionタグとは？
optionタグは、選択肢を定義するタグです。
<option>東京</option>
基本的な使い方
<label>都道府県</label>
<select>
<option>東京</option>
<option>大阪</option>
<option>福岡</option>
</select>
value属性の使い方
実際のデータとして送信する値を指定できます。
<select>
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
</select>
ポイント：
- 表示テキストと送信データを分けられる
初期選択（selected）
最初から選択状態にするには「selected」を使います。
<option value="tokyo" selected>東京</option>
必須選択（required）
selectにもrequiredが使えます。
<select required>
<option value="">選択してください</option>
<option value="tokyo">東京</option>
</select>
複数選択（multiple）
複数選択を可能にする場合：
<select multiple>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
グループ分け（optgroup）
選択肢をグループ化できます。
<select>
<optgroup label="関東">
<option>東京</option>
<option>神奈川</option>
</optgroup>
<optgroup label="関西">
<option>大阪</option>
<option>京都</option>
</optgroup>
</select>
よく使う実用例
<form>
<label>都道府県</label>
<select required>
<option value="">選択してください</option>
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
</select>
<input type="submit" value="送信">
</form>
selectタグのメリット
- 入力ミスを防げる
- 選択が簡単
- UIが分かりやすい
selectタグの注意点
- 選択肢が多すぎると使いにくい
- モバイルでは表示が変わることがある
まとめ
selectタグは、選択式入力を作るための重要なタグです。
重要ポイント：
- selectで枠を作る
- optionで選択肢を定義
- valueで送信データを指定
- requiredで必須化できる
おすすめ記事
この記事が役に立ったら、いいね！お願いします！
