[48] フォーム部品のグループ化のための fieldset要素と legend要素

フォームの部品の話をする前に、
フォームの部品たちを、グループ化する要素があります。
<fieldset>要素はフォームの部品の要素をグループにまとめます。
<legend>要素はそのグループにタイトルを付ける役割。<fieldset>の子要素です。

<fieldset>要素はフォームを操作する機能も持っていますし、グループ化するには <div> や <p>要素よりも使い勝手が良く、CSSでレイアウトしやすくなります。
どちらも以前からある要素です。

「fieldset」は、そのまんま、フィールドのセット。
「legend（レジェンド）」は、「伝説なんてかっこいい…！」と思ったら、「題名」とか「キャプション」の意味もあるそうで、この場合はこっちでしょうね。

使用する要素	<fieldset> <legend> (タイトル的な内容) </legend> </fieldset>

fieldsetの属性 （一覧はこちら）	form	：親の<form>のID名を呼び出して関連づける
	name	：<fieldset>に固有の名前をつける
	disabled	：使用不可の状態にする

＊legend要素の属性はグローバル属性のみです。

本日のINDEX

1. <fieldset> と <legend>を使ってみよう
2. <fieldset>のデフォルトスタイルは border（囲み罫）
3. <fieldset>はネスト（入れ子）可能
4. <fieldset>の「disabled属性」で中身を無効に
   1. <fieldset>の「disabled属性」を <legend>で操作する
5. <legend>内に ヘディング要素（h1〜h6）も入れられる
6. <fieldset>の属性一覧

<fieldset> と <legend>を使ってみよう

下のように <fieldset>はフォームの部品をグループ分けするのに使います。
必要なら<legend>でグループのタイトルを表示します。
<legend>は <fieldset>の中に1つしか入れられません。（ま、2つもいらんけどね。）

<form method="post" action="sample.cgi">
  <fieldset>
    <legend>ピザのサイズ</legend>
    <p><label> <input type=radio name=size> 小サイズ</label></p>
    <p><label> <input type=radio name=size> 中サイズ</label></p>
    <p><label> <input type=radio name=size> 大サイズ</label></p>
  </fieldset>
</form>

<fieldset>のデフォルトスタイルは border（囲み罫）

<fieldset>は、ブラウザのデフォルトスタイルで周りに border（囲み罫）が表示されます。<legend>でつけたタイトルは、その罫線の上に乗っているのがデフォルト。
<fieldset>要素の border、<legend>要素のテキストのスタイルは CSS で調整します。

ピザのサイズ

Ｓサイズ

Ｍサイズ

Ｌサイズ

<fieldset>はネスト（入れ子）可能

<fieldset>要素はネスト（入れ子に）するのもOK。
シーンに合わせて、下のように整理できます。

ご注文フォーム

お客様名：

電話番号：

メールアドレス：

ピザのサイズ

Ｓサイズ

Ｍサイズ

Ｌサイズ

トッピング

ベーコン

チーズ増量

オニオン

マッシュルーム

上のサンプルの HTMLはこちら。

<form method="post" action="sample.cgi">
  <fieldset class="fsTitle">
   <legend>ご注文フォーム</legend>
   <p><label>お客様名： <input></label></p>
   <p><label>電話番号： <input type=tel></label></p>
   <p><label>メールアドレス： <input type=email></label></p>
   <fieldset>
    <legend>ピザのサイズ</legend>
    <p><label> <input type=radio name=size> Ｓサイズ</label></p>
    <p><label> <input type=radio name=size> Ｍサイズ</label></p>
    <p><label> <input type=radio name=size> Ｌサイズ</label></p>
   </fieldset>
   <fieldset>
    <legend>トッピング</legend>
    <p><label> <input type=checkbox> ベーコン</label></p>
    <p><label> <input type=checkbox> チーズ増量</label></p>
    <p><label> <input type=checkbox> オニオン</label></p>
    <p><label> <input type=checkbox> マッシュルーム</label></p>
   </fieldset>
  </fieldset>
</form>

CSSはこちらです。

.form1 {padding:0; margin:1em 0 2em}
.form1 p {margin:0}
.form1 fieldset {padding:.5em 1em; margin:1em 0; border:solid 1px #ccc}
.form1 fieldset.fsTitle {padding:1em 1.5em .7em; border:solid 2px #ccc}
.form1 legend {font-size:.9rem; font-weight:bold; padding:0 .5em; margin:0 1em}

<fieldset>の「disabled属性」で中身を無効に

<fieldset>要素に「disabled属性」を使うと、その中のフォーム部品はすべて無効（使えない）になります。
下のフォームは、部品のどれを触っても入力できません。

会員カードを利用

カード名義：

カード番号：

有効期限：

上のサンプルの HTMLはこちら。

<form method="post" action="sample.cgi" class="form1">
  <fieldset name="clubfields" disabled>
   <legend> 会員カードを利用</legend>
   <p><label>カード名義： <input name=clubname required></label></p>
   <p><label>カード番号： <input name=clubnum required pattern="[-0-9]+"></label></p>
   <p><label>有効期限： <input name=clubexp type=month></label></p>
  </fieldset>
</form>

<fieldset>の「disabled属性」を <legend>で操作する

<legend>要素に「チェックボックス」を仕込んで「onchange属性」で <fieldset>の disabled属性 を操作できます。
下のフォームは「会員カード利用」にチェックを入れると入力欄が使えます。

会員カードを利用

カード名義：

カード番号：

有効期限：

HTMLです。

<form method="post" action="sample.cgi"">
  <fieldset name="clubfields" disabled>
   <legend>
     <label>
      <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
      会員カードを利用
     </label>
   </legend>
   <p><label>カード名義： <input name=clubname required></label></p>
   <p><label>カード番号： <input name=clubnum required pattern="[-0-9]+"></label></p>
   <p><label>有効期限： <input name=clubexp type=month></label></p>
  </fieldset>
</form>

onchange="form.clubfields.disabled = !checked" （5行目）は、
「form.clubfields.disabled」で ID名が「clubfields」の <fieldset>要素の「disabled」を特定しています。
「checked」は、チェックボックスがチェックされると「true」、されないと「false」が帰りますが、先頭の「!」記号は否定（反対の意味）になるので、チェックされると「false」。「disabled」は「否」となります。で、使えるようになったわけ。

<legend>内に ヘディング要素（h1〜h6）も入れられる

HTML5.1 の 2nd Edition までは、<legend>内には「フレージング・コンテンツ」しか入れられませんでしたが、HTML5.2 からは ヘディング要素（h1〜h6）も入れられるようになりました。

下の赤い字のタイトルは <h3>要素を使っています。

会員カード情報

会員カードを利用

カード名義：

カード番号：

有効期限：

HTMLはこちら。

<form method="post" action="sample.cgi" class="form1">
  <fieldset name="clubfields" disabled>
   <legend>
     <h3>会員カード情報</h3>
     <label>
      <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
      会員カードを利用
     </label>
   </legend>
   <p><label>カード名義： <input name=clubname required></label></p>
   <p><label>カード番号： <input name=clubnum required pattern="[-0-9]+"></label></p>
   <p><label>有効期限： <input name=clubexp type=month></label></p>
  </fieldset>
</form>

CSSはこちらです。5行目以外は他のサンプルと同じです。

.form1 {padding:0; margin:1em 0 2em}
.form1 p {margin:0}
.form1 fieldset {padding:.5em 1em; margin:1em 0; border:solid 1px #ccc}
.form1 legend {font-size:.9rem; font-weight:bold; padding:0 .5em; margin:0 1em}
.form1 legend h3 { display:inline-block; font-size:.9rem; line-height:1; margin-right:.7em; color:#930}

<fieldset>の属性一覧

form="<form>要素のID"　 new

このform属性はHTML5からの新属性です。これを使えば<fieldset>要素を<form>要素の外に出すことができます。
下のように<form>要素にID名を付けておき、<fieldset>の form属性でそのIDを呼び出します。これでこの <fieldset>は ID「ex」のフォームに紐付けられます。

<fieldset form="ex">
（内容省略）
</fieldset>
<!-- fieldset ごと出せる ↑ -->
<form method="post" action="sample.cgi" id="ex">
<input type="submit" value="送信する">
</form>

「form属性」については「[47] form要素で「データ送信可能なフォーム」である事を示そう」の「HTML5からの変更点」もご覧ください。

name="<fieldset>の名前"

<fieldset>要素に固有の名前をつけます。
<fieldset>要素に名前がついてれば、Javascriptなどでその <fieldset>要素を特定して操作できます。

<fieldset name="example">

disabled（または「disabled=""」「disabled="disabled"」 ）

<fieldset>要素の中の部品が全部が「無効」になり、入力や選択ができなくなります。

<fieldset name="example" disabled>

このほかグローバル属性も使います

当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

＊<legend>要素で使える属性は「グローバル属性」だけです。

次回予告

次回から、フォームの部品を使っていきましょう。
まずは <input>要素。これはフォーム部品でいちばんよく使う要素です。
「type属性」の値によって、多種多様な部品に変化します。
HTML5から「type属性」の値や、他の属性も増えて、さらにいろんなことができるようになりました。