HTML <select>

フォームの中に選択肢フィールドを配置します。選択肢フィールドを作成しただけでは、中身の選択肢はありません。選択肢フィールド内の選択肢は<OPTION>タグで配置します。<FORM>と</FORM>の間に記述しなければなりません。

書式

selectの開始タグと終了タグの間には、ひとつ以上のoption要素またはoptgroup要素を入れることができる。

<select>
  <option>text</option>
</select>

<select>
  <optgroup>
    <option>text</option>
  </optgroup>
</select>

開始タグと終了タグは省略できません。

属性

属性はすべて省略可能です。

class

CSSのクラス

dir

方向

disabled

disabled属性を指定したselect要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したselect要素の値は、サブミット時にフォームデータを送信しない。

id

要素の識別子

lang

言語

name

名前を指定します。

multiple

複数の項目を同時に選択できるよう指定します。省略した場合は、選択できる数はひとつだけです。

onclick

要素をクリックしたときに実行するスクリプト

ondblclick

要素をダブルクリックしたときに実行するスクリプト

onmousedown

マウスのボタンが押下されたときに実行するスクリプト

onmouseup

マウスのボタンが離されたときに実行するスクリプト

onmouseover

マウスカーソルが乗ったときに実行するスクリプト

onmousemove

マウスポインタを要素内で動かしたときに実行するスクリプト

onmouseout

マウスポインタを要素内から要素外に動かしたときに実行するスクリプト

onkeypress

キーを押して離したときに実行するスクリプト

onkeydown

キーを押したときに実行するスクリプト

onkeyup

キーを離したときに実行するスクリプト

onfocus

要素がフォーカスを得たときに実行するスクリプト

onblur

要素がフォーカスを失ったときに実行するスクリプト

onchange

テキストが選択されたときに実行するスクリプト

size

一度に表示する選択肢の数を指定します。省略した場合は"1"となります。

style

スタイルシート

tabindex

TABキーを押したときに入力フォーカスが移動する順番を数値で指定する。

tabindexに0を指定すると、出現順に入力フォーカスが移動する。

tabindexにマイナスの値を指定すると、TABキーを押しても入力フォーカスを得ることができなくなる。

title

タイトル

JavaScript

selectオブジェクト

<select>の使用例と表示サンプル

HTMLタグ <select> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <select>
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
  </select>
</form>

一度に表示する選択肢の数を指定したSELECT要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <select size="2">
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
  </select>
</form>

複数選択可能なSELECT要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <select multiple="multiple" name="foo">
    <option>first</option>
    <option>second</option>
    <option>third</option>
  </select>
</form>

複数選択した場合、GETメソッドのパラメータは「http://itref.fc2web.com/html/select.html?foo=first&foo=second」のように同じパラメータが複数続く。

選択不可能なSELECT要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <select disabled="disabled">
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
  </select>
</form>

イベント属性の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form name="form1">
  <select onfocus="onFocus()" onblur="onBlur()" onchange="onChange()">
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
  </select>
  イベント: <input type="text" name="text1" readonly="readonly"></input>
</form>
<script>
  function onFocus () {
    document.form1.text1.value = "onfocus";
  }
  function onBlur () {
    document.form1.text1.value = "onblur";
  }
  function onChange () {
    document.form1.text1.value = "onchange";
  }
</script>

HTMLタグ

HTMLタグには次のものがある。

参考文献

Web Hypertext Application Technology Working Group (2022) "The select element" HTML Living Standard