Tag HTML <fieldset>
Il tag HTML <fieldset> raggruppa visivamente i campi correlati in un modulo HTML definito con il tag <form>. Sintassi ed esempi.
Il tag <fieldset> raggruppa i controlli logicamente correlati all'interno di un <form> HTML, permettendoti di suddividere un modulo lungo in sezioni chiare. Per impostazione predefinita il browser disegna un riquadro attorno al contenuto raggruppato. Abbinato a un <legend>, è anche il modo corretto per assegnare un'etichetta condivisa e accessibile a un gruppo di controlli <input>.
Questa pagina tratta la sintassi, il ruolo di <legend>, tutti gli attributi (name, disabled, form), come ridefinire o rimuovere il riquadro, e perché <fieldset> è importante per i gruppi di radio button e checkbox accessibili.
Sintassi
Il tag <fieldset> va in coppia. Il contenuto è scritto tra il tag di apertura (<fieldset>) e quello di chiusura (</fieldset>).
Esempio del tag HTML <fieldset>:
Tag HTML <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div>
<label for="date">Date of birth:</label>
<input type="date" id="date" />
</div>
<div>
<label for="birth-place">Place of birth:</label>
<input type="text" id="birth-place" />
</div>
</fieldset>
</form>
</body>
</html>Risultato
L'elemento <legend>
L'elemento <legend> fornisce al <fieldset> una didascalia. Due regole sono fondamentali:
- Deve essere il primo figlio del
<fieldset>. Se appare altrove, i browser lo ignorano come didascalia del gruppo. - È il nome accessibile del gruppo. Le tecnologie assistive annunciano il testo del legend insieme a ciascun controllo all'interno del gruppo. Quindi quando un utente di screen reader raggiunge un controllo, sente qualcosa come "Informazioni personali — Nome, campo di testo", che gli indica a quale sezione appartiene quel campo.
<fieldset>
<legend>Shipping address</legend>
<!-- the inputs for this section go here -->
</fieldset>Un <fieldset> senza <legend> disegna comunque un riquadro, ma il gruppo non ha nome, quindi il beneficio per l'accessibilità viene perso. Aggiungi sempre un legend quando il raggruppamento ha significato per l'utente.
L'elemento <fieldset> per organizzare i moduli
La maggior parte dei moduli online è difficile da usare e disorganizzata. Organizzarli in sezioni logiche migliora significativamente l'usabilità. Usare l'elemento <fieldset> insieme all'elemento <legend> crea confini chiari e rende i tuoi moduli più facili da navigare.
Accessibilità: raggruppare radio button e checkbox
Un singolo <input> di testo è etichettato dalla propria <label>. Ma un insieme di radio button o checkbox necessita di due livelli di etichettatura: uno per l'intera domanda e uno per ciascuna opzione. <fieldset> + <legend> è il modo standard e accessibile per farlo — il legend etichetta la domanda, e ciascuna <label> etichetta un'opzione.
<fieldset>
<legend>Choose a shipping method:</legend>
<div>
<input type="radio" id="standard" name="shipping" value="standard" />
<label for="standard">Standard (3–5 days)</label>
</div>
<div>
<input type="radio" id="express" name="shipping" value="express" />
<label for="express">Express (1–2 days)</label>
</div>
</fieldset>In questo caso uno screen reader annuncia "Scegli un metodo di spedizione, Standard, radio button" — l'utente sa sempre a quale domanda sta rispondendo. Senza il wrapper <fieldset>/<legend>, le opzioni vengono lette come un elenco scollegato. Usa questo schema per ogni gruppo di radio button e per qualsiasi insieme di checkbox correlate.
Rimuovere o ridefinire il riquadro
Il bordo predefinito è solo uno stile — non è obbligatorio. Una domanda molto comune è come rimuoverlo. Imposta border: none sul <fieldset>:
fieldset {
border: none;
padding: 0;
margin: 0;
}Puoi anche applicare al <legend> e al riquadro qualsiasi stile desideri (sfondo, bordo personalizzato, angoli arrotondati). Il raggruppamento e la sua semantica di accessibilità rimangono intatti indipendentemente da come lo stili, quindi puoi eliminare l'aspetto predefinito senza perdere il beneficio.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| disabled | disabled | Disabilita l'intero gruppo. Ogni controllo del modulo all'interno del <fieldset> diventa non interattivo e non viene inviato con il modulo. |
| form | form_id | Associa il fieldset a uno o più moduli tramite il loro id, così può trovarsi al di fuori del <form> a cui appartiene. Separa più id con spazi. |
| name | text | Il nome del gruppo. Non viene inviato con il modulo; è usato principalmente per fare riferimento al gruppo da JavaScript. |
L'attributo disabled è comodo quando un'intera sezione di un modulo deve essere disattivata contemporaneamente — ad esempio, nascondendo i campi di pagamento finché non si spunta una casella:
<fieldset disabled>
<legend>Payment details</legend>
<label for="card">Card number:</label>
<input type="text" id="card" />
</fieldset>L'attributo form consente a un <fieldset> di trovarsi al di fuori dell'elemento <form> pur appartenendovi:
<form id="signup"></form>
<fieldset form="signup">
<legend>Account</legend>
<label for="user">Username:</label>
<input type="text" id="user" />
</fieldset>Il tag <fieldset> supporta gli Attributi Globali e gli Attributi degli Eventi.