Input

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

Utilizzo e varianti

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 nativi dei browser più recenti come la verifica dell’email, l’utilizzo di metodo di input numerico ed 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.

Campo di testo

Campo email

Campo numerico

Campo telefonico

Campo orario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
  <div class="form-group">
    <label for="exampleInputText">Campo di testo</label>
    <input type="text" class="form-control" id="exampleInputText">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Campo email</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
  </div>
  <div class="form-group">
    <label for="exampleInputNumber">Campo numerico</label>
    <input type="number" data-bs-input class="form-control" id="exampleInputNumber">
  </div>
  <div class="form-group">
    <label for="exampleInputTelephone">Campo telefonico</label>
    <input type="tel" class="form-control" id="exampleInputTelephone">
  </div>
  <div class="form-group">
    <label class="active" for="exampleInputTime">Campo orario</label>
    <input type="time" class="form-control" id="exampleInputTime" min="9:00" max="18:00">
  </div>
</div>

Placeholder e testo di supporto

È possibile abbinare al campo <input> un testo segnaposto (placeholder) per fornire indicazioni sul tipo di contenuto atteso. Questo testo non sostituisce l’etichetta, ma fornisce informazioni aggiuntive.

Etichetta

1
2
3
4
<div class="form-group">
  <label class="active" for="exampleFormGroup">Etichetta</label>
  <input type="text" class="form-control" id="exampleFormGroup" placeholder="Testo segnaposto">
</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.

Etichetta Testo di supporto

1
2
3
4
5
6
7
8
9
10
11
<div class="form-group">
  <label class="active" for="exampleFormHelp">Etichetta</label>
  <input
    type="text"
    class="form-control"
    id="exampleFormHelp"
    placeholder="Testo segnaposto"
    aria-describedby="formGroupExampleInputWithHelpDescription"
  >
  <small class="form-text">Testo di supporto</small>
</div>

Accessibilità: associazione del testo di aiuto con con i campi

Il testo di aiuto deve essere esplicitamente associato ai campi a cui si riferisce utilizzando l’attributo aria-describedby. Ciò garantirà che le tecnologie assistive, come i lettori di schermo, leggano questo testo di aiuto quando l’utente avrà il focus sull’elemento.

Icone o pulsanti

Breaking feature dalla versione 3.0.0

L’elemento label è sempre posizionato sopra l’elemento input per garantire la corretta accessibilità.
Nel caso di input con icona o pulsanti, l’elemento label è stato spostato fuori dal contenitore .input-group.
…

Campo con icona

Campo con icona e segnaposto

Campo con icona e pulsante

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="form-group">
  <label for="input-group-1">Campo con icona</label>
  <div class="input-group">
    <span class="input-group-text"><svg class="icon icon-sm icon-secondary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg></span>
    <input type="text" class="form-control" id="input-group-1" name="input-group-1">
  </div>
</div>
<div class="form-group">
  <label class="active" for="input-group-2">Campo con icona e segnaposto</label>
  <div class="input-group">
    <span class="input-group-text"><svg class="icon icon-sm icon-secondary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg></span>
    <input type="text" class="form-control" id="input-group-2" name="input-group-2" placeholder="Lorem Ipsum">
  </div>
</div>
<div class="form-group">
  <label for="input-group-3">Campo con icona e pulsante</label>
  <div class="input-group">
      <span class="input-group-text"><svg class="icon icon-sm icon-secondary" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg></span>
      <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>

Accessibilità delle icone

Nel caso in cui l’icona è semanticamente rilevante e non spiegata dal testo che la segue, occorre:

rimuovere aria-hidden="true"
aggiungere role="img" sul tag <svg>
inserire all’interno il tag <title> con un titolo per l’icona che ne spieghi il significato (nel formato <title>significato icona</title>")

Disabilitato

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

1
2
3
<div class="form-group">
  <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.

Etichetta

1
2
3
4
<div class="form-group">
  <label class="active" for="input-text-read-only">Etichetta</label>
  <input class="form-control" type="text" id="input-text-read-only" value="Campo in sola lettura" 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.

Etichetta

1
2
3
4
5
6
<div>
  <div class="form-group">
    <label class="active" for="input-text-read-only-2">Etichetta</label>
    <input class="form-control-plaintext" value="Contenuto in sola lettura" type="text" id="input-text-read-only-2" readonly>
  </div>
</div>

Attivazione tramite codice

È possibile abilitare l’input con la label associata manualmente utilizzando questo script:

import { Input } from 'bootstrap-italia';

const inputElement = document.querySelector('#my-input');
const input = new Input(inputElement);

Metodi

Metodo	Descrizione
getInstance	Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: Input.getInstance(domElement).
getOrCreateInstance	Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: Input.getOrCreateInstance(element).
dispose	Rimuove la funzionalità Input.

Password

Per semplificare l’inserimento della password, il campo Input di tipo password include un pulsante che mostra i caratteri digitati. È inoltre possibile aggiungere un testo di supporto che aiuti nella compilazione.

Password

Inserisci almeno 8 caratteri e alcuni caratteri speciali.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="form-group">
  <label for="exampleInputPassword">Password</label>
  <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword">
  <button type="button" class="password-icon btn" role="switch" aria-checked="false">
    <span class="visually-hidden">Mostra/Nascondi Password</span>
    <svg class="password-icon-visible icon icon-sm" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-visible"></use></svg>
    <svg class="password-icon-invisible icon icon-sm d-none" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-invisible"></use></svg>
  </button>
</div>

<div class="form-group">
  <label for="exampleInputPassword2">Password</label>
  <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword2" aria-describedby="infoPassword2">
  <button type="button" class="password-icon btn" role="switch" aria-checked="false">
    <span class="visually-hidden">Mostra/Nascondi Password</span>
    <svg class="password-icon-visible icon icon-sm" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-visible"></use></svg>
    <svg class="password-icon-invisible icon icon-sm d-none" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-invisible"></use></svg>
  </button>
  <p id="infoPassword2" class="form-text text-muted d-block small pb-0">Inserisci almeno 8 caratteri e alcuni caratteri speciali.</p>
</div>

Misuratore sicurezza e suggerimenti

Nel caso di un campo per la scelta di una nuova password, è possibile abbinare controlli per segnalare quanto la password che si sta inserendo segua alcuni suggerimenti di sicurezza, come la lunghezza minima o l’uso di caratteri speciali. Inoltre, è possibile restituire all’utente una lista dei suggerimenti, con indicati quelli che sono soddistatti.

Importante sulla sicurezza per l’uso in produzione

Le due varianti del componente che seguono, con funzionalità avanzate di suggerimento e guida dell’utente nella scelta della password, sono da considerarsi esempi da usare per studio e ricerca. Vi consigliamo di coinvolgere un esperto di sicurezza prima di implementarle in ambienti di produzione e, in ogni caso, di valutate se riscrivere le funzioni di calcolo del punteggio, disponibili nel plugin input-password.js, adattandole al contesto o a cambiamenti negli standard internazionali riconosciuti. Ad esempio potreste voler cambiare i calcoli per la forza e aggiustare i relativi suggerimenti, oppure integrare con controlli per password più comuni od oggetto di leak conosciuti.

Accessibilità dei testi di aiuto

Nel caso del campo di tipo password, è molto importante configurare correttamente l’attributo aria-describedby dell’elemento input.input-password, indicando non solo l’id del testo di aiuto alla compilazione se presente, ma tutti gli id di eventuali altri elementi con testi utili, come ad esempio i testi di suggerimento o di valutazione della forza della password presenti nelle varianti che seguono.

Accessibilità degli annunci di sicurezza

È da notare che l’elemento p.strength-meter-info ha l’attributo aria-live="polite" per permettere di percepire gli annunci di cambio stato della valutazione sicurezza alle tecnologie assistive, come i lettori di schermo.

Password

Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.

Password

Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="form-group">
  <label for="exampleInputPassword3">Password</label>
  <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword3" aria-describedby="strengthMeterInfo3 infoPassword3">
  <button type="button" class="password-icon btn" role="switch" aria-checked="false">
    <span class="visually-hidden">Mostra/Nascondi Password</span>
    <svg class="password-icon-visible icon icon-sm" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-visible"></use></svg>
    <svg class="password-icon-invisible icon icon-sm d-none" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-invisible"></use></svg>
  </button>
  <p id="infoPassword3" class="form-text text-muted d-block small pb-0">Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.</p>
  <div class="password-strength-meter">
    <p id="strengthMeterInfo3" class="strength-meter-info small form-text text-muted pt-0" aria-live="polite"
      data-bs-short-pass="Password troppo breve."
      data-bs-bad-pas="Password debole."
      data-bs-good-pass="Password abbastanza sicura."
      data-bs-strong-pass="Password sicura."
    ></p>      
    <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>
</div>


<div class="form-group">
  <label for="exampleInputPassword4">Password</label>
  <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword4" aria-describedby="strengthMeterSuggestions4 strengthMeterInfo4 infoPassword4">
  <button type="button" class="password-icon btn" role="switch" aria-checked="false">
    <span class="visually-hidden">Mostra/Nascondi Password</span>
    <svg class="password-icon-visible icon icon-sm" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-visible"></use></svg>
    <svg class="password-icon-invisible icon icon-sm d-none" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-password-invisible"></use></svg>
  </button>
  <p id="infoPassword4" class="form-text text-muted d-block small pb-0">Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.</p>
  <div class="password-strength-meter">
    <div id="strengthMeterSuggestions4" class="strenght-meter-suggestions small form-text text-muted"></div>
    <p id="strengthMeterInfo4" class="strength-meter-info small form-text text-muted pt-0" aria-live="polite"
      data-bs-short-pass="Password troppo breve."
      data-bs-bad-pas="Password debole."
      data-bs-good-pass="Password abbastanza sicura."
      data-bs-strong-pass="Password sicura."
    ></p>      
    <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>
</div>

Attivazione tramite codice

Per abilitare l’input password manualmente utilizzare il seguente codice:

import { InputPassword } from 'bootstrap-italia';

const inputPswElement = document.querySelector('#my-input-psw');
const inputPsw = new InputPassword(inputPswElement, options);

Opzioni

Nome	Tipo	Predefinito	Descrizione
minimumLength	number	8	Lunghezza minima per il calcolo della forza della password (soglia password troppo breve)
shortPass	string	Password troppo breve.	Testo per il punteggio di forza della password troppo breve
badPass	string	Password debole.	Testo per punteggio di forza della password basso
goodPass	string	Password abbastanza sicura.	Testo per punteggio di forza della password buono
strongPass	string	Password sicura.	Testo per il punteggio di forza della password massimo
suggestionsLabel	string	Suggerimenti per una buona password:	Testo nascosto visivamente che precede l'elenco di suggerimenti
suggestionFollowed	string	suggerimenti seguito	Testo singolare per la parte finale di "1 di 5 suggerimenti seguito"
suggestionFollowedPlural	string	suggerimenti seguiti	Testo plurale per la parte finale di "2 di 5 suggerimenti seguiti"
suggestionOf	string	di	Preposizione centrale per "2 di 5"
suggestionMetLabel	string	Soddisfatto:	Aria-label per l'icona di suggerimento soddisfatto
suggestionMetIconPath	string	M9.6 16.9 4 11.4l.8-.7 4.8 4.8 8.5-8.4.7.7-9.2 9.1z	Path per la forma dell'icona di suggerimento soddisfatto
suggestionLength	string	Almeno {minLength} caratteri.	Lunghezza minima della password
suggestionUppercase	string	Una o più maiuscole.	Uso di lettere maiuscole
suggestionLowerCase	string	Una o più minuscole.	Uso di lettere minuscole
suggestionNumber	string	Una o più mumero.	Uso di numeri
suggestionSpecial	string	Uno o più caratteri speciali.	Uso di caratteri speciali

Metodi

Metodo	Descrizione
getInstance	Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: InputPassword.getInstance(domElement).
getOrCreateInstance	Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: InputPassword.getOrCreateInstance(element).
dispose	Rimuove la funzionalità InputPassword.

Dimensioni

La input di base ha una dimensione media che non necessita alcuna classe aggiuntiva.

Per modificare questa dimensione, è possiible utilizzare le classi .form-control-lg o .form-control-sm applicandole sull’elemento <input>.

Per modificare invece la dimensione dell’icona, è possibile utilizzare le classi .icon-lg o .icon-sm sull’elemento <svg>.

Campo dimensione grande

Campo dimensione base

Campo dimensione piccola

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="form-group">
  <label for="input-group-3">Campo dimensione grande</label>
  <div class="input-group">
      <span class="input-group-text"><svg class="icon icon-md" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg></span>
      <input type="text" class="form-control form-control-lg" id="input-group-1" name="input-group-3" placeholder="Testo segnaposto">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" id="button-1" for="input-group-1">Invio</button>
      </div>
    </div>
</div>

<div class="form-group">
  <label for="input-group-3">Campo dimensione base</label>
  <div class="input-group">
      <span class="input-group-text"><svg class="icon icon-sm" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg></span>
      <input type="text" class="form-control" id="input-group-2" name="input-group-2" placeholder="Testo segnaposto">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" id="button-2" for="input-group-2">Invio</button>
      </div>
    </div>
</div>

<div class="form-group">
  <label class="active" for="input-group-2">Campo dimensione piccola</label>
  <div class="input-group">
    <span class="input-group-text"><svg class="icon icon-xs" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg></span>
    <input type="text" class="form-control form-control-sm" id="input-group-3" name="input-group-3" placeholder="Testo segnaposto">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button" id="button-3" for="input-group-3">Invio</button>
    </div>
  </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".

Accessibilità

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="form-group">
  <label for="autocomplete-one" class="visually-hidden">Cerca nel sito</label>
  <input type="search" class="form-control autocomplete" placeholder="Testo da cercare"
    id="autocomplete-one"
    name="autocomplete-one"
    data-bs-autocomplete="[]">
  <span class="autocomplete-icon" aria-hidden="true">
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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 icon-secondary">
          <use href="/dist/svg/sprites.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>

Dimensione grande

Per ottenere una versione grande dell’Autocomplete, indicata ad esempio per intestazioni di pagina ed overlay dedicati, aggiungere la classe .autocomplete-wrapper-big al contenitore .form-group. L’icona presente nella input non ha alcuna classe di dimensione assegnata, perché questa è gestita dal contenitore.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="form-group autocomplete-wrapper-big">
  <label for="autocomplete-two" class="visually-hidden">Cerca nel sito</label>
  <input type="search" class="form-control autocomplete" placeholder="Testo da cercare"
    id="autocomplete-two"
    name="autocomplete-two"
    data-bs-autocomplete="[]">
  <span class="autocomplete-icon" aria-hidden="true">
    <svg class="icon icon-secondary"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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>

Lista di dati

Questo autocompletamento è collegato, tramite l’attributo data-bs-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.

1
2
3
4
5
6
7
8
9
10
<div class="form-group">
  <label for="autocomplete-regioni" class="visually-hidden">Cerca nel sito</label>
  <input type="search" class="form-control 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/sprites.svg#it-search"></use></svg>
  </span>
</div>

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” per verificarne il comportamento.

1
2
3
4
5
6
7
8
9
10
<div class="form-group">
  <label for="autocomplete-test" class="visually-hidden">Cerca nel sito</label>
  <input type="search" class="form-control 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"},{"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/sprites.svg#it-search"></use></svg>
  </span>
</div>

Attivazione tramite codice

È possibile attivare l’autocompletamento creando un’istanza con il constructor.

Ad esempio:

import { InputSearch } from 'bootstrap-italia';

const inputElement = document.querySelector('#my-input-search');
const inputSearch = new InputSearch(inputElement, options);

Opzioni

import { InputSearch } from 'bootstrap-italia';

const inputElement = document.querySelector('#my-input-search');
const inputSearch = new InputSearch(inputElement, {
  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":"#"}]'
});

Nome	Tipo	Predefinito	Descrizione
autocomplete	string		Stringa in formato JSON contenente i dati per la ricerca.

Metodi

Metodo	Descrizione
getInstance	Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: InputSearch.getInstance(domElement).
getOrCreateInstance	Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: InputSearch.getOrCreateInstance(element).
dispose	Rimuove la funzionalità InputSearch.
search	Richiama la funzionalità di ricerca.

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

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

Dimensione

È 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

1
2
3
4
5
6
7
8
9
10
11
12
  <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>

Breaking change

Quando si utilizza l’attributo placeholder o l’input parte già valorizzato assicurarsi di aggiungere alla label la classe active per impedire la sovrapposizione della label al campo.

Rimosso l’elemento con classe .input-group-prepend in favore dell’elemento con classe .input-group-text.

Il campo di input di tipo Password è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

L’elemento input.input-password ha ora il corretto attributo aria-describedby al posto di aria-labelledby.
L’elemento .password-icon diventa un button con role=switch e uso dell’attributo aria-checked per lo stato.
Rivisto l’ordine degli elementi nell’HTML per rispecchiare la struttura corretta degli elementi.
Alcuni elementi small o span diventano p, ad esempio per la personalizzazione con attributi data delle varianti più avanzate ci si rivolgerà verso l’elemento p.strength-meter-info e non più al generico small.form-text.
Rimosso il controllo per il Caps-lock inserito, per non interferire con i tasti modificatori delle tecnologie assistive.
Aggiunta una variante con misuratore di sicurezza e suggerimenti.

Quando si utilizza un campo input diverso da submit, file, radio e checkbox è necessario sempre applicare la classe form-control.

Bootstrap Italia

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

Input

Input

Utilizzo e varianti

Placeholder e testo di supporto

Accessibilità: associazione del testo di aiuto con con i campi

Icone o pulsanti

Accessibilità delle icone

Disabilitato

Readonly

Readonly normalizzato

Attivazione tramite codice

Metodi

Password

Misuratore sicurezza e suggerimenti

Importante sulla sicurezza per l’uso in produzione

Accessibilità dei testi di aiuto

Accessibilità degli annunci di sicurezza

Attivazione tramite codice

Opzioni

Metodi

Dimensioni

Ricerca con autocompletamento

Accessibilità

Dimensione grande

Lista di dati

Attivazione tramite codice

Opzioni

Metodi

Area di testo

Dimensione

Breaking change

Input

Input

Utilizzo e varianti

Placeholder e testo di supporto

Accessibilità: associazione del testo di aiuto con con i campi

Icone o pulsanti

Accessibilità delle icone

Disabilitato

Readonly

Readonly normalizzato

Attivazione tramite codice

Metodi

Password

Misuratore sicurezza e suggerimenti

Importante sulla sicurezza per l’uso in produzione

Accessibilità dei testi di aiuto

Accessibilità degli annunci di sicurezza

Attivazione tramite codice

Opzioni

Metodi

Dimensioni

Ricerca con autocompletamento

Accessibilità

Dimensione grande

Lista di dati

Attivazione tramite codice

Opzioni

Metodi

Area di testo

Dimensione

Breaking change

Breaking change dalla versione 2.2.0

Breaking change dalla versione 2.8.0

Breaking change dalla versione 2.10.0

Breaking change dalla versione 2.11.0