select要素

このエントリーをはてなブックマークに追加

select要素は複数の選択肢から選択可能なUI(セレクトボックス)をマークアップするための要素です。

select要素はoption要素optgroup要素もしくはスクリプト支援要素(script要素template要素)を内包することができます。

<select>
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>
<select name="c">
	<optgroup label="8.01 Physics I: Classical Mechanics">
		<option value="8.01.1">Lecture 01: Powers of Ten </option>
		<option value="8.01.2">Lecture 02: 1D Kinematics </option>
		<option value="8.01.3">Lecture 03: Vectors </option>
	</optgroup>
	<optgroup label="8.02 Electricity and Magnestism">
		<option value="8.02.1">Lecture 01: What holds our world together? </option>
		<option value="8.02.2">Lecture 02: Electric Field </option>
		<option value="8.02.3">Lecture 03: Electric Flux </option>
	</optgroup>
	<optgroup label="8.03 Physics III: Vibrations and Waves">
		<option value="8.03.1">Lecture 01: Periodic Phenomenon </option>
		<option value="8.03.2">Lecture 02: Beats </option>
		<option value="8.03.3">Lecture 03: Forced Oscillations with Damping </option>
	</optgroup>
</select>

select要素では以下の属性を利用できます。

autofocus属性

autofocus属性を指定することでページロード時に自動でフォーカスが当たるようになりユーザーが手動でフォーカスを当てる必要がなくなります。

<select autofocus>
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

disabled属性

disabled属性が指定されたselect要素は非活性になり操作が不可能になります。

<select disabled>
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

form属性

form属性form要素と関連付けを行うことができます。次のようにform要素のid属性をform属性に指定することでselect要素とform要素は関連付けられ、フォームの送信時にselect要素のデータも送信されます

<form id="form01" action="target.php">
	<input type="submit" value="送信">
</form>
<select form="form01">
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

multiple属性

multiple属性で複数の値を選択できるようになり、ユーザーエージェントは複数選択可能なUI(Commandキーなどを押しながら選択など)を提供します。

<select multiple>
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

name属性

name属性でセレクトボックスの名前をつけることができ、指定した名前はデータ送信時のキーとして利用されます。

<select name="select_name01">
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

required属性

required属性を指定したselect要素は必須として扱われます。

<select required>
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

required属性を指定したselect要素が非選択の場合、form要素が送信される際に送信を中断してブラウザがエラーを表示します。

size属性

size属性を指定することでセレクトボックスの行数を指定することができます。

<select size="3">
	<option value="1"> Miner </option>
	<option value="2"> Puffer </option>
	<option value="3" selected> Snipey </option>
	<option value="4"> Max </option>
	<option value="5"> Firebot </option>
</select>

参考URL

4.10.7 The select element - HTML5.0 - W3C
4.10.7 The select element - HTML5.1 - W3C

登録日 : 2015年01月12日 最終更新日 : 2015年1月17日

同じカテゴリー(フォーム)のエントリー

検索

スポンサードリンク

バージョン

リファレンス