SYNCER

SYNCER

<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

関連付けたいform要素のidを指定する。

デモを見る

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>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>