Warum brauchen wir ein Fieldset-Tag?

165

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.

Ostmönch
quelle
30
Warum brauchen wir ein Tag? Warum brauchen wir ein IMG-Tag, wenn wir ein Bild aus 1px-Divs mit Hintergrundfarben erstellen können?
Oded
127
Bitte beachten Sie: W3C hat nichts mit w3schools zu tun.
Wesley Murch
82
Beziehen Sie sich nicht auf w3schools. Verwenden Sie einfach MDN: fieldset @ MDN .
Sirko
9
@ Madmartigan Ich weiß. Aber W3C gibt nur Spezifikationen an, die ich für die Beantwortung meiner Frage nicht sehr nützlich fand.
Eastern Monk
2
Über (nicht) die Verwendung von W3Schools und die Verwendung vertrauenswürdigerer Websites für technische Informationen: w3fools.com
Denilson Sá Maia

Antworten:

186

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.

QUentin
quelle
4
Ich habe keinen Link zur Hand, aber anscheinend lesen viele Bildschirmleser den Legendentext vor jedem Etikett im Feldsatz.
Wesley Murch
8
@Madmartigan - Das ist eine gute Sache, es bedeutet, dass Sie wissen, dass Sie immer noch mit denselben Optionsfeldern zu tun haben. (Dies ist auch ein Grund, um sicherzustellen, dass die Legende präzise ist ).
Quentin
1
"assistive Technologie", die sehr viel Sinn macht.
Eastern Monk
5
Darüber hinaus kann <fieldset> verwendet werden, um gruppierte Elemente zu deaktivieren. Ich würde erwarten, dass <fieldset> auch verwendet werden sollte, um anzugeben, ob eine Gruppe erforderlich ist, indem dem Tag das Attribut 'required' hinzugefügt wird. Leider funktioniert das nicht!
Simon Savai
41

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>

Collin Preis
quelle
6
Natürlich könnte man argumentieren, dass das disabledAttribut, wie es für fieldsets- und Formularsteuerelemente funktioniert , zu Recht auch für das formElement implementiert werden sollte . Es würde Sinn machen, nicht wahr?
amn
25

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.

Eric Sites
quelle
Feldsatz ist in HTML4 nicht vorhanden. Es ist eine HTML5-Funktion
radio_head
5
Es erschien in HTML 4.0.1 - w3.org/TR/html401/interact/forms.html#h-17.10
Eric Sites
14

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.

dthagard
quelle
6

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.

Boris D. Teoharov
quelle
4

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.

DWoldrich
quelle
This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.- Dies ist das Standardverhalten von Funkeingängen und hat nichts mit Feldsätzen zu tun. Kontrollkästchen verhalten sich standardmäßig anders.
Vladimir Kornea
2

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.

Chuck Spohr
quelle
2

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 .

Eric H.
quelle
2

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
mmsilviu
quelle
1

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