Tag HTML <etichetta>
Esempio
Tre pulsanti di opzione con etichette:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio"
id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Definizione e utilizzo
Il <label>tag definisce un'etichetta per diversi elementi:
- <tipo di input="casella di controllo">
- <tipo di input="colore">
- <tipo di input="data">
- <input type="datetime-local">
- <tipo di input="e-mail">
- <tipo di input="file">
- <tipo di input="mese">
- <tipo di input="numero">
- <tipo di input="password">
- <tipo di input="radio">
- <tipo di input="intervallo">
- <tipo di input="ricerca">
- <tipo di input="tel">
- <tipo di input="testo">
- <tipo di input="ora">
- <tipo di input="url">
- <tipo di input="settimana">
- <metro>
- <progresso>
- <seleziona>
- <area di testo>
L'uso corretto delle etichette con gli elementi di cui sopra ne trarrà vantaggio:
- Utenti di screen reader (leggeranno ad alta voce l'etichetta, quando l'utente è concentrato sull'elemento)
- Utenti che hanno difficoltà a fare clic su regioni molto piccole (come le caselle di controllo) - perché quando un utente fa clic sul testo all'interno
<label>dell'elemento, commuta l'input (questo aumenta l'area colpita).
Suggerimenti e note
Suggerimento: l'attributo for di <label>
deve essere uguale all'attributo id dell'elemento correlato per unirli insieme. Un'etichetta può anche essere associata a un elemento posizionando l'elemento all'interno <label>dell'elemento.
Supporto browser
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Attributi
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Attributi globali
Il <label>tag supporta anche gli attributi globali in HTML .
Attributi dell'evento
Il <label>tag supporta anche gli attributi dell'evento in HTML .
Pagine correlate
Riferimento DOM HTML: oggetto etichetta
Impostazioni CSS predefinite
La maggior parte dei browser visualizzerà l' <label>elemento con i seguenti valori predefiniti:
Esempio
label {
cursor: default;
}