fieldset 要素

4.10.4 fieldset 要素

カテゴリー
フロー・コンテンツ
セクショニング・ルート
リスト化されるフォーム関連要素
この要素を使うことができるコンテキスト：
フロー・コンテンツが期待される場所
コンテンツ・モデル：
オプションでひとつの legend 要素の後にフロー・コンテンツが続く
コンテンツ属性：
グローバル属性
disabled
form
name
DOMインタフェース：
interface HTMLFieldSetElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute DOMString name;

  readonly attribute DOMString type;

  readonly attribute HTMLFormControlsCollection elements;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);
};

fieldset 要素は、共通の名前のもとでグループ化されたフォーム・コントロールのセットを表します。

グループの名前は、fieldset 要素の子となる最初の legend 要素があれば、それによって与え、その残りの子孫が、そのグループを形成します。

disabled 属性が指定されると、その fieldset 要素の子孫のフォーム・コントロールすべてが無効になります。ただし、fieldset 要素の子のうち最初の legend 要素の子孫となるものがあれば、それらは除外され、無効になりません。

form 属性は、明示的に fieldset 要素をフォーム・オーナーと関連付けるために使われます。name 属性は要素の名前を表します。

fieldset . type

文字列 "fieldset" を返します。

fieldset . elements

該当要素にあるフォーム・コントロールの HTMLCollection を返します。

disabled IDL 属性は、同じ名前のコンテンツ属性を反映しなければいけません。

type IDL 属性は、文字列 "fieldset" を返さなければいけません。

elements IDL 属性は、fieldset 要素をルートにした HTMLFormControlsCollection を返さなければいけません。そのフィルターは、リスト化要素に一致します。

willValidate, validity, validationMessage 属性、そして、checkValidity() と setCustomValidity() メソッドは、制約バリデーション API の一部です。form と name IDL 属性は、この要素の forms API の一部です。

制約バリデーション： fieldset 要素は常に制約バリデーションから除外されます。

次の抜粋には、fieldset の中に legend があり、さらにその中には、fieldset を有効にするか無効にするかを制御するチェックボックスがあります。fieldset のコンテンツには、入力必須のテキスト・フィールドが 2 つ、そして、入力必須ではない年月のコントロールが 1 つあります。

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>

さらに fieldset 要素を中に入れることもできます。この例では、前述の例を拡張して、そのようにしています：

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

この例では、もし、外側の "Use Club Card" のチェックボックスがチェックされなかったら、外側の fieldset の中にあるものすべては、無効になるでしょう。ネストされた 2 つの fieldset の legend の中にある 2 つのラジオ・ボタンも含みます。しかし、もし、そのチェックボックスがチェックされたら、そのラジオボタンはいずれも有効になり、その有効になった 2 つの内側の fieldset を選択することができるようになります。

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-fieldset-element