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日