Campi input

Controlli per l'inserimento di dati in un form.

Icona, testo di aiuto e bottoni Area di testo Dimensioni Input password Ricerca con autocompletamento Esempio minimale Esempio complesso Documentazione su Bootstrap Italia

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

Campo di tipo testuale

Campo di tipo email

Campo di tipo numerico

Campo di tipo telefono

Campo di tipo ora

<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.

Etichetta di esempio Ulteriore testo informativo

Con icona, bottone e placeholder

<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.

Esempio di area di testo

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

Dimensioni

È possibile modificare la dimensione dell’elemento utilizzando le classi .form-control-lg e .form-control-sm, che modificano la grandezza del carattere e la spaziatura interna.

Grande

Normale

Piccolo

<div class="row ml-0 mr-0">
    <div class="form-group">
        <label class="active" for="input-text-lg">Grande</label>
        <input type="text" class="form-control form-control-lg" id="input-text-lg" placeholder="Inserisci il tuo nome">
      </div>
        <div class="form-group">
        <label class="active" for="input-text-normal">Normale</label>
        <input type="text" class="form-control" id="input-text-normal" placeholder="Inserisci il tuo nome">
      </div>
      <div class="form-group">
        <label class="active" for="input-text-sm">Piccolo</label>
        <input type="text" class="form-control form-control-sm" id="input-text-sm" placeholder="Inserisci il tuo nome">
    </div>
</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

Password con label, placeholder e testo di aiuto Inserisci almeno 8 caratteri e una lettera maiuscola

Password con strength meter

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>

Tema Unito v3

DOCUMENTAZIONE