フォーム部品をグループ化してわかりやすくする

フォーム部品を囲む枠をfiledset、枠につける表題をlegendといいます。

fieldsetAndLegendpng
            label {
                background-color: white; 
                border: 1px solid dodgerblue;
                padding: 2px 6px 2px 2px; 
                margin-bottom: 4px; 
                display: inline-block; 
                cursor: pointer;
            }
            
            label:hover {
                background-color: dodgerblue;
                color: white;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>[ボディタイプ]</legend>
            <label><input type="radio" name="body" value="SUV">SUV</label>
            <label><input type="radio" name="body" value="minivan">ミニバン</label>
            <label><input type="radio" name="body" value="compact">コンパクト</label>
            <label><input type="radio" name="body" value="sedan">セダン</label>
            <label><input type="radio" name="body" value="suport">スポーツ</label>
            <label><input type="radio" name="body" value="wagon">ワゴン</label>
            <label><input type="radio" name="body" value="kei">軽自動車</label><br>
        </fieldset>
        <fieldset>
            <legend>[シート]</legend>
            <label><input type="radio" name="seat" value="2">2人</label>
            <label><input type="radio" name="seat" value="3">3人</label>
            <label><input type="radio" name="seat" value="4">4人</label>
            <label><input type="radio" name="seat" value="4">5人</label>
            <label><input type="radio" name="seat" value="4">6人</label>
            <label><input type="radio" name="seat" value="4">7人</label><br>
        </fieldset>
    </body>
</html>

フォーム部品をグループ化してわかりやすくする 最後までお読みいただきありがとうございます。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します!