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

目次

<select>の書式

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

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

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

<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キーを押したときに入力フォーカスが移動する順番を数値で指定する。
title グローバル属性
タイトル

JavaScript

selectオブジェクト

DTD

HTMLの各要素はDTDによって定義されています。select要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

<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>
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
  </select>
</form>

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

<form>
  <select 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></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>
イベント:
このエントリーをはてなブックマークに追加