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 modifica

 
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à modifica

  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>

Note modifica

  1. ^ Fabrizio Caccavello, Un modulo web per tutti inizia dalle etichette (label), su Webaccessibile.org, 3 dicembre 2017. URL consultato il 22 febbraio 2021.
  2. ^ Glossario informatico :: Definizione Label, su pc-facile.com. URL consultato il 22 febbraio 2021.
  3. ^ HTML label tag, su w3schools.com. URL consultato il 22 febbraio 2021.
  4. ^ ARIA: form role - Accessibility | MDN, su developer.mozilla.org. URL consultato il 16 febbraio 2021.
  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica