fieldset 要素

4.10.16 fieldset 要素

カテゴリー:
フロー・コンテント
セクショニング・ルート
リスト対象 かつ 再関連付け可能フォーム関連要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
オプションでひとつの legend 要素、その後にフロー・コンテントが続く。
コンテント属性:
グローバル属性
disabled - フォームコントロールが無効かどうか
form - form 要素にコントロールを関連付ける
name - フォームのサブミットform.elements API で使うフォームコントロールの名前
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
group (デフォルト - 指定不要) または presentation.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
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(DOMString error);
};

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

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

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

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

fieldset . type

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

fieldset . elements

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

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

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

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

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

この例は、fieldset 要素が関連しあうコントロールのセットをグループ化するために使われているところを示しています:

<fieldset>
 <legend>ディスプレイ</legend>
 <div><label><input type=radio name=c value=0 checked> 白地に黒</label></div>
 <div><label><input type=radio name=c value=1> 黒地に白</label></div>
 <div><label><input type=checkbox name=g> グレースケールを使う</label></div>
 <div><label>コントラストの強調 <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label></div>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>

前述と後述のコードのサンプルで使われている div 要素は、何か意味を伝えるためのものではなく、グループ化された fieldset のコントロールをインラインでない形でレンダリングするためだけに使われています。

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

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  クラブカードを使う
 </label> </legend>
 <div><label>カードに記載された名前: <input name=clubname required></label></div>
 <div><label>カード番号: <input name=clubnum required pattern="[-0-9]+"></label></div>
 <div><label>有効期限: <input name=clubexp type=date></label></div>
</fieldset>

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

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  クラブカードを使う
 </label> </legend>
 <div><label>カードに記載された名前: <input name=clubname required></label></div>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   カードに番号が記載されている
  </label> </legend>
  <div><label>カード番号: <input name=clubnum required pattern="[-0-9]+"></label></div>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   カードに文字が記載されている
  </label> </legend>
  <div><label>カードコード: <input name=clublet required pattern="[A-Za-z]+"></label></>
 </fieldset>
</fieldset>

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


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-fieldset-element