Unito.it

Tema Unito v 3 / 3.1

Campi input

Controlli per l'inserimento di dati in un form.

Per il corretto funzionamento degli elementi di tipo <input>, è di fondamentale importanza l’utilizzo uno degli appositi attributi type (ad esempio, email per l’inserimento di indirizzi email o number per informazioni numeriche), in modo da sfruttare i controlli di input più recenti come la verifica dell’email, l’utilizzo di metodo di input numerico e altro. Si può abbinare all’etichetta un placeholder (testo di esempio) per ulteriore chiarezza

<div class="row ml-0 mr-0">
  <div class="form-group">
    <label for="exampleInputText">Campo di tipo testuale</label>
    <input type="text" class="form-control" id="exampleInputText" placeholder="Testo di esempio">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Campo di tipo email</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
  </div>
  <div class="form-group">
    <label for="exampleInputNumber">Campo di tipo numerico</label>
    <input type="number" data-bs-input class="form-control" id="exampleInputNumber">
  </div>
  <div class="form-group">
    <label for="exampleInputTelephone">Campo di tipo telefono</label>
    <input type="tel" class="form-control" id="exampleInputTelephone" placeholder="Inserisci il tuo numero di telefono">
  </div>
  <div class="form-group">
    <label class="active" for="exampleInputTime">Campo di tipo ora</label>
    <input type="time" class="form-control" id="exampleInputTime" min="9:00" max="18:00">
  </div>
</div>

Icona, testo di aiuto e bottoni

In caso di necessità, è anche possibile utilizzare un ulteriore contenuto testuale sotto il campo di testo, aggiungendo un elemento <small> con classe .form-text all’interno di .form-group.

Il testo di aiuto deve essere esplicitamente associato agli elementi del mudulo form a cui si riferisce utilizzando l’attributo aria-describedby. Ciò garantirà che le tecnologie assistive, come gli screenreader, leggano questo testo di aiuto quando l’utente avrà il focus sull’elemento.

E' possibile introdurre icone utilizzanto il tag svg e bottoni con il tag button

Aggiungi l’attributo disabled ad un input per impedire la modifica del valore contenuto e non inviare i dati in esso contenuti.


Ulteriore testo informativo
my-title
<div class="row ml-0 mr-0">
    <div class="form-group">
        <label for="formGroupExampleInputWithHelp">Etichetta di esempio</label>
        <input type="text" class="form-control" id="formGroupExampleInputWithHelp" 
        placeholder="Testo di esempio" aria-describedby="formGroupExampleInputWithHelpDescription">
        <small id="formGroupExampleInputWithHelpDescription" class="form-text">Ulteriore testo informativo</small>
    </div>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text"><svg role="img" aria-describedby="my-title" class="icon icon-sm icon-primary"><title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-pencil"></use></svg></div>
                </div>
                <label for="input-group-3" style="width: auto;">Con icona, bottone e placeholder</label>
                <input type="text" class="form-control" id="input-group-3" name="input-group-3" placeholder="Lorem Ipsum">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button" id="button-3">Invio</button>
                </div>
        </div>
    </div>
</div>

Area di testo

Per permettere agli utenti di inserire un testo esteso (ad esempio per lasciare commenti o informazioni), è bene utilizzare un elemento di tipo <textarea> ridimensionabile.

Includendo l’elemento all’interno di un .form-group, la label assumerà lo stesso comportamento dinamico dei campi di input.

 <div class="form-group">
    <label for="exampleFormControlTextarea1">Esempio di area di testo</label>
    <textarea id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

Input password

Per rendere più semplice l’inserimento della password, l’elemento è stato dotato di un visualizzatore dei caratteri digitati. Inoltre è possibile abbinare un controllo per segnalare quanto la password che si sta inserendo sia sicura con l’aggiunta dell’HTML necessario.

È possibile personalizzare la componente strength meter usando gli attributi data.

Attributo data Descrizione Default
data-bs-minimum-length Lunghezza minima per il calcolo della forza della password (soglia password molto debole) 4

E’ possibile personalizzare i testi dei messaggi riguardanti la robustezza della password usando gli attributi data dell’elemento small.form-text.

Attributo data Descrizione Default
data-bs-short-pass Testo per il punteggio di forza della password minimo Password molto debole
data-bs-bad-pass Testo per punteggio di forza della password basso Password debole
data-bs-good-pass Testo per punteggio di forza della password buono Password sicura
data-bs-strong-pass Testo per il punteggio di forza della password massimo Password molto sicura
Inserisci almeno 8 caratteri e una lettera maiuscola
Inserisci almeno 8 caratteri e una lettera maiuscola
CAPS LOCK inserito 
<div class="row ml-0 mr-0 p-5">
  <div class="form-group">
    <label for="exampleInputPassword">Password con label, placeholder e testo di aiuto</label>
    <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword" aria-labelledby="infoPassword">
    <span class="password-icon" aria-hidden="true">
      <svg class="password-icon-visible icon icon-sm"><use href="./dist/svg/sprite.svg#it-password-visible"></use></svg>
      <svg class="password-icon-invisible icon icon-sm d-none"><use href="./dist/svg/sprite.svg#it-password-invisible"></use></svg>
    </span>
    <small id="infoPassword" class="form-text">Inserisci almeno 8 caratteri e una lettera maiuscola</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword3">Password con strength meter</label>
    <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword3">
    <div class="password-strength-meter">
      <small class="form-text text-muted"
        data-bs-short-pass="Password molto debole"
        data-bs-bad-pas="Password debole"
        data-bs-good-pass="Password sicura"
        data-bs-strong-pass="Password molto sicura"
      >Inserisci almeno 8 caratteri e una lettera maiuscola</small>
      <div class="password-meter progress rounded-0 position-absolute">
        <div class="row position-absolute w-100 m-0">
          <div class="col-3 border-start border-end border-white"></div>
          <div class="col-3 border-start border-end border-white"></div>
          <div class="col-3 border-start border-end border-white"></div>
          <div class="col-3 border-start border-end border-white"></div>
        </div>
        <div class="progress-bar bg-muted" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
    <span class="password-icon" aria-hidden="true">
      <svg class="password-icon-visible icon icon-sm"><use href="./dist/svg/sprite.svg#it-password-visible"></use></svg>
      <svg class="password-icon-invisible icon icon-sm d-none"><use href="./dist/svg/sprite.svg#it-password-invisible"></use></svg>
    </span>
    <small class="password-caps form-text text-warning position-absolute bg-white w-100">CAPS LOCK inserito</small>
  </div>
</div>

Ricerca con autocompletamento

Per ottenere un input con un risultato ricerca o un autocomplete statico è necessario aggiungere all’input la classe .autocomplete e l’attributo data-bs-autocomplete contenente un JSON da filtrare.

L’icona della lente è contenuta in uno <span> con classe .autocomplete-icon, nascosta agli screen reader dall’attributo aria-hidden="true".
La descrizione accessibile del campo è ottenuta con una label nascosta visivamente dalla classe .visually-hidden.

Esempio minimale

L'esempio è collegato, tramite l’attributo data-bs-autocomplete, ad una lista di oggetti nella quale sono presenti i dati minimi per istanziare un autocomplete.

  • nel campo text i nomi di tutte le regioni italiane
  • nel campo link un link associato a ciascuna di esse

Cerca una regione italiana per verificarne il comportamento.

<div class="row ml-0 mr-0 p-4">
    <div class="form-group">
      <label for="autocomplete-regioni" class="visually-hidden">Cerca nel sito</label>
      <input type="search" class="autocomplete" placeholder="Testo da cercare"
        id="autocomplete-regioni"
        name="autocomplete-regioni"
        data-bs-autocomplete='[{"text":"Abruzzo","link":"#"},{"text":"Basilicata","link":"#"},{"text":"Calabria","link":"#"},{"text":"Campania","link":"#"},{"text":"Emilia Romagna","link":"#"},{"text":"Friuli Venezia Giulia","link":"#"},{"text":"Lazio","link":"#"},{"text":"Liguria","link":"#"},{"text":"Lombardia","link":"#"},{"text":"Marche","link":"#"},{"text":"Molise","link":"#"},{"text":"Piemonte","link":"#"},{"text":"Puglia","link":"#"},{"text":"Sardegna","link":"#"},{"text":"Sicilia","link":"#"},{"text":"Toscana","link":"#"},{"text":"Trentino Alto Adige","link":"#"},{"text":"Umbria","link":"#"},{"text":"Valle d’Aosta","link":"#"},{"text":"Veneto","link":"#"}]'>
      <span class="autocomplete-icon" aria-hidden="true">
        <svg class="icon icon-sm"><use href="./dist/svg/sprite.svg#it-search"></use></svg>
      </span>
    </div>
</div>

Esempio complesso

Questo Autocomplete è collegato, sempre tramite l’attributo data-bs-autocomplete, ad una lista di oggetti nella quale sono presenti:

  • nel campo text i nomi di alcune nazioni
  • nel campo link un link associato a ciascuna di esse
  • nel campo icon l’icona identificativa del risultato trovato
  • nel campo label la label aggiuntiva

Cerca ad esempio “Italia” o “Francia” per verificarne il comportamento.

<div class="row ml-0 mr-0 p-4">
    <div class="form-group">
      <label for="autocomplete-test" class="visually-hidden">Cerca nel sito</label>
      <input type="search" class="autocomplete" placeholder="Testo da cercare"
        id="autocomplete-test"
        name="autocomplete-test"
        data-bs-autocomplete='[{"icon":"<div class=\"avatar size-sm\"><img src=\"https://raw.githubusercontent.com/lipis/flag-icons/main/flags/4x3/it.svg\" alt=\"Italia\"></div>","text":"Italia","label":"Label 1","link":"#"},{"icon":"<div class=\"avatar size-sm\"><img src=\"https://raw.githubusercontent.com/lipis/flag-icons/main/flags/4x3/fr.svg\" alt=\"Francia\"></div>","text":"Francia","label":"Label 2","link":"#"}]'>
      <span class="autocomplete-icon" aria-hidden="true">
        <svg class="icon icon-sm"><use href="./dist/svg/sprite.svg#it-search"></use></svg>
      </span>
    </div>
</div>
Torna su