<option>: OPTION 要素
最終更新：2026-10-13
<option>OPTION 要素
select・datalist・optgroup 内の選択可能な項目を表します。
| カテゴリ | フォーム |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </option> タグ |
| ステータス | 標準 |
📝 構文
<option value="apple">りんご</option>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
value | Value sent to the server (falls back to text if omitted). | |
selected | Pre-select this option. | |
disabled | Disables this option. | |
label | Alternative display text. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <option> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： value を省略すると、タグ間のテキストが送信されます。
❓ よくある質問
Qoption の value と表示文字はどんな関係ですか？
Avalue 属性があれば、送信されるのは value の値で、タグ間の文字は表示だけに使われます。value がなければ、タグ間の文字そのものが送信されます。ベストプラクティスは常に value を書くこと（
<option value='tyo'>東京</option> など）です。変わりうる表示文をバックエンドに依存させないためです。Qoption に disabled を設定できますか？
A設定できます。
<option disabled> はその選択肢を選べなくします（グレー表示）。よくある用途は、グループの案内行「選択してください」のプレースホルダーや、販売終了の選択肢です。optgroup まるごと無効化することもできます。Qoption の中に HTML を書けますか？
A基本的に書けません。ネイティブの option はプレーンテキストしか描画しません（一部のブラウザは最小限のマークを容認しますが、信頼できません）。アイコンや2行表示などリッチなドロップダウンは、カスタムコンポーネントかサードパーティ製ライブラリで実装し、アクセシビリティ属性を忘れずに残しましょう。
🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
