【サンプルコードあり】fieldsetタグの使い方を解説！

HTMLタグの1つであるfieldsetタグは主にフォームの中で用いられ、フォームの内容をグループ化しまとめます。

またlegendタグとよく一緒に用いられ、グループ化したフォームの内容の名前付けを行います。

それでは次の項目において、サンプルコードを用いて解説します。

それではHTMLでのfieldsetの使い方について解説します。

ここでは例として個人情報を一つのグループにまとめる場合について解説します。

まずformタグで全体を囲み、fieldsetで個人情報の入力欄（お名前と住所）を囲みグループ化します。

そしてlegendタグでグループが何を示しているのか説明し、fieldsetタグの中にグループの要素であるinputタグなどを入れます。

こうすることでグループ化することができ、ユーザビリティを向上させることができます。
ではサンプルコードを用いて実際の挙動を見てみましょう。

上記のようにfieldsetによって個人情報がグループ化されていることが分かります。

またこのグループ化された入力欄はTabキーで移動が可能です。
ぜひ試してみてください。

グループ化をしたいが枠線は必要ないという時があります。しかしfieldsetを用いるとデフォルトで枠線が付いてしまいます。

この問題はCSSを用いて簡単に解説できます。具体的にはfieldset要素のborderをnoneとするだけです。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにborder: noneで枠線を消すことができました。

まずどのような見た目なのかサンプルコードを用いてプレビューで見てみましょう。

後に簡単に解説します。

このように背景色をつけてグループ化してあげると、とても見やすくて良いと思います。

それではCSSのコードを簡単に解説します。

まずfieldsetの枠線を取り除くためにborderをnoneとし、灰色の背景色をつけています。

次にlegend要素に白色の背景色をつけています。

以上です。グループごとに背景色でつけるだけで、どのようにグループ分けされているのかとても分かりやすいです。

いかがでしたでしょうか？

fieldsetはフォームの中では必須のタグではありませんが、記入量が多いフォームなどでは、fieldsetを用いることで、とても見やすくなりユーザビリティを向上させることができます。

ぜひ使ってみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。