Etichetta (informatica)

In informatica un'etichetta o label (in inglese) è un controllo grafico (widget) che mostra informazioni testuali all'interno di un form. È solitamente un controllo statico, che non prevede alcun tipo di interazione con l'utente, ed è usato per identificare (etichettare) un altro controllo grafico o gruppi di controlli grafici^[1].

esempio di una semplice etichetta all'interno di un form.

Un'etichetta può mostrare le informazioni su singola linea o su linee di testo multiple; le informazioni mostrate, possono essere modificate solo dall'applicazione stessa.

In alcune implementazioni le etichette "rispondono" ad eventi, come ad esempio il click del mouse, permettendo all'utente di effettuare la copia del contenuto testuale e trasformandosi quindi in text box^[2].

Esempio nel web

Esempio di label in un form

Lo stesso argomento in dettaglio: Form, HTML5 e Widget (informatica).

<form action="/action_page.php">
  <label for="male">Maschio</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Femmina</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Altro</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Il tag <label> definisce un'etichetta per diversi elementi di un form (modulo di iscrizione)^[3]:

• <input type = "checkbox">
• <input type = "color">
• <input type = "date">
• <input type = "datetime-local">
• <input type = "email">
• <input type = "file">
• <input type = "month">
• <input type = "number">
• <input type = "password">
• <input type = "radio">
• <input type = "range">
• <input type = "search">
• <input type = "tel">
• <input type = "text">
• <input type = "time">
• <input type = "url">
• <input type = "week">
• <metro>
• <progress>
• <select>
• <textarea>

Accessibilità

Lo stesso argomento in dettaglio: Accessibilità (web), Accessibilità (design) e WAI-ARIA.

Esempio di codice con tag appositi WAI-ARIA per l'accessibilità^[4]:

<form id="send-comment" aria-label="Add a comment">
<label for="username">Username</label>
 <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text">
 </form>