web-dev-qa-db-ja.com

なぜフィールドセットタグが必要なのですか？

なぜ<fieldset>タグが必要なのですか？目的が何であれ、おそらくformタグのサブセットです。

私はW3Schoolsに関するいくつかの情報を調べました。

  • <fieldset>タグは、フォーム内の関連要素をグループ化するために使用されます。
  • <fieldset>タグは、関連する要素の周りにボックスを描画します。

「仕様に存在する理由」を「それが何をするのか」と勘違いしている人々へのさらなる説明。描画部分は無関係だと思うので、フォーム内の関連する要素をグループ化するためだけに特別なタグが必要な理由はわかりません。

htmlfieldset
154
Eastern Monk

最も明白で実用的な例は次のとおりです。

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Red</label>

</fieldset>

これにより、各ラジオボタンにラベルを付けながら、グループ全体にラベルを付けることができます。これは、コントロールとその凡例の関連付けが視覚的な表現で暗示できない場合に、支援技術（スクリーンリーダーなど）が使用されている場合に特に重要です。

174
Quentin

Fieldsetの別の機能は、それを無効にすると、その中に含まれるすべてのフィールドが無効になることです。

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>
32
Collin Price

アクセシビリティのために必要です。

チェックアウト： http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML 4の要素fieldsetおよびlegendを使用すると、テーブルを使用せずに論理的な方法で関心のあるさまざまな領域を持つ大きなフォームをレイアウトおよび整理できます。 fieldsetタグは、選択した要素の周囲にボックスを作成するために使用でき、legendタグはそれらの要素にキャプションを提供します。このようにして、フォーム要素を特定のカテゴリにグループ化できます。

ブラウザによって、デフォルトのfieldsetボーダーが異なる方法で表示される場合があります。カスケードスタイルシートを使用して、境界線を削除したり、外観を変更したりできます。

24
Eric Sites

here で説明したように、このタグの目的は、フォームの構成を明確にし、デザイナーがフォーム要素を簡単に装飾できるようにすることです。

14
dthagard

ラジオをフィールドセットで囲み、ラジオボタン入力タグにIDを配置しない場合、フィールドセットによって表されるグループが単一のアイテムであるかのようにタブチェーンに追加されるのが気に入っています。

これにより、フォームをタブで移動できます。フィールドセットに到達したら、矢印キーを使用して選択したラジオを変更し、完了したらタブで移動できます。

また、アクセシビリティを忘れないでください。スクリーンリーダーは、フォームを理解し、何らかの自然な方法でユーザーに読み上げるために、fieldset + legendを必要とします。目の見えるユーザーに見せたくない場合は、お気軽に凡例を消してください。 CSSで凡例を適切にレイアウトしてスタイリングすることは、特にレガシーブラウザーでクロスブラウザーを危険にさらす場合があるため、スクリーンリーダーユーザーに対して凡例タグを非表示にし、ラベルのようなスタイルの別のaria-hidden = "true"スパンを追加する目の見えるユーザーは、物事のスタイルを簡単にし、物事にアクセスしやすくします。

5
DWoldrich

Fieldsetは、アイテムを論理的にフォームに整理しますが、音声ブラウザを使用するユーザーのアクセシビリティも向上させます。 Fieldsetは便利であるため、過去には多くのアプリケーションで非常に人気があったため、HTMLでも実装しました。

5
Boris D. Teoharov

CSSスタイリングとラベルをコントロールに関連付けるのに便利です。フィールドのグループの周りに視覚的なコンテナを簡単に配置し、ラベルを揃えることができます。

2
Chuck Spohr

巨大なフォームがあり、一種のフォームウィザードで分割したい場合、フォームセットを使用してフォーム入力をグループ化します。

これと同じ質問に答えました here SO.

2
Eric H.

いくつかの利点を要約するだけです：

HTML <fieldset>要素は、 MDN で定義されているように、Webフォーム内のいくつかのコントロールとラベル（<label>）をグループ化するために使用されます。

つまり、fieldsetタグを使用すると、フォームをよりわかりやすくするために、フィールドのセットを論理的にグループ化できます。したがって、フォームコントロールのセットは、オプションで共通名の下にグループ化されます。

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

フィールドセットを使用する場合の「advantages」は次のとおりです。

  • 使用可能な最も多くの セマンティック 方法でデータ（この場合はフォーム）をマークアップできます。フィールドをフィールドセットに配置する方が、フィールドをdivに配置するよりもわかりやすいと考えてください。 divはフィールド間の関係については何も伝えず、fieldsetは関係があることを伝えます。
  • disabledを使用すると、一度にすべてのコンテンツを無効にできます。
  • accessibility に役立ちます
2
mmsilviu