journal.kanpintan

非IT企業でweb製作などしてます。小麦アレルギー(グルテン不耐症?)でグルテンフリー生活してます。

fieldsetとlegendでややこしいフォームをサクッとまとめた話

はじめに

見積もりフォームが古くなってきたので新しく作り変えています。細かい仕様を入力してもらうのため、ちょっとややこしい感じになっているのですが、その際にfieldsetタグって便利だな〜と思った話です。

fieldsetタグとlegendタグ

<fieldset>
    <legend>好きな野菜</legend>

    <input type="radio" id="tomato" name="yasai">
    <label for="tomato">トマト</label><br/>

    <input type="radio" id="spinach" name="yasai">
    <label for="spinach">ほうれん草</label><br/>

    <input type="radio" id="potato" name="yasai">
    <label for="potato">Mothman</label>
</fieldset>

表示例はこちら f:id:arugatter:20180810224316p:plain

こんな感じで、フォームを項目ごとにまとめられる感じです。

developer.mozilla.org

便利!

こういう本買って、もっかい勉強しなおうそうかな😨