cman.jpWEBページ作成
広告
<select> 「セレクトボックス」[読み方：セレクト]
<select>タグは、プルダウンやリストボックスなどの選択肢リストを表示します。
選択肢は、<select>タグ内に<option>タグで定義します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<select> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ リストされた要素、ラベル付け可能な要素、送信可能な要素、リセット可能な要素、自動大文字継承要素、フォーム関連要素 パブバブルコンテンツ | フレージングコンテンツを子要素にもてる場所 | <option>、<optgroup>、<hr> スクリプトサポート要素 | 不可 |
<select>の属性
【構文】
<select name="セレクト名" size="2" autofocus disable multiple ・・・>
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
</select>
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
</select>
| 属性 | 意味 | 値のサンプルなど | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| autocomplete="値" | フォーム自動入力機能の可否と種類 ※HTML5以降に追加 |
|
||||||||
| autofocus | ページ表示時にセレクトボックスがフォーカスされる指定 ※HTML5以降にグローバル属性に変更 | - | ||||||||
| disabled | 使用不可の指定 | - | ||||||||
| form="ID" | IDで指定されたformとの関連付け ※HTML5で追加 | - | ||||||||
| multiple | 複数選択可能の指定 | - | ||||||||
| required | 必須入力の指定 ※HTML5で追加 | - | ||||||||
| size="値" | 表示する選択肢の数 ※デフォルト＝１ 但し、multiple指定の場合デフォルト＝４ （safariのデフォルトは選択肢全て表示） | 「3」 | ||||||||
| name="名前" | セレクトボックスの名前 | - | ||||||||
| 廃止された属性 |
|
|||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<select>のサンプル
プルダウンのサンプル
<p>該当するものを選択してください</p>
<select name="sample1">
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
<select name="sample1">
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
該当するものを選択してください
リストボックスのサンプル（multiple属性を追加）
ページTOP
<p>該当するものを選択してください（複数選択可能です）</p>
<select name="sample2" multiple>
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
<select name="sample2" multiple>
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
該当するものを選択してください（複数選択可能です）
留意事項
- "size"属性が「１」の場合、プルダウン形式、「２」以上の場合、リストボックス形式で表示されます。
- <select>～</select>の間に記載された<option>が選択肢として表示されます。
- <option>は、<optgroup>でグループ化できます。
広告