表示サンプル: このページの修正箇所は次のように表示されます。
HTML 及び XHTML
これは、次の達成基準に関連する実装方法である:
この実装方法の目的は、関連するフォーム・コントロールをセマンティックにグループ化する方法を提供することである。これによって、ユーザーはフォーム・コントロールの関係が理解でき、より早く効率的にフォームを利用できるようになる。
フォーム・コントロールは、fieldset
要素で囲むことによってグループ化できる。つまり、fieldset
要素内にある全てのフォームコントロールが関連付けられることになる。fieldset
要素内での最初の要素はlegend
要素[ここから変更]でなければならず、[変更ここまで]legend
要素はそのグループのラベルや[ここから変更]説明[変更ここまで]を提供するものである。[ここから変更]なお、ユーザーを混乱させてしまう恐れがあるため、コンテンツ制作者は必要以上に fieldsets
要素を入れ子にすることを避けるべきである。[変更ここまで]
フォーム・コントロールのグループ化が最も重要なのは、関連するラジオボタンやチェックボックスをまとめるときである。ラジオボタンやチェックボックスは、name
属性で同じ値が指定されている場合に、一組のコントロールとして関連付けられる。これらは、選択肢の中から自由に選択できるセレクトメニューと同じように動作することになるが、セレクトメニューは単一のコントロールであるのに対し、ラジオボタンとチェックボックスは複数のコントロールである点が異なる。[ここから変更]それぞれのラジオボタンやチェックボックスの個々のラベルは、そのグループの説明となる文脈を十分に伝えられないことがある。この場合、セマンティックにグループ化しておくことが特に重要であり、それによって単一のコントロールのように簡単に操作できるようになり、またグループの説明を補足することができる。ユーザーエージェントは、その説明を提供し、複数のコントロールが同じグループの一部であることをユーザーに伝えるために、各コントロールのラベルよりも先にlegend
要素の内容を提示することが多い。[変更ここまで]
ラジオボタンやチェックボックスほどには明確に関連していないコントロールをグループ化することが有用になることがある。たとえば、ユーザーの住所を入力するフィールドがいくつかに分かれている場合、「住所」というlegend
要素を付けてグループ化しておくとよい。
ブラウザの初期状態では、fieldset
要素によってグループ化したコントロール全体を枠で囲むという表示であるため、コンテンツ制作者はfieldset
要素の利用を避けたい場合がある。しかし、このような視覚的なグループ化も有益であり、その状態のままにしておくこと(あるいは、何らかの形で視覚的にグループ化すること)をしっかり検討すべきである。見た目のスタイルについては、CSSでfieldset
要素に対する「border」プロパティを上書きしたり、fieldset
要素に対する「position」プロパティを上書きしたりすることによって変更できる。
関連する複数のラジオボタンが小さなグループであり、分かりやすい使用法とはっきりと異なった選択肢で構成されている場合は、fieldset
要素とlegend
要素を利用する必要はなく、H44: label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける の実装方法を用いれば十分なこともある。
この事例では、1つの質問に対して5つの解答の中からどれかを選べるテスト項目を示している。解答はそれぞれラジオボタン(input type="radio"
)で提示されており、fieldset
要素に含めてある。テストの質問内容はlegend
要素でタグ付けしてある。
コード例:
<fieldset>
<legend>戯曲<cite>ハムレット</cite>を書いたのは</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">ウィリアム・シェークスピア</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">ラドヤード・キップリング</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">ジョージ・バーナード・ショー</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">アーネスト・ヘミングウェイ</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">チャールズ・ディケンズ</label>
</fieldset>
あるウェブサイトでのユーザー・プロフィールのページで、ユーザーが複数のチェックボックスを選んで自分の興味を示せるようになっている。各チェックボックス(input type="checkbox"
)には、label
がある。すべてのチェックボックスは、fieldset
要素に含められており、legend
要素にはチェックボックスのグループ全体の説明がある。
コード例:
<fieldset>
<legend>次のことに興味があります(全て選択することも可)</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">写真</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">水彩画</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">アクリル画</label>
…
</fieldset>
この事例では、1人の哲学者を選ぶようにユーザーに求めている。各ラジオボタンが関連している(同じフィールドとして送信される)ことを示すために「name
」属性で同じ値を指定し、見た目としてもグループ化すべき点に注意しよう。また、「name
」属性は同じ値であっても、「id
」属性はそれぞれ一意的な値でなければならない点にも注意しよう。
コード例:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>あなたが好きな哲学者</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">ソクラテス</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">プラトン</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">アリストテレス</label>
</fieldset>
</form>
注記: 関連するチェックボックスのグループも同じように動作するが、ユーザーが1つ以上のフィールドを選べる点がラジオボタンとは異なる。
この事例では、居住地と郵送先のフィールドを別々にfieldset
要素でグループ化し、legend
要素で異なる内容を指定している。
コード例:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>居住地</legend>
<label for="raddress">住所:</label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">郵便番号:</label>
<input type="text" id="rzip" name="rzip" />
……居住地の入力内容が続く……
</fieldset>
<fieldset>
<legend>郵送先</legend>
<label for="paddress">住所:</label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">郵便番号:</label>
<input type="text" id="pzip" name="pzip" />
……郵送先の入力内容が続く……
</fieldset>
</form>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML 4.01 Checkboxes
論理的に関連しているinput
要素またはselect
要素のグループが、1つのfieldset
要素内に含められている。
各fieldset
要素には、そのグループの説明を含めたlegend
要素が指定されている。
上記全てを満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。