2025年1月31日 / 最終更新日時 : 2025年2月10日 weeds お役立ち

optionタグ -選択肢を定義する｜HTML辞典

<option>タグとは？

<option> タグは、<select> や <optgroup> の中で選択肢を定義するためのタグ です。
フォームのドロップダウンリストや選択メニューの各項目を作成する際に使用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、フォーム関連コンテンツ（Form-associated Content）。

閉じタグの有無

<option> は開始タグ（<option>）と閉じタグ（</option>）の両方が必要です。

基本的な記述方法

<select name="fruit">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="grape">ぶどう</option>
</select>

使用できる主な属性

<option> タグには重要な属性がいくつかあります。

属性名	説明	例
`value`	選択肢の値を指定	`<option value="red">赤</option>`
`selected`	デフォルトの選択状態にする	`<option selected>りんご</option>`
`disabled`	選択できない状態にする	`<option disabled>選択不可</option>`
`label`	`<option>` に説明を追加（非推奨）	`<option label="青">ブルー</option>`

CSSを使ったデザイン変更

デフォルトのデザインを変更したい場合は、CSSを活用できます。

select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
}

適切な使用例

✅ 一般的なドロップダウンリスト

<select name="color">
    <option value="red">赤</option>
    <option value="blue">青</option>
    <option value="green">緑</option>
</select>

✅ selected を使ってデフォルトの選択肢を指定

<select name="size">
    <option value="small">Sサイズ</option>
    <option value="medium" selected>Mサイズ</option>
    <option value="large">Lサイズ</option>
</select>

✅ disabled を使って選択できないオプションを作成

<select name="payment">
    <option value="credit">クレジットカード</option>
    <option value="paypal" disabled>PayPal（現在利用不可）</option>
    <option value="bank">銀行振込</option>
</select>

✅ <optgroup> を使って選択肢をグループ化

<select name="food">
    <optgroup label="フルーツ">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
    </optgroup>
    <optgroup label="野菜">
        <option value="carrot">にんじん</option>
        <option value="potato">じゃがいも</option>
    </optgroup>
</select>

適切でない使用例（誤った使い方）

❌ <option> を <select> の外に記述すると機能しない

<!-- NG: <select> の外に <option> を記述 -->
<option value="dog">犬</option>
<select name="pet">
    <option value="cat">猫</option>
</select>

✅ 正しい書き方（<option> は <select> の中に記述）

<select name="pet">
    <option value="dog">犬</option>
    <option value="cat">猫</option>
</select>

❌ value を指定しないとフォーム送信時に値が取得できない

phpコピーする編集する<!-- NG: value属性なし -->
<select name="language">
    <option>日本語</option>
    <option>英語</option>
</select>

✅ 正しい書き方（value を指定）

<select name="language">
    <option value="ja">日本語</option>
    <option value="en">英語</option>
</select>

<option>タグと他のタグの違い

タグ	役割	特徴	適切な用途
`<option>`	選択肢を定義	`value` を指定可能	`<select>` 内の個別の選択肢
`<select>`	ドロップダウンリストを作成	`<option>` を内包	単一選択、複数選択
`<optgroup>`	選択肢をグループ化	`label` 属性を指定	`<select>` 内のカテゴリ分け
`<input type="radio">`	ラジオボタンを作成	グループの中から1つを選択	少数の選択肢（2～5個程度）

使用上の注意点

✅ <option> は必ず <select> または <optgroup> の中に配置する

<select> の外に <option> を記述しても動作しない。

✅ value 属性を指定してフォーム送信時に値を取得できるようにする

value を指定しないと、フォーム送信時に選択された値が送信されない。

✅ selected を使用してデフォルトの選択肢を指定できる

selected を使うと、最初に選択される値を決めることができる。

まとめ

<option>タグは、HTML文書内で<select>や<optgroup>の中で選択肢を定義するためのタグです。 valueを適切に設定し、selectedやdisabledを活用してユーザーが選択しやすいUIを作成できます。

カテゴリー: お役立ち