チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のフォーム関連~optgroup要素、option要素~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

フォーム関連

optgroup要素

option要素をグループ化してラベル付けができる。

<select>
    <optgroup label="ラーメン">
        <option>醤油ラーメン</option>
        <option>味噌ラーメン</option>
        <option>塩ラーメン</option>
    </optgroup>
    <optgroup label="焼きそば">
        <option>ソース焼きそば</option>
        <option>塩焼きそば</option>
    </optgroup>
</select>

chromeで表示したとき
f:id:chooringo:20190812123306p:plain

カテゴリ
・なし

コンテンツモデル
・0または1つ以上のoption要素、スクリプトサポーティング要素

コンテンツ属性
・グローバル属性
・disabled - フォームコントロールを無効にする(論理属性)
・label - グループ名

タグの記載場所
・select要素の子要素として配置

option要素

select要素またはdatalist要素の選択肢を表す。

<select>
    <optgroup label="ラーメン">
        <option>醤油ラーメン</option>
        <option selected>味噌ラーメン</option>
        <option>塩ラーメン</option>
    </optgroup>
</select>

chromeで表示したとき
f:id:chooringo:20190812123400p:plain

カテゴリ
・なし

コンテンツモデル
・label属性とvalue属性を持つ場合:なし
・label属性を持つがvalue属性がない場合:テキスト
・label属性を持たず、datalist要素の子要素でない場合:空白以外のテキスト
・label属性を持たず、datalist要素の子要素の場合:テキスト

コンテンツ属性
・グローバル属性
・disabled - フォームコントロールを無効にする(論理属性)
・label - ラベル名。この属性が指定なしなら要素のコンテンツが選択肢となる。
・selected - デフォルトで選択済みする(論理属性)
value - フォーム送信時に使用する値。この属性が指定なしなら要素のコンテンツがフォーム送信される。

タグの記載場所
・select要素の子要素として配置可能
・datalistの子要素として配置可能
・optgroup要素の子要素として配置可能