Il tag label

Il tag label definisce un'etichetta per un campo di input di tipo input, textarea, select e così via.

L'etichetta è associata a un campo di input specifico tramite l'attributo for. In esso si deve specificare il valore dell'attributo id del campo di input a cui è collegata l'etichetta. Inoltre l'etichetta viene associata all'elemento se quest'ultimo viene inserito all'interno del tag label. In questo caso non è necessario specificare l'attributo for. Consultate gli esempi per una migliore comprensione.

Cliccando sull'etichetta, le caselle di spunta o i pulsanti radio ad essa associati cambieranno il loro stato da selezionato a non selezionato e viceversa. L'etichetta in questo caso serve per comodità: è difficile cliccare con il cursore su elementi di piccole dimensioni, molto più facile farlo su un'etichetta lunga con del testo.

Il campo di input di testo associato all'etichetta di tipo input e textarea riceverà il focus. Il focus è quando il cursore lampeggia nel campo di input, in questo caso, se si digita qualcosa sulla tastiera - il testo verrà inserito in questo campo (vedi la pseudoclasse focus per una comprensione avanzata del focus).

L'etichetta label può essere utilizzata per simulare una casella di spunta o un pulsante radio. Questo è necessario per creare checkbox o radio con un design personalizzato (cosa vietata con il CSS puro, ma possibile tramite accorgimenti ingegnosi).

Attributi

Attributo	Descrizione
for	In questo attributo si deve specificare il valore di attributo id del campo di input a cui è collegata l'etichetta label.
accesskey	Definisce un tasto di scelta rapida per passare all'elemento del modulo associato all'etichetta (tramite l'attributo for). Per maggiori dettagli vedi l'attributo accesskey.

Esempio . Casella di spunta

Associamo un'etichetta a una checkbox tramite l'attributo for. Cliccate sull'etichetta e vedrete cambiare lo stato della casella di spunta da selezionato a non selezionato e viceversa:

:

Esempio . All'interno di label

Ora non associamo l'etichetta tramite l'attributo for, ma inseriamo l'elemento direttamente all'interno del tag label, in questo caso cliccando sul testo della label si attiverà comunque l'elemento:

:

Esempio . Campo di input di testo

Associamo un'etichetta a un tag input tramite l'attributo for. Cliccare sull'etichetta farà sì che il campo di input riceva il focus. Inoltre il testo contenuto nel campo (aggiunto tramite l'attributo value) verrà selezionato. Se si inizia a digitare qualcosa sulla tastiera - questo testo verrà sovrascritto. Per togliere la selezione senza eliminare il testo, è possibile cliccare con il mouse sul campo di input: il focus non scomparirà, ma la selezione sparirà:

:

Vedi anche