HTML optionタグ
HTML <option>タグは、選択リスト(<select>)や複数選択リストで使用される個々の選択肢を定義するために使用されます。このタグは選択肢の表示とユーザーの入力をポイントにして、Webフォームをよりインタラクティブにするための重要な要素です。
optionタグの定義と使用法
HTML <option>タグは、一つの選択肢を定義します。これは<select>タグまたは<datalist>タグの子要素として使用されます。
例として、以下は基本的な<select>タグと<option>タグの使用例です：
<select name="fruits">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="cherry">さくらんぼ</option>
</select>ブラウザのサポート状況
HTML <option>タグは、全ての主要なブラウザでサポートされています。これはInternet Explorer、Firefox、Chrome、Safari、Operaなどでも同様です。
optionタグの属性
以下の表は<option>タグで使用できる主要な属性を示しています：
| 属性 | 説明 |
|---|---|
value |
選択肢の値を指定します。 |
label |
選択肢のラベルを指定します（表示用） |
selected |
選択肢をデフォルトで選択する場合に使用します。 |
disabled |
選択肢を無効にする場合に使用します。 |
optionタグのイベント
通常、<option>タグには直接イベントリスナーを追加することは少ないですが、親の<select>要素に対してイベントを処理することが一般的です。以下は主要なイベントです：
change- ユーザーが選択肢を変更したときに発生します。
コード例
理解を深めるために、以下は選択肢の選択を監視するJavaScriptコードを含む例です：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>optionタグの例</title>
</head>
<body>
<label for="fruits">好きな果物を選んでください:</label>
<select name="fruits" id="fruits">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="cherry">さくらんぼ</option>
</select>
<p id="display">何も選択されていません。</p>
<script>
document.getElementById('fruits').addEventListener('change', function() {
const selectedFruit = this.value;
document.getElementById('display').innerText = '選択された果物: ' + selectedFruit;
});
</script>
</body>
</html>関連QA
Q1. optionタグは必ずselectタグの中に含まれる必要がありますか？
A1. はい、optionタグは通常selectタグまたはdatalistタグの中に含まれて使用されます。これらの親タグなしで使用することはできません。
Q2. 複数のoptionタグの中から複数の選択肢を選ぶ方法はありますか？
A2. はい、selectタグにmultiple属性を追加することで複数選択を可能にできます。例：<select name="fruits" multiple>
Q3. optionタグの中で表示されるテキストを動的に変更することは可能ですか？
A3. はい、JavaScriptを使用してoptionタグのinnerTextやvalue属性を動的に変更することができます。