<select>: SELECT 要素
最終更新：2026-10-13
<select>SELECT 要素
ユーザーが既定のリストから 1 つ以上の値を選ぶドロップダウンコントロールです。通常はフォームで送信されます。
| カテゴリ | フォーム |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </select> タグ |
| ステータス | 標準 |
📝 構文
<select name="fruit">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
</select>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
name | Field name sent to the server. | |
multiple | Allow selecting multiple options. | |
required | A value must be selected before submit. | |
disabled | Disables the whole control. | |
size | Number of visible rows (a list box when > 1). | |
autofocus | Automatically focused on page load. | |
form | The id of the associated form (can live outside it). |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <select> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： 複数選択には multiple を使います。自由入力を併用したい場合は input + datalist を組み合わせましょう。
❓ よくある質問
Qselect の初期選択項目はどう設定しますか？
A該当する
<option> に selected 属性を付けます：<option selected>デフォルト項目</option>。書かなければ最初の option が選ばれます。JS で select.value を設定して選択状態を変えることもできます。Qselect で複数選択はできますか？
Aできます。
multiple 属性を付けます。デスクトップでは Ctrl/Cmd で複数選択しますが、モバイルでの操作性は良くありません。複数選択の select の name は配列形式（name='tags[]' など）にしないと、サーバーが複数の値を受け取れません。選択肢が多いならチェックボックスのグループへの変更をおすすめします。Qselect の選択肢が多すぎるときはどうしますか？
A
<optgroup> でグループ化して小見出しを付けるか、<input list> と <datalist> で検索できる入力候補に切り替えます。ネイティブの select は検索できません。選択肢が数十を超えるなら、サードパーティ製コンポーネントか datalist 方式を検討しましょう。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
