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

最終更新日:2018年03月30日  (初回投稿日:2013年03月12日)

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

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

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

使用する要素 <fieldset>
<legend> (fieldsetのタイトル) </legend>
</fieldset>
fieldsetの属性
一覧はこちら
form :親の<form>のID名を呼び出して関連づける
name :<fieldset>に固有の名前をつける
disabled :使用不可の状態にする
本日のINDEX
  1. <fieldset> と <legend>を使ってみよう
  2. <fieldset>のデフォルトスタイルは border(囲み罫)
  3. <fieldset>はネスト(入れ子)可能
  4. <fieldset>の「disabled属性」で中身を無効に
    1. <fieldset>の「disabled属性」を <legend>で操作する
  5. <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>
   <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> Sサイズ</label></p>
    <p><label> <input type=radio name=size> Mサイズ</label></p>
    <p><label> <input type=radio name=size> Lサイズ</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>

<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」は「否」となります。で、使えるようになったわけ。

<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属性」の値や、他の属性も増えて、さらにいろんなことができるようになりました。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2018/04 | 05
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.