【サンプルコードあり】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
を用いることで、とても見やすくなりユーザビリティを向上させることができます。
ぜひ使ってみてください。
