プログラミング

option要素はセレクトボックスの選択肢を指定する【HTML】

option要素はselect要素によって作成できるプルダウンメニューとかセレクトボックスとかよばれるものの選択肢を指定します。

プルダウンメニューは以下のようなメニューのことで、「血液型は?」と表示されているものや、クリックしたら表示される「A型・B型・O型・AB型」などの選択肢はoption要素でマークアップしています。

option要素で指定できる属性や、一つのグループにまとめることができるoptgroup要素についても説明したいと思います。

option要素で使える属性

option要素で指定できる属性は以下のようなものがあります。

  • disabled(ディスエーブルド)
  • label(ラベル)
  • selected(セレクテッド)
  • value(バリュー)

disabled(ディスエーブルド)

disabled属性を指定すると、その選択肢を選択できなくなります。

また、disabled属性は値を必要としない論理属性です。

label(ラベル)

label属性でoption要素のラベルを指定することができます。

selected(セレクテッド)

selected属性は、初期状態で選択された項目だということを表す属性です。

selected属性は論理属性です。

value(バリュー)

value属性で送信されるクエリ値を指定することができます。

もし指定しなかった場合は、option要素の内容のテキストが値として送られます。

最初に紹介した血液型のメニューだと、A型をマークアップしているoption要素のvalueには「A型」と指定し、B型をマークアップしているoption要素のvalueには「B型」と指定しているといった感じ。

optgroup要素

optgroup要素は、select要素とoption要素によって作られたプルダウンメニューにおいて、選択肢のグループを表す要素。

この要素は選択肢が多いときに役立ちます。

たとえば上の例では、optgroup要素を使ってアジアとヨーロッパというグループに分けていて、それぞれlabelには「アジア」「ヨーロッパ」と指定しています。

すると、グループ名と少し段落が下がった状態で選択肢が表示されているのがわかると思います。

optgroup要素ではlabel属性によるラベルの指定が絶対必要で、何かしらの文字列を記述する必要があります。

また、disabled属性で選択できない選択肢グループにすることもできます。

ちなみにoption要素はdatalist要素による入力候補の選択肢を表すときにも使えます。

関連記事
select要素でプルダウンメニューを作成できる【HTML】

2 Comments

Leave a Comment