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

select タグエレメント

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

<select>,<option>
<select name="selected_fruits">
	<option value="mikan" selected>ミカン</option>
	<option value="apple">リンゴ</option>
	<option value="banana">バナナ</option>
</select>
表示結果

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

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

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

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

 選択肢のある入力には、ひとつだけを選択する <input type="radio"> 、複数個の選択する <input type="checkbox"> があります。

- ad -

属性

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

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行目をデフォルト選択とします。)

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

JavaScript

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

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

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

- ad -