Guida HTML interattiva: Label HTML

Q: Cos'è l'attributo for di un label?

for contiene l'id del campo a cui appartiene l'etichetta: Email . Deve corrispondere esattamente all'id, non al name.

Q: Come nascondo un label ma lo lascio agli screen reader?

Tieni il e nascondilo solo alla vista con una classe che lo riduce a 1 pixel e lo ritaglia, invece di display: none, che lo nasconde anche agli screen reader. Per un campo senza spazio per nessuna etichetta, l'alternativa è aria-label sul campo.

Cosa fa l'elemento label

<label> dà un nome a un campo di un modulo. Collegalo con for, impostato sull'id del campo, e succedono due cose: gli screen reader annunciano l'etichetta quando il campo riceve il focus, e cliccando il testo dell'etichetta il focus passa al campo. Clicca entrambi i testi qui sotto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Cliccando "City" il cursore va nel suo campo. Cliccando "Country" non succede niente, e uno screen reader che arriva su quel secondo campo sente solo "modifica testo", senza nome. I due sembrano identici; solo uno ha un'etichetta.

Due modi per collegare un'etichetta

Usa for e id, oppure metti il campo dentro l'etichetta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` e `id`	Campo racchiuso
Serve un `id`	Sì, unico nella pagina	No
Etichetta e campo possono stare separati	Sì (una cella di tabella, una griglia)	No, il campo è dentro
Facile da rompere	Con un refuso o un `id` duplicato	Mettendo due campi in un'etichetta

for deve corrispondere all'id del campo, non al suo name. Spesso sono la stessa parola, e questo nasconde l'errore finché qualcuno non ne cambia uno. Fare entrambe le cose (racchiudere il campo e usare for) va bene ed è comune.

Un'etichetta si può collegare a <input> (tranne type="hidden"), <select>, <textarea>, <button>, <meter>, <output> e <progress>. Un'etichetta dà il nome a un solo campo. Un campo può avere più di un'etichetta, ma un'unica etichetta chiara è più semplice per tutti.

Un'area cliccabile più grande per checkbox e radio

L'etichetta conta soprattutto per i controlli piccoli: cliccando in qualsiasi punto dell'etichetta la casella cambia stato, quindi l'area cliccabile è l'intera riga di testo, non un quadratino di 13 pixel. Dando uno stile all'etichetta l'area diventa ancora più grande:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Clicca nel padding di ogni riga, lontano dalla casella. La prima riga cambia stato; la seconda non fa niente a meno di colpire proprio la casella. Trovi di più sulle checkbox in checkbox HTML.

Suggerimenti e messaggi di errore

Un'etichetta deve essere breve: il nome del campo. Le istruzioni aggiuntive e i messaggi di errore vanno in elementi separati, collegati con aria-describedby, così gli screen reader leggono prima l'etichetta e poi la descrizione:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Premi Create con il campo vuoto, poi con AB, poi con ada99. Con aria-describedby, uno screen reader annuncia qualcosa come "Username, obbligatorio, modifica testo, 3 to 16 lowercase letters or digits, Enter a username." L'asterisco ha aria-hidden perché l'attributo required dice già "obbligatorio"; sentire "asterisco" non aggiunge nulla.

Etichette nascoste

Alcuni campi hanno un indizio visibile diverso da un'etichetta di testo, come una casella di ricerca accanto a un pulsante Search. L'etichetta serve comunque; nascondila alla vista ma lasciala nella pagina per gli screen reader:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Non nasconderla con display: none o visibility: hidden: così la nascondi anche agli screen reader, e non tutti i browser e gli screen reader usano ancora un'etichetta nascosta come nome. L'altra possibilità è aria-label="Search courses" sull'input, che gli dà un nome senza nessun elemento label. Un'etichetta visibile resta la scelta migliore ogni volta che c'è spazio: vedere a cosa serve un campo aiuta tutti.

Errori comuni

for che punta al name invece che all'id. Non si collega niente.
Id duplicati. for si collega al primo elemento con quell'id, che può essere un campo di un altro modulo nella pagina.
Placeholder al posto di un'etichetta. Sparisce quando scrivi e non è un nome affidabile.
Due campi dentro un'etichetta. Un'etichetta dà il nome a un solo campo; il secondo resta senza etichetta.
Un link dentro l'etichetta di una checkbox, come "Accetto le condizioni" con "condizioni" come link. Una parte della riga cambia lo stato della casella e un'altra apre una pagina, ed è facile sbagliare. Metti il link fuori dall'etichetta.
Nascondere l'etichetta con display: none. Usa una classe che la nasconde solo alla vista.
Testo accanto a un campo che non è un <label>. Ha lo stesso aspetto e non fa niente. Per il modulo che contiene i tuoi campi, vedi form HTML.

Domande frequenti

Cosa fa il tag label in HTML?

Dà un nome a un campo di un modulo. Gli screen reader leggono l'etichetta quando il campo riceve il focus, e cliccando l'etichetta il focus passa al campo, oppure lo seleziona e deseleziona se è una checkbox o un radio button.

Cos'è l'attributo for di un label?

for contiene l'id del campo a cui appartiene l'etichetta: <label for="email">Email</label> <input id="email">. Deve corrispondere esattamente all'id, non al name.

Metto l'input dentro il label o uso for?

Entrambi i modi funzionano nei browser e negli screen reader attuali. Racchiudere il campo non richiede id; for e id permettono a etichetta e campo di stare in punti diversi del markup, come celle di tabella separate. Molti team racchiudono il campo e aggiungono anche for.

Un placeholder può sostituire un label?

No. Il placeholder sparisce appena si inizia a scrivere, spesso ha poco contrasto e non sempre viene annunciato come nome del campo. Usa un <label> visibile e lascia il placeholder per un valore di esempio, se proprio serve.

Come nascondo un label ma lo lascio agli screen reader?

Tieni il <label> e nascondilo solo alla vista con una classe che lo riduce a 1 pixel e lo ritaglia, invece di display: none, che lo nasconde anche agli screen reader. Per un campo senza spazio per nessuna etichetta, l'alternativa è aria-label sul campo.

Concetti correlati