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

【サンプルコードあり】fieldsetタグの使い方を解説します。fieldsetタグを用いることでフォームのグループ間の移動がとても楽になります。そのあたりを踏まえて、サンプルコードを用いて実際の挙動も見せることにより分かりやすく解説します。

コンテンツ [表示]

  1. 1fieldsetとはどんなタグ?
  2. 2fieldsetの使い方
  3. 2.1fieldsetの枠線を消す方法
  4. 2.2実践的な使い方
  5. 3まとめ

fieldsetとはどんなタグ?

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

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

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

Photo byjamesmarkosborne

fieldsetの使い方

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

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

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

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

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

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

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

fieldsetの枠線を消す方法

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

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

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

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

実践的な使い方

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

後に簡単に解説します。

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

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

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

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

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

まとめ

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

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

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

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

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

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

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次