Warum brauchen wir ein Fieldset-Tag?

Warum brauchen wir ein <fieldset>Tag? Welchen Zweck es auch erfüllt, es ist wahrscheinlich eine Teilmenge des Formular-Tags.

Ich habe einige Informationen zu W3Schools nachgeschlagen, die besagen:

• Das <fieldset>Tag wird verwendet, um verwandte Elemente in einem Formular zu gruppieren.
• Das <fieldset>Tag zeichnet ein Kästchen um die zugehörigen Elemente.

Weitere Erklärungen für diejenigen, die "warum es in der Spezifikation existiert" mit "was es tut" verwechseln. Ich denke, der Zeichnungsteil ist irrelevant, und ich verstehe nicht, warum wir ein spezielles Tag benötigen, um einige verwandte Elemente in einem Formular zu gruppieren.

Das offensichtlichste praktische Beispiel ist:

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

Auf diese Weise kann jedes Optionsfeld beschriftet werden, während gleichzeitig eine Beschriftung für die gesamte Gruppe bereitgestellt wird. Dies ist besonders wichtig, wenn unterstützende Technologien (z. B. ein Bildschirmleser) verwendet werden, bei denen die Zuordnung der Steuerelemente und ihrer Legende nicht durch visuelle Darstellung impliziert werden kann.

Ein weiteres Merkmal von fieldset ist, dass durch Deaktivieren alle darin enthaltenen Felder deaktiviert werden.

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

Es wird für die Zugänglichkeit benötigt.

Check out: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

Die HTML 4 Elemente fieldsetund legendermöglichen es Ihnen, das Layout und eine große Form mit vielen verschiedenen Bereichen von Interesse auf logische Weise organisieren , ohne Tabellen. Das fieldsetTag kann verwendet werden, um Felder um ausgewählte Elemente zu erstellen, und das legendTag gibt diesen Elementen eine Beschriftung. Auf diese Weise können Formularelemente zu identifizierten Kategorien zusammengefasst werden.

Verschiedene Browser können den Standardrahmen fieldsetauf unterschiedliche Weise anzeigen . Mit Cascading Style Sheets können Sie den Rand entfernen oder sein Erscheinungsbild ändern.

Wie hier beschrieben , besteht der Zweck dieses Tags darin, die Organisation des Formulars klarer zu gestalten und dem Designer einen einfacheren Zugriff auf die Dekoration von Formularelementen zu ermöglichen.

Fieldset organisiert Elemente in Formularen logisch, verbessert jedoch auch die Zugänglichkeit für Benutzer von akustischen Browsern. Fieldset ist praktisch und daher in der Vergangenheit in vielen Anwendungen sehr beliebt, sodass es auch in HTML implementiert wurde.

Ich mag es, wenn Sie Ihre Funkgeräte mit einem Feldset umgeben und keine IDs auf Ihre Optionsfeld-Eingabetags setzen, wird die durch das Feldset dargestellte Gruppe der Registerkarte hinzugefügt, als wäre es ein einzelnes Element.

Auf diese Weise können Sie durch ein Formular blättern. Wenn Sie zu einem Feldsatz gelangen, können Sie mit den Pfeiltasten das ausgewählte Radio ändern und dann fortfahren, wenn Sie fertig sind.

Vergessen Sie auch nicht die Zugänglichkeit. Bildschirmleser benötigen Fieldset + Legende, um Ihr Formular zu verstehen und es dem Benutzer auf natürliche Weise vorlesen zu können. Sie können die Legende auch verschwinden lassen, wenn Sie nicht möchten, dass sehende Benutzer sie sehen. Das richtige Layout und Styling von Legenden mit CSS ist manchmal ein heikler Cross-Browser, insbesondere bei älteren Browsern. Daher finde ich, dass das Legenden-Tag für Benutzer von Bildschirmleseprogrammen unsichtbar ist und eine separate, arienversteckte = "wahre" Spanne hinzugefügt wird, die wie ein Etikett für gestaltet ist Sehende Benutzer vereinfachen das Stylen und halten die Dinge zugänglich.

Ich finde es praktisch, CSS zu gestalten und Beschriftungen Steuerelementen zuzuordnen. Es macht es einfach, einen visuellen Container um eine Gruppe von Feldern zu platzieren und die Beschriftungen auszurichten.

Ich verwende Feldsätze, um Formulareingaben zu gruppieren, wenn ich ein großes Formular habe und es in einer Art Formularassistent aufteilen möchte.

Die gleichen Fragen wurden hier auf SO beantwortet .

Fassen Sie nur einige Vorteile zusammen:

Das HTML-  <fieldset> Element wird verwendet, um mehrere Steuerelemente sowie label ( <label>) in einem Webformular zu gruppieren, wie es von MDN definiert wird .

Mit anderen Worten: Mit dem Feldsatz-Tag können Sie Feldsätze logisch gruppieren, damit Ihre Formulare aussagekräftiger sind. Daher wird eine Reihe von Formularsteuerelementen optional unter einem gemeinsamen Namen gruppiert.

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

Die " Vorteile " der Verwendung eines Feldsatzes sind:

• Mit ihnen können Sie Ihre Daten (in diesem Fall ein Formular) auf die semantischste verfügbare Weise markieren . Bedenken Sie, dass das Platzieren Ihrer Felder in einem Feldsatz aussagekräftiger ist als das Platzieren Ihrer Felder in einem Div. Das div sagt Ihnen nichts über die Beziehung zwischen den Feldern, ein Feldsatz sagt Ihnen, dass es eine Beziehung gibt.
• unter Verwendung deaktiviert , es erlaubt Ihnen , die und alle Inhalte in einem Rutsch zu deaktivieren.
• Es ist hilfreich für die Zugänglichkeit

Für mich ist einer der größten Vorteile des <fieldset>...</fieldset>Elements die Fähigkeit, den <form>...</form>Kontext zu bewahren, auch wenn sich das <fieldset>...</fieldset>nicht innerhalb des Formulars befindet.

Zum Beispiel das folgende Formular:

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

ist semantisch identisch mit der folgenden Form:

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