Warum brauchen wir ein Fieldset-Tag?

Warum brauchen wir eine <fieldset> Schild? Welchem ​​Zweck auch immer es dient, es ist wahrscheinlich eine Teilmenge des form-Tags.

Ich habe einige Informationen zu W3Schools nachgeschlagen, in denen steht:

• Das <fieldset> -Tag wird verwendet, um verwandte Elemente in einem Formular zu gruppieren.
• Das <fieldset> tag zeichnet einen Rahmen 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 sehe nicht ein, warum wir ein spezielles Tag brauchen, nur 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>

Dadurch kann jedes Optionsfeld beschriftet werden, während gleichzeitig eine Beschriftung für die Gruppe als Ganzes bereitgestellt wird. Dies ist besonders wichtig, wenn unterstützende Technologien (z. B. ein Bildschirmlesegerät) 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 seine Deaktivierung 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.

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

Die HTML 4-Elemente fieldset und legend ermöglichen es Ihnen, ein großes Formular mit vielen verschiedenen Interessensgebieten logisch zu gestalten und zu organisieren, ohne Tabellen zu verwenden. Das fieldset -Tag kann verwendet werden, um Rahmen um ausgewählte Elemente zu erstellen und die legend Tag gibt diesen Elementen eine Beschriftung. Auf diese Weise können Formularelemente in identifizierten Kategorien zusammengefasst werden.

Verschiedene Browser zeigen möglicherweise die Standardeinstellung an fieldset Grenze auf unterschiedliche Weise. Cascading Style Sheets können verwendet werden, um den Rahmen zu entfernen oder sein Aussehen zu ändern.

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

Was mich betrifft, einer der größten Vorteile des <fieldset>...</fieldset> Element ist die Fähigkeit zu bewahren <form>...</form> Kontext, auch wenn die <fieldset>...</fieldset> ist nicht im Formular.

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>

Fieldset organisiert Elemente in Formularen logisch, verbessert aber auch die Zugänglichkeit für diejenigen, die akustische Browser verwenden. Fieldset ist praktisch und daher in der Vergangenheit in vielen Anwendungen sehr beliebt, sodass sie es auch in HTML implementiert haben.

Ich fasse nur einige Vorteile zusammen:

Der HTML-Code <fieldset> -Element wird verwendet, um mehrere Steuerelemente sowie Beschriftungen zu gruppieren (<label>) innerhalb eines Webformulars, wie es definiert ist durch MDN.

Mit anderen Worten: Mit dem fieldset-Tag können Sie Gruppen von Feldern logisch gruppieren, damit Ihre Formulare aussagekräftiger sind. Also eine Reihe von Formularsteuerelementen, die optional unter einem gemeinsamen Namen gruppiert werden.

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

Das “Vorteile” der Verwendung eines Fieldsets sind:

• Sie ermöglichen es Ihnen, Ihre Daten (in diesem Fall ein Formular) am besten zu markieren semantisch Weg zur Verfügung. Bedenken Sie, dass das Platzieren Ihrer Felder in einem Fieldset aussagekräftiger ist als das Platzieren Ihrer Felder in einem div. Das div sagt Ihnen nichts über die Beziehung zwischen den Feldern, ein fieldset sagt Ihnen, dass es eine Beziehung gibt.
• durch die Nutzung deaktiviertermöglicht es Ihnen, die und alle ihre Inhalte auf einmal zu deaktivieren.
• es ist hilfreich zu Barrierefreiheit