optgroupタグとは?|プルダウンメニューの選択肢をグループ化する

optgroupタグとは?|プルダウンメニューの選択肢をグループ化する
博士
今回は、プルダウンメニューを使いやすくする方法として、<optgroup>タグで選択肢をグループ化する方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<optgroup>タグとは

 

<optgroup>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所 select要素の子要素として
内容 option要素を0個以上


 
 
<optgroup>タグは、<select>タグと<option>タグで作成したメニューの選択肢をグループ化する際に使用するタグです。

対応したブラウザでは、メニューが階層化されて表示されます。
 
 

博士
選択肢の数が多いときなどに便利な機能じゃ。
 
 

label属性

選択肢をグループ化したときのグループ名を指定します。
この属性で指定したグループ名が、個々の選択肢とともにメニューに表示されます。

label属性は必須属性なので省略することはできません。

 
 

スポンサーリンク

value属性

サーバーへ送信される値を指定します。
この属性がない場合は、option要素の内容(選択肢として表示されるテキスト)が送信されます。
 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

使用例

 
 

表示例

好きなゲームハードは?


 
 

まとめ

プルダウンメニューの選択肢をグループ化する際は、<optgroup>タグを使用します。
 
 

博士
<optgroup>タグを活用して見やすいメニューを作ろう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








optgroupタグとは?|プルダウンメニューの選択肢をグループ化する