Skip to main content

Bootstrap Italia

Il tema Bootstrap 4 per lo sviluppo di applicazioni web per la PA

Input

Input

Elementi e stili per la creazione di input accessibili e responsivi.

Esempi di campi di input

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.

Per l’inserimento guidato di campi di tipo numerico si può anche utilizzare l’elemento dedicato che fornisce migliorie per la validazione e per l’esperienza complessiva, descritto alla pagina dedicata all’input numerico.

<div>
  <div class="form-group">
    <label for="exampleInputText">Campo di tipo testuale</label>
    <input type="text" class="form-control" id="exampleInputText">
  </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" 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">
  </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>

Utilizzo di placeholder e label

Si può includere un’etichetta che si riposiziona automaticamente quando l’utente utilizza il campo di testo.

<div class="form-group">
  <label for="formGroupExampleInput">Etichetta di esempio</label>
  <input type="text" class="form-control" id="formGroupExampleInput">
</div>

Si può abbinare all’etichetta un placeholder (testo di esempio) per ulteriore chiarezza.

<div class="form-group">
  <label for="formGroupExampleInput2">Etichetta di esempio</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Testo di esempio">
</div>

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. Può essere esteso usando le classi di utilità come .text-muted.

Associazione del testo di aiuto con gli elementi del modulo form

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.

Ulteriore testo informativo 
<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 text-muted">Ulteriore testo informativo</small>
</div>

Input con icona o bottoni

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text"><svg class="icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pencil"></use></svg></div>
    </div>
    <label for="input-group-1">Con Etichetta</label>
    <input type="text" class="form-control" id="input-group-1" name="input-group-1">
    <div class="input-group-append">
      <button class="btn" type="button" id="button-1">Invio</button>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text"><svg class="icon icon-sm icon-danger"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pencil"></use></svg></div>
    </div>
    <label for="input-group-2">Con Etichetta e placeholder</label>
    <input type="text" class="form-control" id="input-group-2" name="input-group-2" placeholder="Lorem Ipsum">
    <div class="input-group-append">
      <button class="btn" type="button" id="button-2">Invio</button>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text"><svg class="icon icon-sm icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pencil"></use></svg></div>
      </div>
      <label for="input-group-3">Con Etichetta e bottone "primary"</label>
      <input type="text" class="form-control" id="input-group-3" name="input-group-3">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" id="button-3">Invio</button>
      </div>
    </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 (grazie alla componente strength meter) per segnalare quanto la password che si sta inserendo sia sicura con l’aggiunta della classe .form-password.

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

Attributo data Descrizione Default
data-short-pass Testo per il punteggio di forza della password minimo Password molto debole
data-bad-pass Testo per punteggio di forza della password basso Password debole
data-good-pass Testo per punteggio di forza della password buono Password sicura
data-strong-pass Testo per il punteggio di forza della password massimo Password molto sicura
data-enter-pass Testo di aiuto Inserisci almeno 8 caratteri e una lettera maiuscola
data-minimum-length Lunghezza minima per il calcolo della forza della password (soglia password molto debole) 4
Inserisci almeno 8 caratteri e una lettera maiuscola 
<div>
  <div class="form-group">
    <label for="exampleInputPassword">Password con label, placeholder e testo di aiuto</label>
    <input type="password" 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="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-visible"></use></svg>
      <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-invisible"></use></svg>
    </span>
    <small id="infoPassword" class="form-text text-muted">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" class="form-control input-password input-password-strength-meter" data-enter-pass="Puoi usare un testo di aiuto personalizzato" id="exampleInputPassword3">
    <span class="password-icon" aria-hidden="true">
      <svg class="password-icon-visible icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-visible"></use></svg>
      <svg class="password-icon-invisible icon icon-sm d-none"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-invisible"></use></svg>
    </span>
  </div>
</div>

Disabilitato

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

<div class="form-group">
  <label for="input-text-disabled">Contenuto disabilitato</label>
  <input class="form-control" type="text" id="input-text-disabled" disabled>
</div>

Readonly

Aggiungi l’attributo readonly ad un input per impedire la modifica del valore contenuto.

<div class="form-group">
  <label for="input-text-read-only">Contenuto in sola lettura</label>
  <input class="form-control" type="text" id="input-text-read-only" readonly>
</div>

Readonly normalizzato

Se per qualche motivo vuoi avere gli elementi <input readonly> nella forma stilizzata come testo normale usa la classe .form-control-plaintext anziché .form-control.

<div>
  <div class="form-group">
    <label for="input-text-read-only-2">Contenuto in sola lettura</label>
    <input class="form-control-plaintext" value="Sola lettura" type="text" id="input-text-read-only-2" readonly>
  </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-autocomplete con 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".

Accessibilità

La descrizione accessibile del campo è ottenuta con una label nascosta visivamente dalla classe .sr-only.

L’elenco dei risultati generati dalla ricerca è una lista <ul> con classe .autocomplete-list, mentre i singoli risultati sono contenuti negli elementi <li> della lista e si compongono di:

  • Avatar o Icona: nel caso in cui non sia presente un’icona adeguata, utilizzare come icona di default #it-file per indicare una pagina generica.
  • Testo: elemento <span> contenuto in .autocomplete-list-text
  • Label: elemento <em> contenuto nel testo

Il testo corrispondente alla ricerca (“ite”, nell’esempio) deve essere racchiuso in un tag <mark>.

<div class="form-group">
  <label for="autocomplete-one" class="sr-only">Cerca nel sito</label>
  <input type="search" class="autocomplete" placeholder="Testo da cercare"
    id="autocomplete-one"
    name="autocomplete-one"
    data-autocomplete="[]">
  <span class="autocomplete-icon" aria-hidden="true">
    <svg class="icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-search"></use></svg>
  </span>
  <ul class="autocomplete-list" id="testAutocomplete1">
    <li>
      <a href="#">
        <div class="avatar size-sm">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Luisa Neri">
        </div>
        <span class="autocomplete-list-text">
          <span>List <mark>Ite</mark>m</span><em>Label</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="avatar size-sm">
          <img src="https://randomuser.me/api/portraits/men/46.jpg"
               alt="Mario Rossi">
        </div>
        <span class="autocomplete-list-text">
          <span>List <mark>Ite</mark>m</span><em>Label</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm">
          <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-file"></use>
        </svg>
        <span class="autocomplete-list-text">
          <span>List <mark>Ite</mark>m</span><em>Label</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm">
          <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-file"></use>
        </svg>
        <span class="autocomplete-list-text">
          <span>List <mark>Ite</mark>m</span><em>Label</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm">
          <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-file"></use>
        </svg>
        <span class="autocomplete-list-text">
          <span>List <mark>Ite</mark>m</span><em>Label</em>
        </span>
      </a>
    </li>
  </ul>
</div>

Ricerca con autocompletamento grande

Per ottenere una versione grande dell’Autocomplete, indicata ad esempio per intestazioni di pagina ed overaly dedicati, aggiungere la classe .autocomplete-wrapper-big al contenitore .form-group.

<div class="form-group autocomplete-wrapper-big">
  <label for="autocomplete-two" class="sr-only">Cerca nel sito</label>
  <input type="search" class="autocomplete" placeholder="Testo da cercare"
    id="autocomplete-two"
    name="autocomplete-two"
    data-autocomplete="[]">
  <span class="autocomplete-icon" aria-hidden="true">
    <svg class="icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-search"></use></svg>
  </span>
  <ul class="autocomplete-list" id="testAutocomplete2">
    <li>
      <a href="#">
        <div class="avatar size-sm">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Paola Pistoia">
        </div>
        <span class="autocomplete-list-text">
          <span>Paola <mark>Pi</mark>stoia</span><em>Profilo</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="avatar size-sm">
          <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Pierluigi Rossi">
        </div>
        <span class="autocomplete-list-text">
          <span><mark>Pi</mark>erluigi Rossi</span><em>Profilo</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pa"></use></svg>
        <span class="autocomplete-list-text">
          <span>Comune di <mark>Pi</mark>sa</span><em>Amministrazione</em>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-file"></use></svg>
        <span class="autocomplete-list-text">
          <span>Linee guida per i cataloghi pubblica amministrazione</span><em>Documento</em>
        </span>
      </a>
    </li>
  </ul>
</div>

Ricerca con autocompletamento e dati

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

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

Questi sono i minimi dati necessari per il corretto funzionamento dell’autocomplete.

Cerca una regione italiana per verificarne il comportamento.

<div class="form-group">
  <label for="autocomplete-regioni" class="sr-only">Cerca nel sito</label>
  <input type="search" class="autocomplete" placeholder="Testo da cercare"
    id="autocomplete-regioni"
    name="autocomplete-regioni"
    data-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="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-search"></use></svg>
  </span>
</div>

Questo Autocomplete è collegato, sempre tramite l’attributo data-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” per verificarne il comportamento.

<div class="form-group">
  <label for="autocomplete-test" class="sr-only">Cerca nel sito</label>
  <input type="search" class="autocomplete" placeholder="Testo da cercare"
    id="autocomplete-test"
    name="autocomplete-test"
    data-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="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-search"></use></svg>
  </span>
</div>

Area di testo

Per permettere agli utenti di inserire del testo (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>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Esempio di area di testo</label>
    <textarea id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</div>