Perché abbiamo bisogno di un tag fieldset?

Perché abbiamo bisogno di un <fieldset>tag? Qualunque sia lo scopo che serve è probabilmente un sottoinsieme del tag del modulo.

Ho cercato alcune informazioni su W3Schools, che dice:

• Il <fieldset>tag viene utilizzato per raggruppare elementi correlati in un modulo.
• Il <fieldset>tag disegna una casella attorno agli elementi correlati.

Ulteriori spiegazioni per coloro che stanno sbagliando "perché esiste nelle specifiche" per "cosa fa". Penso che la parte del disegno sia irrilevante e non vedo perché abbiamo bisogno di un tag speciale solo per raggruppare alcuni elementi correlati in un modulo.

L'esempio più ovvio e pratico è:

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

Ciò consente di etichettare ciascun pulsante di opzione fornendo al contempo un'etichetta per il gruppo nel suo insieme. Ciò è particolarmente importante laddove viene utilizzata la tecnologia di supporto (come uno screen reader) in cui l'associazione dei controlli e la loro legenda non possono essere implicate nella presentazione visiva.

Un'altra caratteristica di fieldset è che disabilitandola si disabilitano tutti i campi al suo interno.

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

È necessario per l'accessibilità.

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

HTML 4 elementi fieldsete legendconsentono di layout e organizzare un gran modulo con diverse aree di interesse in modo logico senza usare le tabelle. Il fieldsettag può essere utilizzato per creare caselle attorno ad elementi selezionati e il legendtag fornirà una didascalia a tali elementi. In questo modo gli elementi del modulo possono essere raggruppati in categorie identificate.

Browser diversi possono visualizzare il fieldsetbordo predefinito in diversi modi. I fogli di stile a cascata possono essere utilizzati per rimuovere il bordo o modificarne l'aspetto.

Come descritto qui , lo scopo di questo tag è quello di fornire chiarezza all'organizzazione del modulo e consentire a un designer un accesso più semplice per decorare gli elementi del modulo.

Fieldset organizza gli elementi in moduli logicamente, ma migliora anche l'accessibilità per coloro che utilizzano i browser auricolari. Fieldset è utile e quindi era molto popolare in passato in molte applicazioni, quindi lo hanno implementato anche in HTML.

Mi piace il fatto che quando circondi le tue radio con fieldset e non inserisci ID nei tag di input del pulsante di opzione, il gruppo rappresentato dal fieldset viene aggiunto al tabchain come se fosse un singolo elemento.

Ciò consente di scorrere un modulo e, quando si arriva a un fieldset, è possibile utilizzare i tasti di direzione per modificare la radio selezionata e quindi fare clic su tab al termine.

Inoltre, non dimenticare l'accessibilità. Gli screen reader hanno bisogno di fieldset + legenda per comprendere il tuo modulo ed essere in grado di leggerlo all'utente in qualche modo naturale. Sentiti libero di sparire la leggenda se non vuoi che gli utenti vedenti la vedano. La stesura e lo stile della legenda giusta con i CSS a volte è complicato, soprattutto con i browser legacy, quindi rendere il tag della legenda invisibile per gli utenti di screen reader e aggiungere un intervallo separato, "aria-nascosto =" vero "in stile come un'etichetta per gli utenti vedenti rendono le cose semplici nello stile e le rendono accessibili.

Lo trovo utile per lo stile CSS e l'associazione delle etichette ai controlli. Rende facile posizionare un contenitore visivo attorno a un gruppo di campi e allineare le etichette.

Uso i set di campi per raggruppare input di form, quando ho un form enorme e voglio scomporlo in una sorta di wizard di form.

Le stesse domande hanno avuto risposta qui su SO.

Riassumendo alcuni vantaggi:

L' <fieldset> elemento HTML  viene utilizzato per raggruppare diversi controlli e etichette ( <label>) all'interno di un modulo Web come definito da MDN .

In altre parole: il tag fieldset consente di raggruppare logicamente gruppi di campi in modo che i moduli siano più descrittivi. Quindi, un insieme di controlli del modulo raggruppati facoltativamente sotto un nome comune.

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

I " vantaggi " dell'utilizzo di un fieldset sono:

• ti permettono di contrassegnare i tuoi dati (in questo caso un modulo) nel modo più semantico disponibile. Considerare che posizionare i campi in un set di campi è più descrittivo che posizionare i campi in un div. Il div non ti dice nulla sulla relazione tra i campi, un fieldset ti dice che c'è una relazione.
• usando disabilitato , ti permette di disabilitare tutti i suoi contenuti in una volta sola.
• è utile per l' accessibilità

Per quanto mi riguarda, uno dei maggiori vantaggi <fieldset>...</fieldset>dell'elemento è la capacità di preservare il <form>...</form>contesto anche se <fieldset>...</fieldset>non è all'interno della forma.

Ad esempio, il seguente modulo:

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

è semanticamente identico al seguente modulo:

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