(Sample)

以下のようにフォーム部品を囲む枠を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>

Webアプリケーション制作のための小ネタ集　目次に戻る

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

研修のカリキュラムを見てみる