Con il tag label in HTML rendete il vostro sito web più fruibile e ac­ces­si­bi­le. label può essere uti­liz­za­to, tra le altre cose, per campi di input, caselle di spunta e pulsanti e funziona con attributi globali ed event, nonché con for e form.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Per cosa viene uti­liz­za­to il tag label in HTML?

Il tag HTML label è par­ti­co­lar­men­te im­por­tan­te per la chiarezza e l’ac­ces­si­bi­li­tà dei siti web. Si usa nei moduli e aggiunge una di­da­sca­lia o un’etichetta espli­ca­ti­va a elementi come campi di input, pulsanti o caselle di spunta.

È par­ti­co­lar­men­te im­por­tan­te per due casi d’utilizzo. In primo luogo, facilita la na­vi­ga­zio­ne per le/gli utenti che hanno problemi con le aree di piccole di­men­sio­ni: rende più semplice fare clic in­gran­den­do l’area da cliccare. Inoltre, questo tag HTML facilita anche le/gli utenti che uti­liz­za­no uno screen reader, rendendo possibile la lettura ad alta voce delle di­da­sca­lie. Ciò migliora l’usabilità del vostro sito web per chi lo visita.

Come si usa il tag label in HTML?

Esistono due modi per uti­liz­za­re il tag label in HTML. Con l’attributo for potete collegare label di­ret­ta­men­te al campo di input. In al­ter­na­ti­va, potete includere il modulo accanto all’etichetta di­ret­ta­men­te all’interno del tag HTML label. Per aiutarvi, di seguito vi mostriamo entrambe le opzioni di label in HTML.

Per le caselle di spunta:

<p>
<input type="checkbox" name="letto" id="read" value="sì" />
<label for="read">Ho letto le condizioni</label>
</p>

Nel farlo, è im­por­tan­te che l’attributo for uti­liz­za­to nel tag HTML label abbia lo stesso valore dell’attributo id nel campo di input.

Per i pulsanti:

<input type="radio" id="radio" value="acconsento" />
<label for="read">Acconsento</label>

Con la seconda opzione, la di­da­sca­lia è inclusa. Apparirà più o meno così:

<p>
<label>
<input type="checkbox" name="letto" value="sì" />
Ho letto le condizioni
</label>
</p>

Quali elementi sono con­tras­se­gna­ti dal tag label in HTML?

Per con­sen­ti­re alle/agli utenti con uno screen reader di accedere senza barriere al vostro sito web, ad esempio, i seguenti elementi do­vreb­be­ro essere con­tras­se­gna­ti con un tag label in HTML:

  • Campi di input: <input type="text" />, <input type="password" />, <testarea>
  • Caselle di spunta: <input type="checkbox" />
  • Pulsanti: <input type="radio" />
  • Elenchi di selezione: <select>
  • Campi per i ca­ri­ca­men­ti: <input type="file" />

Quali attributi supporta il tag label?

Il tag HTML label supporta tutti gli attributi HTML globali e quelli event. A questo scopo, i seguenti attributi possono essere collegati al tag HTML:

for: l’attributo for determina l’ID dell’elemento di input a cui deve essere collegata la di­da­sca­lia. Ciò significa che anche in un documento, il primo elemento di input che cor­ri­spon­de a questo valore viene au­to­ma­ti­ca­men­te associato alla di­da­sca­lia.

form: l’attributo form definisce quale elemento del modulo deve essere assegnato al tag label in HTML. In pratica, il risultato apparirà ad esempio così:

<form id="partecipante">
<label class="h2" form="partecipante">Nome</label>
<label for="nome">Nome</label>
<input name="nome" id="nome" maxlength="25">
<label for="cognome">Cognome</label>
<input name="cognome" id="cognome" maxlength="30">
<button>Conferma le informazioni</button>
</form>
Consiglio

Pro­get­ta­te il sito web dei vostri desideri! Con MyWebsite Now di IONOS potete creare il vostro sito web pro­fes­sio­na­le au­to­no­ma­men­te, senza par­ti­co­la­ri co­no­scen­ze di base. Piuttosto, potete avvalervi dell’espe­rien­za delle nostre svi­lup­pa­tri­ci e dei nostri svi­lup­pa­to­ri. Non dovrete far altro che scegliere la soluzione adatta alle vostre esigenze.

Vai al menu prin­ci­pa­le