【HTML】fieldset - 入力項目のグループ化

HTMLのfieldsetタグをご紹介します。

fieldsetタグ

fieldsetタグは入力項目をグループ化します。

基本構文

<fieldset>
    <legend>見出し・説明</legend>
    入力要素
</fieldset>

fieldset要素に見出しや説明を付けるにはlegendタグを使用します。

legendタグ

legendタグはfieldset要素の見出しや説明をマークアップします。

サンプルコード

※ サンプルコードのため、フォームは動作しません。

ソースコード

<h1>注文</h1>
<form action="https://it-hack.net/null" method="GET">
    <fieldset>
        <legend>食べ物</legend>
        <label><input name="food" type="radio"> ハンバーガー</label><br>
        <label><input name="food" type="radio"> パスタ</label><br>
        <label><input name="food" type="radio"> 海鮮丼</label>
    </fieldset>
    <fieldset>
        <legend>飲み物</legend>
        <label><input name="drink" type="radio"> 水</label><br>
        <label><input name="drink" type="radio"> お茶</label><br>
        <label><input name="drink" type="radio"> 牛乳</label>
    </fieldset>
    <input type="submit" value="送信">
</form>

プレビュー