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