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>

<!-- オートフィルとグルーピングの組み合わせ例 -->
<fieldset>
 <legend>Ship the blue gift to...</legend>
 <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
 <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
 <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
</fieldset>
<fieldset>
 <legend>Ship the red gift to...</legend>
 <p> <label> Address:     <textarea name=ra autocomplete="section-red shipping street-address"></textarea> </label>
 <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level2"> </label>
 <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
</fieldset>
↑この領域は編集できます（シンタックスハイライトは同期しません）。

説明

囲んだフォームフィールドをグループ化する。fieldsetを入れ子にしてサブグループを作っても良い。 最初のlegendでグループ名を指定できる。

HTML4ではlegendの指定は必須だったが、HTML5では任意になった。

属性 属性値の見方

disabled  new(真偽値)
子孫に指定されているフィールドをすべて無効にする。値も送信されない。
form  new[ID]ie ✗
関連付けるformのid属性の値を指定（name属性ではなく）。無い場合は親になっているformに関連付けられる。fieldsetは関連付けられるけど、中のグルーピングされたフォーム部品は関連付けられない。えっ
name  new[文字列]
そのフィールドグループの名前。送信には利用されない。