optionタグとは?|プルダウンメニューの選択肢を作成しよう

optionタグとは?|プルダウンメニューの選択肢を作成しよう
博士
今回から複数に分けて、HTMLでプルダウンメニューを作る方法を解説するぞ。
リンゴ
よくアンケートなんかで、複数の選択肢の中から項目を選ぶときに使われてるやつですよね?
博士
そうじゃ。
プルダウンメニューは、複数のタグと属性から作られておるぞ。
今回は、メニューの選択肢を作成する<option>タグについて解説していくぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<option>タグとは

 

<option>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所select要素の子要素として / optgroup要素の子要素として / datalist要素の子要素として
内容テキスト


 
 
<option>タグは、プルダウンメニューの選択肢、または入力候補リストの選択肢を作成する際に使用するタグです。
<select>〜</select>内で使用し、メニューの選択肢を作成します。
<option>タグ1つにつき、1つの選択肢となります。
 
 

value属性

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

使用例

 
 

表示例

 
 

スポンサーリンク

label属性

label属性は、選択肢にラベル(項目名)を付ける際に使用します。
この属性がない場合は、option要素の内容がラベルとなります。
 
 

使用例

 
 

表示例

 
 

selected属性

selected属性を指定すると、その項目があらかじめ選択された状態で表示されるようになります。
 
 

使用例

 
 

表示例

 
 

スポンサーリンク

disabled属性

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

使用例

 
 

表示例

 
 

まとめ

<option>タグは、プルダウンメニューの選択肢を作成する際に使用するタグです。
属性を指定することによって、項目名を変えたり、デフォルトで選択されている項目を指定したりすることができます。
 
 

博士
次回は、<select>タグと<option>タグを使って実際にプルダウンメニューを作ってみるぞ。
 
 
HTML5 タグ図鑑

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

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








optionタグとは?|プルダウンメニューの選択肢を作成しよう