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

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

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

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

option要素で使える属性

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

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

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

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

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

selected属性は論理属性です。

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

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

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

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

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

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

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

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

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

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