【HTML Living Standard】option要素の使い方
option要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
optionオブジェクトは、HTMLのフォーム要素において、ユーザーが選択できる単一の項目を表すオブジェクトです。主に<select>要素の子要素として使用され、ドロップダウンリストや選択ボックス内で表示される選択肢を提供します。また、<optgroup>要素内で選択肢をグループ化したり、<datalist>要素内で入力候補を提示する際にも利用されます。
この要素のコンテンツは、ユーザーインターフェースに表示される選択肢のテキストとなります。例えば、「リンゴ」と表示される選択肢を作成する場合、<option>リンゴ</option>のように記述します。フォームが送信される際、選択されたoption要素のvalue属性に指定された値がサーバーに送られます。value属性が省略された場合は、要素のコンテンツ（テキスト）が値として送信されます。
初期状態で特定の選択肢が選ばれた状態にするには、ブール属性であるselected属性を使用します。また、disabled属性を付与することで、ユーザーがその選択肢を選べないように無効化することも可能です。label属性は、表示されるテキストと異なる短いラベルを定義したい場合に使用できますが、通常は要素の内容がそのまま表示テキストとして用いられます。
このように、optionオブジェクトは、Webフォームを通じてユーザーが多様な選択を行うための基本的なビルディングブロックとして機能します。
構文(syntax)
1<option value="value_for_server">Displayed Option Text</option>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML optionタグで選択肢を作成する
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>HTML optionタグのサンプル</title> 6</head> 7<body> 8 <h1>お気に入りの色を選択してください</h1> 9 10 <!-- ドロップダウンリストを作成するselect要素 --> 11 <select id="favorite-color" name="favoriteColor"> 12 <!-- option要素は、ドロップダウンリストの各選択肢を定義します --> 13 <!-- value属性は、フォームが送信されたときにサーバーに送られる値です --> 14 <option value="red">赤</option> 15 <option value="blue" selected>青</option> <!-- 'selected'属性は、ページ読み込み時に初期選択状態にします --> 16 <option value="green">緑</option> 17 <option value="yellow" disabled>黄</option> <!-- 'disabled'属性は、この選択肢を選択できないようにします --> 18 </select> 19</body> 20</html>
optionタグは、HTMLでドロップダウンリストや選択肢のグループを作成する際に使用される要素です。主に<select>要素の子要素として配置され、ユーザーがリストの中から一つまたは複数の項目を選択できるようにします。
サンプルコードでは、<h1>タグの下に「お気に入りの色」を選択するドロップダウンリストが作成されており、その<select>タグの中に複数の<option>タグが含まれています。それぞれの<option>タグが、赤、青、緑、黄といった個別の選択肢を表現しています。
このoptionタグにはいくつかの重要な属性があります。value属性は、ユーザーがその選択肢を選んでフォームを送信した際に、サーバーに送られる実際の値（データ）を定義します。例えば、赤と表示されていても、value="red"と設定されていれば、サーバーには"red"が送られます。selected属性を付与すると、ページが読み込まれた時点でその選択肢が初期状態で選択された状態になります。サンプルでは青が初期選択されています。また、disabled属性を付与すると、その選択肢はグレーアウトされ、ユーザーが選択できなくなり、フォーム送信時にもその値は含まれません。サンプルでは黄が選択不可の状態です。
optionタグ自体には、プログラミング言語でいうところの引数や戻り値の概念はありません。その振る舞いや表示は、これらの属性によって制御されます。これにより、ユーザーはWebフォームで用意された選択肢の中から容易に項目を選ぶことが可能になります。
optionタグは、単独では意味を持たず、必ずselectタグの子要素として使用し、ドロップダウンリストの各選択肢を定義します。フォーム送信時には、value属性に指定された値がサーバーに送られるため、ユーザーに表示されるテキストと混同しないよう注意が必要です。selected属性を付与すると、ページ読み込み時にその選択肢が初期状態で選ばれます。一方、disabled属性を付与すると、その選択肢はユーザーが選択できなくなり、グレー表示されることが一般的です。これらの属性を適切に活用することで、ユーザーにとって使いやすく、かつ正確なデータ収集が可能なフォームを作成できます。
HTML option selectedでデフォルト選択する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Option Selected サンプル</title> 7</head> 8<body> 9 <h1>プログラミング言語の選択</h1> 10 11 <label for="preferred-language">好きなプログラミング言語を選択してください:</label> 12 <select id="preferred-language" name="language"> 13 <!-- option要素は、ドロップダウンリストの個々の選択肢を定義します --> 14 <option value="">-- 選択してください --</option> 15 <option value="python">Python</option> 16 <option value="java">Java</option> 17 <!-- selected属性を付けると、ページ読み込み時にこのオプションがデフォルトで選択された状態になります --> 18 <option value="javascript" selected>JavaScript</option> 19 <option value="csharp">C#</option> 20 <option value="go">Go</option> 21 </select> 22</body> 23</html>
このコードは、Webページ上でユーザーが複数の選択肢の中から一つを選ぶことができるドロップダウンリスト（プルダウンメニュー）を作成するHTMLの記述例を示しています。
メインとなる<select>要素の中に、個々の選択肢を定義するための<option>要素が複数配置されています。各<option>要素は、例えば「Python」や「Java」といった具体的な選択項目を表します。HTMLの要素である<option>には、プログラミング言語における引数や戻り値のような機能は存在しません。その役割は、コンテンツの構造や意味をマークアップし、ブラウザにどのように表示するかを指示することにあります。
このサンプルコードで特に注目すべきは、<option value="javascript" selected>JavaScript</option>という行です。ここに記述されているselected属性は、Webページがブラウザに読み込まれた際に、この「JavaScript」という選択肢が初期状態で選ばれた状態になるように指定する役割を持っています。ユーザーがリストを操作する前に、あらかじめ特定の項目をデフォルト値として表示させたい場合に非常に有用な属性です。これにより、ユーザーエクスペリエンスを向上させ、適切な初期選択肢を提供することができます。
option要素は、ドロップダウンリストの個々の選択肢を定義します。特にvalue属性は、フォームが送信される際にサーバーに渡される内部的な値であり、タグで囲んだテキストはユーザーに表示される内容です。この両者の違いを明確に理解することが重要です。
selected属性は、ページが読み込まれた際に、特定のoption要素を初期状態で選択済みにするために使用します。通常、一つのselect要素の中では、selected属性は一つだけ指定してください。複数指定すると、ブラウザによっては予期せぬ動作をしたり、最初のselectedが付いた項目が選択されたりする場合があります。
また、初期選択肢としてvalue=""の「-- 選択してください --」のようなoption要素を用意すると、ユーザーが意図的に選択を促され、未選択時の処理を安全に行えるため、ユーザー体験とフォームの信頼性を高める上で非常に有効です。