【HTML】fieldsetタグで綺麗なフォームをマークアップする！

2021こんにちは。

より本格的なマークアップの勉強をしているとfieldsetタグという初心者向けのweb制作の教材では出てこないようなタグを見かけることがありますよね。

何だfieldsetタグって？

こんな悩みを抱いたことありませんか？

いろいろなwebサイトをブラウザの検証ツールで見てみてもあまり見たことがないfieldsetタグ。しかしプロのコーダーやマークアップエンジニアを目指すには必要なタグの一つになります。

今回は、fieldsetタグの

・基本的な使い方
・legendタグとの組み合わせ方

について説明します。

目次 [非表示]

1 fieldsetタグとは
2 fieldsetタグの基本的な使い方
- 2.1 fieldsetタグの使い方
- 2.2 disabled属性を使用した場合
3 legendタグと組み合わせてマークアップする
4 まとめ

fieldsetタグとは

fieldsetタグの読み方

fieldsetは「フィールドセット」と読みます。

fieldの類義語にgroupがありますが、要はグループです。

fieldsetはfield(グループ)をset(配置)するという言葉をつなげたタグになります。

fieldsetタグはフォーム関連の要素をグループ化するタグ

fieldsetタグは

フォーム関連の要素をグループ化するためのタグ

です。

ちなみにfieldsetタグはブロック要素に該当するタグになっています。

fieldsetタグで利用できる属性

fieldsetタグでは以下の属性を使うことができます。

属性	説明
disabled	グループ内のフォーム部品を無効にする
form	フォーム部品を特定のform要素(id属性の値で指定)と関連づける
name	フォーム部品の名前

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
Internet Explorer	完全対応
Opera	12.1~
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	12.1~
iOS版Safari	完全対応
Samsung Internet	完全対応

fieldsetタグの基本的な使い方

fieldsetタグの使い方

基本的にはフォーム内のグループ分けで使用します。

フォーム内のdivタグのような感じですね。

使用回数に上限はなく、グループの数に合わせてfieldsetタグを使用することができます。

<form action="send.php" method="post">
    <fieldset>
      <label for="name">名前：</label>
      <input type="text" name="name">
    </fieldset>
    <fieldset>
      <label for="email">メールアドレス：</label>
      <input type="email" name="email">
    </fieldset>
    <fieldset>
      <label for="tel">電話番号：</label>
      <input type="tel" name="tel">
    </fieldset>
  </form>

</fieldset>

<label for="email">メールアドレス：</label>

</fieldset>

</fieldset>

</form>

ブラウザのデフォルトのCSSではfieldsetタグで囲まれている箇所にボーダーが入ります。

このようにして、フォームの関連要素を明示化することができます。

disabled属性を使用した場合

<form action="send.php" method="post">
    <fieldset>
      <label for="name">名前：</label>
      <input type="text" name="name">
    </fieldset>
    <fieldset disabled="disabled">
      <label for="email">メールアドレス：</label>
      <input type="email" name="email">
    </fieldset>
    <fieldset>
      <label for="tel">電話番号：</label>
      <input type="tel" name="tel">
    </fieldset>
  </form>

</fieldset>

<label for="email">メールアドレス：</label>

</fieldset>

</fieldset>

</form>

今回はメールアドレスのfieldsetタグにdisabled属性を付けました。

disabled属性を付けると、付けたfieldset内のフォームは入力不可能になります。

注意

ブラウザがIEの場合、disabled属性は部分的なサポートになります。

inputタグのtype属性がtextまたはfileのみ、disabled属性が動作します。

legendタグと組み合わせてマークアップする

通常、fieldsetタグはlegendタグとセットでマークアップします。

legendタグは、fieldsetタグによってグループ化された箇所の言わばグループ名を表示する役割を担います。

<form action="send.php" method="post">
    <fieldset>
      <legend>性別</legend>
      <p>
        <label for="sex">男</label>
        <input type="radio" name="sex">
      </p>
      <p>
        <label for="sex">女</label>
        <input type="radio" name="sex">
      </p>
    </fieldset>
    <fieldset>
      <legend>趣味</legend>
      <p>
        <label for="check">読書</label>
        <input type="checkbox" name="check">
      </p>
      <p>
        <label for="check">ジム</label>
        <input type="checkbox" name="check">
      </p>
      <p>
        <label for="check">料理</label>
        <input type="checkbox" name="check">
      </p>
      <p>
        <label for="check">音楽</label>
        <input type="checkbox" name="check">
      </p>
    </fieldset>
  </form>

<p>

</p>

<p>

</p>

</fieldset>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</fieldset>

</form>

このように、フォームのグループ化した箇所にグループ名をつけることができます。

注意

fieldsetタグにlegendタグを挿入する場合は、必ず先頭に挿入する必要があります。

まとめ

いかがでしたか？

今回はfieldsetタグの基本的な使い方からlegendタグとの組み合わせまでを紹介しました。

fieldsetタグを使用するとフォームの内部をグループ化することができて非常に見やすくなりますよね！

HTML初学者ですと、今回のようなfieldsetタグの箇所をdivタグで代用してしまいがちですが、fieldsetタグという適材適所のタグに置き換えることによって、一段上のマークアップをすることができます。

ぜひ実際に使用してみてグループ化したフォームをコーディングしてみましょう！

参考文献：http://www.htmq.com/html5/fieldset.shtml

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。