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

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

私はW3Schoolsでいくつかの情報を調べました。

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

「なぜ仕様にあるのか」と「何をするのか」を間違えている人のためのより詳しい説明。描画部分は無関係であり、フォーム内の関連する要素をグループ化するためだけに特別なタグが必要な理由はわかりません。

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

<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">Blue</label>

</fieldset>

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

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

<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>

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

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

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

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

ここで説明するように、このタグの目的は、フォームの構成を明確にし、設計者がフォーム要素を装飾するためのアクセスを容易にすることです。

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

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

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

また、アクセシビリティを忘れないでください。スクリーンリーダーでは、フォームを理解し、何らかの自然な方法でフォームをユーザーに読み上げるために、fieldset + legendが必要です。目の見えるユーザーに見られたくない場合は、遠慮なく伝説を消してください。凡例をCSSで正しくレイアウトしてスタイル設定すると、特にレガシーブラウザではクロスブラウザの問題が発生することがあるので、凡例タグをスクリーンリーダーのユーザーから見えなくし、別のaria-hidden = "true"スパンをラベルのようなスタイルで追加します。目の見えるユーザーは、スタイルをシンプルにし、アクセスしやすい状態を保ちます。

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

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

これと同じ質問がSOでここに回答されました。

いくつかの利点を要約すると：

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

言い換えると、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>

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

• データ（この場合はフォーム）を最もセマンティックにマークアップできます。利用可能な方法でできます。フィールドをフィールドセットに配置する方が、フィールドをdivに配置するよりも説明的であると考えてください。divはフィールド間の関係について何も伝えません。fieldsetは関係があることを伝えます。
• を使用して 無効にし、それはあなたが一度に、そのすべての内容を無効にすることができます。
• アクセシビリティに役立つ

私にとって、<fieldset>...</fieldset>要素の最大の利点の1つは、<form>...</form>たとえ<fieldset>...</fieldset>、フォーム内になくです。

たとえば、次のフォーム：

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

意味的に次の形式と同じです：

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>