<select>, <option>, <optgroup>

要素の説明

<select>, <option>, <optgroup>は、メニューまたは、リストボックスを構成するための要素です。全体を<select>で囲み、<option>を中に入れます。選択項目をグループ化したい場合には<optgroup>を使います。

指定できる属性

id
ページ内に１つ、特別な役割を与える時に指定します。
class
ページ内に複数、特別な役割を与える時に指定します。
name
<select>に指定する属性。メニューの名前を指定します。
size
<select>に指定する属性。行数を指定します。これを指定するとリストボックスとして表示されます。
selected
<option>に指定する属性。あらかじめ選択された状態にする。
value
<option>に指定する属性。サーバに送られる値を指定します。
label
<optgroup>に指定する必須属性。選択肢のグループ名を指定します。
disabled
入力エリアを変更も選択も不可能にします。

中に入れられる要素

<select>には、<option>と<optgroup>のみ入れることができます。

<option>には、テキストのみ入れることができます。

<optgroup>には、<option>のみ入れることができます。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>サンプルページ</title>
</head>

<body>
 <div id="header">
  <h1>サンプルページ</h1>
  <p>このページはサンプルを表しています。</p>
 </div>
 <h2>コンテンツ</h2>
 <form>
  <p>
   <select name="menu">
    <option>コンテンツ1</option>
    <option>コンテンツ2</option>
    <option>コンテンツ3</option>
   </select>
  </p>
  <p>
   <select name="list" size="4">
    <optgroup label="group1">
     <option>コンテンツ1</option>
     <option>コンテンツ2</option>
     <option>コンテンツ3</option>
    </optgroup>
    <optgroup label="group2">
     <option>コンテンツ4</option>
     <option>コンテンツ5</option>
     <option>コンテンツ6</option>
    </optgroup>
   </select>
  </p>
 </form>
</body>

</html>