HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでオプショングループ（optgroup）を作成する方法

HTMLの <optgroup> タグは、セレクトボックス（<select>）内の関連する選択肢をグループ化するために使用します。選択肢が多いリストでも、ユーザーが自分の選択肢を把握しやすくなるため、フォームの使いやすさ向上に役立ちます。

optgroupタグの主な属性

<optgroup> タグでは、以下の属性を使用できます。

属性値説明
disabled disabled そのグループ全体を無効化します。ユーザーはグループ内の選択肢を選択できなくなり、Tabキーによるフォーカス移動の対象からも除外されます。
label テキスト グループに表示するラベル（見出し）を定義します。このラベルは選択可能ではなく、グループ名として表示されます。

オプショングループの作成例

以下のコードを実行すると、国ごとに都市をグループ化したセレクトボックスが表示されます。

<!DOCTYPE html>
<html>
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <select>
      <optgroup label = "India">
         <option value = "mumbai">Mumbai</option>
         <option value = "delhi">Delhi</option>
      </optgroup>
      <optgroup label = "USA">
         <option value = "florida">Florida</option>
         <option value = "newyork">New York</option>
      </optgroup>
   </select>
</body>
</html>

この例では、「India」と「USA」という2つのグループを作成し、それぞれに都市の選択肢を配置しています。ブラウザ上では、label 属性で指定したグループ名が太字で表示され、配下の選択肢がインデントされて階層的に見やすく表示されます。

補足ポイント

  • <optgroup> は必ず <select> 要素の中に記述する必要があります。
  • label 属性は必須であり、省略した場合はグループ名が正しく表示されません。
  • 特定のグループだけを選択不可にしたい場合は、<optgroup disabled> のように disabled 属性を追加します。
  • グループ自体は選択できず、あくまで選択肢を整理するための見出しとして機能します。
  1. HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。 size属性の構文 size属性の基本的な記述方法は以下のとおりです。 <tagname size="数値"></tagname> size属性には、表示したい選択肢の数や文字数を整数で指定します。 HTML size属性の使用例 それでは、実際にsize属性を使用した具体

  2. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目