Perché abbiamo bisogno di un tag fieldset?


165

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.


30
Perché abbiamo bisogno di qualche tag? Perché abbiamo bisogno di un tag img quando possiamo creare un'immagine da div 1px con colori di sfondo?
Oded,

127
Nota: W3C non ha nulla a che fare con w3schools.
Wesley Murch,

82
Non fare riferimento a w3schools. Basta usare MDN: fieldset @ MDN .
Sirko,

9
@Madmartigan Lo so. Ma W3C fornisce solo specifiche che non ho trovato molto utili per ottenere una risposta alla mia domanda.
Monaco orientale

2
Informazioni (non) sull'uso di W3Schools e sull'utilizzo di siti più affidabili per informazioni tecniche: w3fools.com
Denilson Sá Maia,

Risposte:


187

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.


4
Non ho un link a portata di mano, ma a quanto pare molti screen reader leggono il testo della legenda prima di ogni etichetta nel fieldset.
Wesley Murch,

8
@Madmartigan - Questa è una buona cosa, significa che sai che hai ancora a che fare con lo stesso set di pulsanti di opzione. (È anche un motivo per assicurarsi che la legenda sia concisa ).
Quentin,

1
"tecnologia assistiva" che ha molto senso.
Monaco orientale

5
Inoltre, <fieldset> può essere utilizzato per "disabilitare" gli elementi raggruppati. Mi aspetto che <fieldset> debba essere usato anche per specificare se un gruppo è richiesto aggiungendo l'attributo 'richiesto' al tag, purtroppo non funziona!
Simon Savai,

41

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>


6
Naturalmente, si potrebbe argomentare che l' disabledattributo in quanto funziona per fieldseti controlli s e form, dovrebbe essere giustamente implementato anche per l' formelemento. Avrebbe senso, vero?
AMN

25

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


fieldset non è presente in HTML4. È una funzione HTML5
radio_head


14

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.


6

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.


4

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.


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.- Questo è il comportamento predefinito degli ingressi radio e non ha nulla a che fare con i set di campi. Le caselle di controllo si comportano diversamente per impostazione predefinita.
Vladimir Kornea,

2

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.


2

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.


2

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à

1

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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.