Tag HTML label: la soluzione ideale per l’accessibilità e una maggiore fruibilità
Con il tag label in HTML rendete il vostro sito web più fruibile e accessibile. label può essere utilizzato, 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 con consulente personale!
Web hosting veloce e scalabile + consulente personale con IONOS!
Per cosa viene utilizzato il tag label in HTML?
Il tag HTML label è particolarmente importante per la chiarezza e l’accessibilità dei siti web. Si usa nei moduli e aggiunge una didascalia o un’etichetta esplicativa a elementi come campi di input, pulsanti o caselle di spunta.
È particolarmente importante per due casi d’utilizzo. In primo luogo, facilita la navigazione per le/gli utenti che hanno problemi con le aree di piccole dimensioni: rende più semplice fare clic ingrandendo l’area da cliccare. Inoltre, questo tag HTML facilita anche le/gli utenti che utilizzano uno screen reader, rendendo possibile la lettura ad alta voce delle didascalie. Ciò migliora l’usabilità del vostro sito web per chi lo visita.
Come si usa il tag label in HTML?
Esistono due modi per utilizzare il tag label in HTML. Con l’attributo for potete collegare label direttamente al campo di input. In alternativa, potete includere il modulo accanto all’etichetta direttamente 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, è importante che l’attributo for utilizzato 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 didascalia è inclusa. Apparirà più o meno così:
<p>
<label>
<input type="checkbox" name="letto" value="sì" />
Ho letto le condizioni
</label>
</p>
Quali elementi sono contrassegnati dal tag label in HTML?
Per consentire alle/agli utenti con uno screen reader di accedere senza barriere al vostro sito web, ad esempio, i seguenti elementi dovrebbero essere contrassegnati 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 caricamenti: <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 didascalia. Ciò significa che anche in un documento, il primo elemento di input che corrisponde a questo valore viene automaticamente associato alla didascalia.
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>
Progettate il sito web dei vostri desideri! Con MyWebsite Now di IONOS potete creare il vostro sito web professionale autonomamente, senza particolari conoscenze di base. Piuttosto, potete avvalervi dell’esperienza delle nostre sviluppatrici e dei nostri sviluppatori. Non dovrete far altro che scegliere la soluzione adatta alle vostre esigenze.
Articoli simili
Tag div in HTML: tutto ciò che c’è da sapere sull’uso del container div
Poiché il tag div non ha caratteristiche semantiche proprie, il suo uso è stato raccomandato dall’introduzione di HTML5 solo se non sono disponibili elementi più adatti. In questo articolo imparerete tutto sul container div, apprenderete a utilizzarlo grazie a esempi pratici e scoprirete perché questo tag non ha quasi più alcun ruolo nell’HTML.
Tag HTML img: come inserire le immagini nel proprio sito web
Per includere immagini e grafici nel vostro sito web, utilizzate il tag HTML img. In questo modo potrete posizionare facilmente le immagini. Grazie ai diversi attributi, fate in modo che la grafica si adatti in modo ottimale alla vostra pagina web. Vi spieghiamo com’è strutturato il tag img e con quali attributi può essere utilizzato.
_target: definire gli obiettivi dei link in HTML
Se desiderate includere dei link sul vostro sito web, potete utilizzare l’attributo HTML target per determinare dove deve aprirsi il link. In questo modo, decidete se le/gli utenti rimangono sul vostro sito web o se invece passeranno a un altro sito. In questo articolo potete scoprire come usare l’attributo HTML _target e cosa dovete tenere a mente nel farlo.
Un esempio di intestazione per il vostro sito web
Il tag style HTML è il modo migliore per progettare l’aspetto dei singoli elementi di un sito web e quindi costruire in modo ottimale la pagina. In questo articolo scoprirete esattamente cos’è il tag style HTML, com’è strutturato e quali attributi HTML sono compatibili con esso, imparando come incorporare il tag nel vostro codice con molta facilità.
