備忘録的プログラミングリファレンス

<select> タグエレメント

 <select> エレメントは、選択肢のあるデータ入力が作成できる<form>の部品です。 セレクトボックスと呼ばれ、デフォルトではプルダウン式のメニュー選択表示になります。
 選択肢ごとに <option> エレメントを使います。

コード例
<select>
	<option value="mikan" selected>ミカン</option>
	<option value="apple">リンゴ</option>
	<option value="banana">バナナ</option>
</select>
	
詳しくはExampleを参照してください

 表示数は、<select>エレメントの size 属性で変更できます。

 選択肢の中で予め選択済みにするには、 <option> エレメントにselected属性を加えます。

 <select> エレメントも <form> とは別でインターフェイスの部品として使うことができます。

  <form> による送信時は、 <select> エレメントの name 属性と選択された <option> エレメントのvalue属性がセットで送られます。

JavaScript

 <select> の定義は、HTMLSelectElement を参照してください。

 <option> の定義については、 HTMLOptionElement または HTMLOptionsCollection を参照してください。

 <optgroup> の定義については、HTMLOptGroupElement を参照してください。

<select>の属性

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
name*必須。タグエレメントを特定するための属性です。
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
size選択肢の表示数

 属性に関して詳しくは HTMLSelectElement を参照しくてださい。

Example

<select>エレメント、<option> エレメントを使ったコードの作成です。 下記の入力を行ってSELECTの作成をクリックすると自動で<select>エレメントを作成します。

<label>

項目名( <select>エレメントに id 属性をしていすることで対応する for 属性を設定します )

<optgroup>,<option>

 <option> :  valueの値とその選択肢名を、value=項目名で入力し、1項目1行で区切ってください。自動で分けます。(*1行目をデフォルト選択とします。)

ブラウザでの見え方(このページのスタイルが反映されています)