HTML

<select> セレクトボックス

詳細を開く 詳細を閉じる

<select>要素 <option>要素

  • セレクトボックスを表します。
  • <form>要素コントロールの一つです。
  • 選択肢(オプション)は<option>要素で指定します。(なお、<option>要素は<datalist>要素の中でも使われます。)
  • デフォルトでは、選択肢は一つだけ表示になります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<select name="select">
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>

ラジオボタン


別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<label>
		<input type="radio" name="radio" value="bbb">bbb
	</label><br>
	<label>
		<input type="radio" name="radio" value="ccc">ccc
	</label><br>
	<label>
		<input type="radio" name="radio" value="ddd">ddd
	</label><br>
	<label>
		<input type="radio" name="radio" value="eee">eee
	</label><br>
	
	<br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>
  • これらは選択肢の数によって使い分けるべきでしょう。
  • たとえば、(選択肢の少ない)性別を選択するにはラジオボタンの方が良いかもしれません。
性別
<select>
<select> size required
ラジオボタン required
  • しかし、(選択肢の多い)都道府県の選択には、セレクトボックスを使った方が見やすいでしょう。
  • なお、都道府県の例は、下のオプショングループにもありますので、参照してください。
都道府県
<select>
<select> <optgroup>
ラジオボタン required

複数表示 : size

  • 複数の選択肢を表示するには、<select>要素にsize属性を指定します。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<select name="select" size="4">
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>

初期値 : selected

  • <option>要素にselected属性を指定すると、初期選択された状態になります。
  • 複数の選択肢を初期選択にするには、<select>要素にmultiple属性を指定する必要があります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<select name="select1">
		<option value="bbb">bbb</option>
		<option value="ccc" selected>ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>	

	<select name="select2" size="4">
		<option value="bbb">bbb</option>
		<option value="ccc" selected>ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>

選択必須 : required

  • required属性を指定すると、選択が必須となります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<select name="select" size="4" required>
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>
  • なお、下の(例1)と(例2)では、required属性が指定されており、selected属性は指定していません。 そのまま「送信」ボタンをクリックしてみましょう。 通常であれば 警告が出ますが、(例1)に対しては出ません。 これは、size属性を指定しない場合(選択肢が一つだけ表示されている場合)、selected属性がなくても、一番上の選択肢が自動的に選択されているからです。
  • 一方、size属性をしている場合(例2)には、警告が出ます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	例1:
	<select name="select1" required>
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	例2:
	<select name="select2" size="4" required>
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>

オプショングループ : <optgroup>

  • オプション(選択肢)をグループ化したい場合、<optgroup>要素を使います。
  • <optgroup>要素のlabel属性は必須です。
  • <optgroup>自体は選択できません。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<select name="select" size="10">
		<optgroup label="group1">
			<option value="1-1">1-1</option>
			<option value="1-2">1-2</option>
		</optgroup>
		
		<optgroup label="group2">
			<option value="2-1">2-1</option>
			<option value="2-2">2-2</option>
			<option value="2-3">2-3</option>
		</optgroup>
		
		<optgroup label="group3">
			<option value="3-1">3-1</option>
			<option value="3-2">3-2</option>
		</optgroup>
	</select>

	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>
  • 都道府県など、多くの選択肢を持つような場合、<optgroup>は有効です。
都道府県

複数選択 : multiple

  • multiple属性を指定すると、複数の選択肢を選択ができます。
  • 複数選択する場合には、シフトキーを押しながら、クリックします。
  • サーバ側のプログラムには注意が必要です。PHPの場合、<select name="select[]">のように、配列として受け取る必要があります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<select name="select[]" multiple size="4">
		<option value="bbb">bbb</option>
		<option value="ccc">ccc</option>
		<option value="ddd">ddd</option>
		<option value="eee">eee</option>	
	</select>
	
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>
  • なお、「シフトキーを押しながらクリック」することは、スマートフォンでは難しいです。
  • よって、同様の機能を実現するには、以下のようにチェックボックスを使う方が良いかもしれません。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

	<label>
		<input type="checkbox" name="bbb" value="True">bbb
	</label><br>
	<label>
		<input type="checkbox" name="ccc" value="True">ccc
	</label><br>
	<label>
		<input type="checkbox" name="ddd" value="True">ddd
	</label><br>
	<label>
		<input type="checkbox" name="eee" value="True">eee
	</label><br>
		
	<br><br>
	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>

無効 : disabled

  • <select><optgroup><option>の各レベルで、選択肢を無効化できます。
  • 例1は<select>レベルで無効化しています。なにも選択できません。
  • 例2は<optgroup>レベルで無効化しています。group2のみ選択不可。
  • 例3は<option>レベルで無効化しています。選択肢2のみ選択不可。
  • (参考:読取専用(readonly)と無効(disabled))

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	例1:
	<select name="select1" size="3" disabled>
		<option value="value1">選択肢1</option>
		<option value="value2">選択肢2</option>
		<option value="value3">選択肢3</option>
	</select><br>

	例2:
	<select name="select2" size="9">
		<optgroup label="group1">
			<option value="1-1">1-1</option>
			<option value="1-2">1-2</option>
		</optgroup>
		<optgroup label="group2" disabled>
			<option value="2-1">2-1</option>
			<option value="2-2">2-2</option>
		</optgroup>
		<optgroup label="group3">
			<option value="3-1">3-1</option>
			<option value="3-2">3-2</option>
		</optgroup>
	</select><br>
	
	例3:
	<select name="select3" size="3">
		<option value="value1">選択肢1</option>
		<option value="value2" disabled>選択肢2</option>
		<option value="value3">選択肢3</option>
	</select><br>

	
	<button type="submit">送信</button>
	<button type="reset">選択解除</button>
</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ