<fieldset>要素

<fieldset>要素の定義

英語で「地面」や「欄」を意味する”field”＋”set”より。HTML文書では、フォーム内のラベルなどのいくつかのコントロールをグループ化するために使用します。

子要素として使用できるもの

任意の <legend> 要素とそれに続くフローコンテンツ。

親要素として使えるもの

フローコンテンツを受け入れるすべての要素。

許可されているARIAロール

group, presentation

DOMインターフェース

HTMLFieldSetElement

属性

グローバル属性が指定できます。

disabled

この属性を指定することで、子孫要素として配置したコントロールを無効化します。

form

<fieldset>要素に関連付けられる、<form> 要素の”id”属性を指定します。
この属性によって <form> 要素の子孫にするだけでなく、同一文書内にある任意の <form> 要素に<fieldset>要素を関連付けることが可能になりました。

name

グループに関連付けられた名前を指定します。ページに表示するためのラベルは <legend> 要素で指定します。

スタイル付けに関するTIPS

<fieldset>要素は、基本的に”display”プロパティの値は、”block”ですが、インラインレベルの”display”プロパティの値を指定した場合、”inline-block”として動作します。
＊デフォルトでは、”2px groove”のボーダーと若干のパディングが設定されます。
また、<legend> 要素が存在する場合は、<legend> 要素がボーダーに重なるように配置されます。

サンプル

See the Pen pozaXow by Masahiko Iwakiri (@m-iwakiri) on CodePen.