Tag HTML <label>

Definizione e uso

<label> L'etichetta definisce un'etichetta (segnavia) per l'elemento input.

L'elemento label non presenta alcun effetto speciale all'utente. Tuttavia, migliora l'accessibilità per gli utenti del mouse. Se si fa clic sul testo all'interno dell'elemento label, verrà attivato questo controllo. Questo significa che quando l'utente seleziona questa etichetta, il browser trascina automaticamente il focus sul controllo del modulo correlato.

<label> L'etichetta Attributo for Dovrebbe essere uguale all'attributo id dell'elemento correlato.

<label> L'etichetta può definire etichette (segnavia) per più elementi:

L'uso corretto degli elementi menzionati e delle etichette sarà utile per i seguenti utenti:

  • Utente del lettore di schermo (quando l'utente si concentra su un elemento, legge l'etichetta)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> 元素中的文本时，它会切换输入（这增加了点击区域）

Per gli utenti che trovano difficile cliccare su aree molto piccole (ad esempio caselle di controllo) - perché quando l'utente clicca

Vedere anche:Manuale di riferimento HTML DOM:

Oggetto Label

Esempio

Tre pulsanti di opzione con label:
  <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="Invia">

Prova tu stesso

</form>

Suggerimenti e commenti<label> Suggerimento: <label> L'elemento interno collegato al tag deve avere l'attributo for uguale all'attributo id dell'elemento correlato per essere collegati insieme. Può anche essere fatto posizionando l'elemento all'interno

Attributo

Attributo Valore Descrizione
for Id dell'elemento Definisce a quale elemento del modulo è associato il label.
form Id del modulo Definisce il campo label del modulo.

Attributi globali

<label> Il tag supporta anche Attributi globali HTML.

Attributi di evento

<label> Il tag supporta anche Attributi di evento HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per visualizzare <label> Elemento:

label {
  cursor: default;
}

Prova tu stesso

Supporto dei browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto