Perché abbiamo bisogno di un tag fieldset?

Question

Perché abbiamo bisogno di un tag <fieldset>? Qualunque scopo serva è probabilmente un sottoinsieme del tag form.

ho guardato un po 'di informazioni su W3Schools, che dice:

• Il tag <fieldset> è usato per gli elementi relativi gruppo in un modulo.
• Il tag <fieldset> disegna un riquadro attorno agli elementi correlati.

Altre spiegazioni per coloro che sbagliano "perché esiste nelle specifiche" per "che 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.

Answer 1

La più evidente, esempio 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">Red</label> 
 

 
</fieldset>

Questo consente a ciascun pulsante da etichettare, fornendo inoltre un etichetta per il gruppo nel suo complesso. Ciò è particolarmente importante dove viene utilizzata la tecnologia assistiva (come uno screen reader) in cui l'associazione dei controlli e la loro legenda non possono essere implicati dalla presentazione visiva.

Answer 2

Trovo utile per lo stile CSS e l'associazione di etichette ai controlli. Semplifica l'inserimento di un contenitore visivo attorno a un gruppo di campi e l'allineamento delle etichette.

Answer 3

Fieldset organizza gli elementi nei moduli in modo logico ma migliora anche l'accessibilità per coloro che utilizzano i browser audio. Fieldset è pratico e quindi è stato molto popolare in passato in molte applicazioni, quindi è stato implementato anche in html.

Answer 4

Come descritto in here, lo scopo di questo tag è di fornire chiarezza sull'organizzazione del modulo e consentire a un progettista un accesso più semplice per decorare gli elementi del modulo.

Answer 5

È necessario per l'accessibilità.

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

L'HTML 4 elementi fieldset e legend consentono di disporre e organizzare una grande forma con molte aree diverse di interesse in modo logico senza usare le tabelle. Il tag fieldset può essere utilizzato per creare caselle attorno agli elementi selezionati e il tag legend darà una didascalia a quegli elementi. In questo modo gli elementi del modulo possono essere raggruppati in categorie identificate.

Diversi browser possono visualizzare il bordo predefinito fieldset in diversi modi. È possibile utilizzare i fogli di stile CSS per rimuovere il bordo o modificarne l'aspetto.

Answer 6

Uso i set di campi per raggruppare gli input dei moduli, quando ho una forma enorme e voglio suddividerli in una sorta di procedura guidata.

Questa stessa domanda ha risposto allo here su SO.

Answer 7

Mi piace che quando si circondano le radio con fieldset e non si inseriscano gli ID sui tag di input del pulsante di scelta, il gruppo rappresentato dal fieldset viene aggiunto al tabchain come se fosse un singolo elemento.

In questo modo è possibile passare da una scheda a un modulo e, quando si arriva a un fieldset, è possibile utilizzare i tasti freccia per modificare la radio selezionata e quindi fare clic su una scheda quando si è terminato.

Inoltre, non dimenticare l'accessibilità. Gli screen reader hanno bisogno di fieldset + legend per capire la tua forma ed essere in grado di leggerla all'utente in qualche modo naturale. Sentiti libero di svanire la leggenda se non vuoi che gli utenti vedenti lo vedano. La stesura e la legenda dello styling a destra con i CSS sono a volte cross-browser pericolosi, specialmente con i browser legacy, quindi trovo che il tag legend sia invisibile per gli utenti di screen reader e aggiunga un'estensione separata, aria-hidden = "true" simile a un'etichetta per gli utenti vedenti rendono le cose semplici da stile e mantengono le cose accessibili.

Answer 8

Un'altra funzione di fieldset è che disabilitando disattiva tutti i campi contenuti 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>