【サンプルコードあり】fieldsetタグの使い方を解説！
【サンプルコードあり】fieldsetタグの使い方を解説します。fieldsetタグを用いることでフォームのグループ間の移動がとても楽になります。そのあたりを踏まえて、サンプルコードを用いて実際の挙動も見せることにより分かりやすく解説します。
fieldsetとはどんなタグ？
HTMLタグの1つであるfieldsetタグは主にフォームの中で用いられ、フォームの内容をグループ化しまとめます。
またlegendタグとよく一緒に用いられ、グループ化したフォームの内容の名前付けを行います。
それでは次の項目において、サンプルコードを用いて解説します。
fieldsetの使い方
それではHTMLでのfieldsetの使い方について解説します。
ここでは例として個人情報を一つのグループにまとめる場合について解説します。
まずformタグで全体を囲み、fieldsetで個人情報の入力欄（お名前と住所）を囲みグループ化します。
そしてlegendタグでグループが何を示しているのか説明し、fieldsetタグの中にグループの要素であるinputタグなどを入れます。
こうすることでグループ化することができ、ユーザビリティを向上させることができます。
ではサンプルコードを用いて実際の挙動を見てみましょう。
上記のようにfieldsetによって個人情報がグループ化されていることが分かります。
またこのグループ化された入力欄はTabキーで移動が可能です。
ぜひ試してみてください。
fieldsetの枠線を消す方法
グループ化をしたいが枠線は必要ないという時があります。しかしfieldsetを用いるとデフォルトで枠線が付いてしまいます。
この問題はCSSを用いて簡単に解説できます。具体的にはfieldset要素のborderをnoneとするだけです。
では実際にサンプルコードを用いて挙動を見てみましょう。
このようにborder: noneで枠線を消すことができました。
実践的な使い方
まずどのような見た目なのかサンプルコードを用いてプレビューで見てみましょう。
後に簡単に解説します。
このように背景色をつけてグループ化してあげると、とても見やすくて良いと思います。
それではCSSのコードを簡単に解説します。
まずfieldsetの枠線を取り除くためにborderをnoneとし、灰色の背景色をつけています。
次にlegend要素に白色の背景色をつけています。
以上です。グループごとに背景色でつけるだけで、どのようにグループ分けされているのかとても分かりやすいです。
まとめ
いかがでしたでしょうか？
fieldsetはフォームの中では必須のタグではありませんが、記入量が多いフォームなどでは、fieldsetを用いることで、とても見やすくなりユーザビリティを向上させることができます。
ぜひ使ってみてください。
