<select要素> - セレクトフォーム
公開日:
select要素は、セレクトフォームを作成するための要素です。各項目をoption要素でマークアップします。
概要
- 名前
- select
- カテゴリー
- Flow content
- Phrasing content
- Interactive content
- Palpable content
- Form-associated element
- Labelable element
- Listed element
- Submittable element
- Resettable element
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- 0個以上のoption要素、および、optgroup要素。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLSelectElement
- デフォルトのスタイル
select { background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(166, 166, 166); border-image: initial; border-radius: 5px; -webkit-appearance: menulist; box-sizing: border-box; align-items: center; white-space: pre; -webkit-rtl-ordering: logical; color: black; cursor: default; border-width: 1px; border-style: solid; border-color: initial; border-image: initial; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em 0em 0em 0em; font: 11px system-ui; -webkit-writing-mode: horizontal-tb; } select:not(:-internal-list-box) { overflow: visible !important; }
- 仕様書
- https://html.spec.whatwg.org/multipage/forms.html#the-select-element
属性
autocomplete
オートフィル機能を有効にするか否か。
autofocus
この属性を付けると、ページをロードした時に、自動でフォーカス状態になる。論理属性。
disabled
この属性を付けると、操作が無効になる。値も送信されない。論理属性。
form
multiple
この属性を付けると、複数の項目の選択が可能になる。論理属性。
name
各項目の値のキー。JavaScriptでDOMを操作する時にも利用する。
required
この属性を付けると、必須の項目になる。論理属性。
size
表示する項目の数。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
基本的な使い方
項目の数だけoption要素を用意して、それをselect要素で囲って下さい。name属性がキー、option要素の内容が値となって、サーバーサイドに送信されます。
HTML
<form action="./form.php">
<select name="prefecture">
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
<option>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
</select>
<button>内容を送信</button>
</form>
表示と値を分ける
選択肢として表示されるテキストと、サーバーサイドに送信される値を分けたい場合があります。その時は、value属性で値を指定して下さい。
HTML
<form action="./form.php">
<select name="prefecture">
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
</select>
<button>内容を送信</button>
</form>
表示をlabel属性で指定
option要素の中身を空にして、代わりにlabel属性で指定することもできます。都合が良い方を採用しましょう。
HTML
<form action="./form.php">
<select name="prefecture">
<option value="1" label="北海道"></option>
<option value="2" label="青森県"></option>
<option value="3" label="岩手県"></option>
<option value="4" label="宮城県"></option>
<option value="5" label="秋田県"></option>
<option value="6" label="山形県"></option>
<option value="7" label="福島県"></option>
<option value="8" label="茨城県"></option>
<option value="9" label="栃木県"></option>
<option value="10" label="群馬県"></option>
</select>
<button>内容を送信</button>
</form>
デフォルトで選択状態
selected属性を付けた項目は、最初から選択状態になります。
HTML
<form action="./form.php">
<select name="prefecture">
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option selected>山形県</option>
<option>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
</select>
<button>内容を送信</button>
</form>
選択不可の項目
disabled属性を付けた項目は、選択不可の状態になります。全ての項目を網羅したいけど、実際に選択できる項目は限定したい場合などに有用です。
HTML
<form action="./form.php">
<select name="prefecture">
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option disabled>山形県</option>
<option>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
</select>
<button>内容を送信</button>
</form>
複数項目の選択
multiple属性を付けると、複数の項目を選択することが可能になります。selected属性も複数の項目に対して有効になります。size属性に数値を指定すると、その項目分だけ同時に表示できます。しかし、name属性が下記のままだと、複数の項目を選択しても、最後尾の項目だけが送信されてしまいます。
HTML (ダメな例)
<form action="./form.php">
<!-- 複数選択可、8項目を同時に表示 -->
<select name="prefecture" multiple size="8">
<option>北海道</option>
<option>青森県</option>
<option selected>岩手県</option>
<option selected>宮城県</option>
<option selected>秋田県</option>
<option>山形県</option>
<option selected>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
</select>
<button>内容を送信</button>
</form>
name属性の末尾に[]
を付けることで、サーバーサイドがそのキー(prefecture
)の値を配列で受け取ることができるようになります。PHPを例にすれば、$_GET["prefecture"][0]
で1個目、$_GET["prefecture"][1]
で2個目、$_GET["prefecture"][2]
で3個目に選択した値を取得できます。配列で値を送信するこの仕様はselect要素に限ったことではないので覚えておきましょう。
HTML (正しい例)
<form action="./form.php">
<!-- 複数選択可、8項目を同時に表示 -->
<select name="prefecture[]" multiple size="8">
<option>北海道</option>
<option>青森県</option>
<option selected>岩手県</option>
<option selected>宮城県</option>
<option selected>秋田県</option>
<option>山形県</option>
<option selected>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
</select>
<button>内容を送信</button>
</form>
項目のグループ化
optgroup要素で囲むことで、その選択肢をグループ化できます。label属性でグループ名を指定して下さい。送信される内容に影響はありませんが、表示内容が整理されるのでユーザーが選択肢を把握しやすくなるでしょう。個々の項目と、グループ化した項目が混在しても大丈夫です。
HTML
<form action="./form.php">
<!-- 東北地方と関東地方の項目をグループ化 -->
<select name="prefecture">
<option>北海道</option>
<optgroup label="東北地方">
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
<option>福島県</option>
</optgroup>
<optgroup label="関東地方">
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
</optgroup>
</select>
<button>内容を送信</button>
</form>
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<select要素> - セレクトフォーム</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/select/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>select要素は、セレクトフォームを作成するための要素です。</p>
<h2>通常</h2>
<form action="./form.php">
<select name="prefecture">
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
</select>
<button>内容を送信</button>
</form>
<h2>グループ化</h2>
<form action="./form.php">
<select name="prefecture">
<optgroup label="北海道地方">
<option value="1">北海道</option>
</optgroup>
<optgroup label="東北地方">
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
</optgroup>
</select>
<button>内容を送信</button>
</form>
<h2>複数選択可</h2>
<form action="./form.php">
<select name="prefecture[]" multiple size="8">
<optgroup label="北海道地方">
<option value="1">北海道</option>
</optgroup>
<optgroup label="東北地方">
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
</optgroup>
</select>
<button>内容を送信</button>
</form>
</body>
</html>