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

HTMLのfieldsetタグについて解説します。

検証環境

HTML

macOS

14.1

fieldsetタグ

fieldsetタグは“入力項目をグループ化”するタグです。

基本構文

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

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

legendタグ

legendタグは“fieldset要素の見出しや説明”を意味するタグです。

サンプル

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

sample.html

<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>

プレビュー