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 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.
<div><divclass="form-group"><labelfor="exampleInputText">Campo di tipo testuale</label><inputtype="text"class="form-control"id="exampleInputText"></div><divclass="form-group"><labelfor="exampleInputEmail1">Campo di tipo email</label><inputtype="email"class="form-control"id="exampleInputEmail1"></div><divclass="form-group"><labelfor="exampleInputNumber">Campo di tipo numerico</label><inputtype="number"data-bs-inputclass="form-control"id="exampleInputNumber"></div><divclass="form-group"><labelfor="exampleInputTelephone">Campo di tipo telefono</label><inputtype="tel"class="form-control"id="exampleInputTelephone"></div><divclass="form-group"><labelclass="active"for="exampleInputTime">Campo di tipo ora</label><inputtype="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.
1
2
3
4
<divclass="form-group"><labelfor="formGroupExampleInput">Etichetta di esempio</label><inputtype="text"class="form-control"id="formGroupExampleInput"></div>
Si può abbinare all’etichetta un placeholder (testo di esempio) per ulteriore chiarezza.
1
2
3
4
<divclass="form-group"><labelclass="active"for="formGroupExampleInput2">Etichetta di esempio</label><inputtype="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.
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.
Ulteriore testo informativo
1
2
3
4
5
6
7
8
9
10
11
<divclass="form-group"><labelclass="active"for="formGroupExampleInputWithHelp">Etichetta di esempio</label><inputtype="text"class="form-control"id="formGroupExampleInputWithHelp"placeholder="Testo di esempio"aria-describedby="formGroupExampleInputWithHelpDescription"><smallid="formGroupExampleInputWithHelpDescription"class="form-text">Ulteriore testo informativo</small></div>
Input con icona o pulsanti
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>")
Aggiungi l’attributo readonly ad un input per impedire la modifica del valore contenuto.
1
2
3
4
<divclass="form-group"><labelclass="active"for="input-text-read-only">Contenuto in sola lettura</label><inputclass="form-control"type="text"id="input-text-read-only"value="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.
1
2
3
4
5
6
<div><divclass="form-group"><labelclass="active"for="input-text-read-only-2">Contenuto in sola lettura</label><inputclass="form-control-plaintext"value="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:
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.
Input password
Per rendere più semplice l’inserimento della password, il campo Input di tipo password è dotato di un pulsante che permette di mostrare i caratteri inseriti. Inoltre, è possibile abbinare una descrizione estesa che ne aiuti la compilazine, ad esempio in fase di scelta di una nuova password.
Base, login
Con descrizione estesa
Inserisci almeno 8 caratteri e alcuni caratteri speciali.
<pclass="mt-4 pb-3">Base, login</p><divclass="form-group"><labelfor="exampleInputPassword">Password</label><inputtype="password"data-bs-inputclass="form-control input-password"id="exampleInputPassword"><buttontype="button"class="password-icon btn"role="switch"aria-checked="false"><spanclass="visually-hidden">Mostra/Nascondi Password</span><svgclass="password-icon-visible icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"></use></svg><svgclass="password-icon-invisible icon icon-sm d-none"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-password-invisible"></use></svg></button></div><pclass="mt-4 pb-3">Con descrizione estesa</p><divclass="form-group"><labelfor="exampleInputPassword2">Password</label><inputtype="password"data-bs-inputclass="form-control input-password"id="exampleInputPassword2"aria-describedby="infoPassword2"><buttontype="button"class="password-icon btn"role="switch"aria-checked="false"><spanclass="visually-hidden">Mostra/Nascondi Password</span><svgclass="password-icon-visible icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"></use></svg><svgclass="password-icon-invisible icon icon-sm d-none"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-password-invisible"></use></svg></button><pid="infoPassword2"class="form-text text-muted d-block small pb-0">Inserisci almeno 8 caratteri e alcuni caratteri speciali.</p></div>
Password con 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.
Con descrizione e misuratore sicurezza
Inserisci almeno 8 caratteri, combinando maiuscole, numeri e caratteri speciali.
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.
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>.
<divclass="form-group"><labelfor="autocomplete-one"class="visually-hidden">Cerca nel sito</label><inputtype="search"class="form-control autocomplete"placeholder="Testo da cercare"id="autocomplete-one"name="autocomplete-one"data-bs-autocomplete="[]"><spanclass="autocomplete-icon"aria-hidden="true"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-search"></use></svg></span><ulclass="autocomplete-list"id="testAutocomplete1"><li><ahref="#"><divclass="avatar size-sm"><imgsrc="https://randomuser.me/api/portraits/women/44.jpg"alt="Luisa Neri"></div><spanclass="autocomplete-list-text"><span>List <mark>Ite</mark>m</span><em>Label</em></span></a></li><li><ahref="#"><divclass="avatar size-sm"><imgsrc="https://randomuser.me/api/portraits/men/46.jpg"alt="Mario Rossi"></div><spanclass="autocomplete-list-text"><span>List <mark>Ite</mark>m</span><em>Label</em></span></a></li><li><ahref="#"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg><spanclass="autocomplete-list-text"><span>List <mark>Ite</mark>m</span><em>Label</em></span></a></li><li><ahref="#"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg><spanclass="autocomplete-list-text"><span>List <mark>Ite</mark>m</span><em>Label</em></span></a></li><li><ahref="#"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg><spanclass="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 overlay dedicati, aggiungere la classe .autocomplete-wrapper-big al contenitore .form-group.
<divclass="form-group autocomplete-wrapper-big"><labelfor="autocomplete-two"class="visually-hidden">Cerca nel sito</label><inputtype="search"class="form-control autocomplete"placeholder="Testo da cercare"id="autocomplete-two"name="autocomplete-two"data-bs-autocomplete="[]"><spanclass="autocomplete-icon"aria-hidden="true"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-search"></use></svg></span><ulclass="autocomplete-list"id="testAutocomplete2"><li><ahref="#"><divclass="avatar size-sm"><imgsrc="https://randomuser.me/api/portraits/women/44.jpg"alt="Paola Pistoia"></div><spanclass="autocomplete-list-text"><span>Paola <mark>Pi</mark>stoia</span><em>Profilo</em></span></a></li><li><ahref="#"><divclass="avatar size-sm"><imgsrc="https://randomuser.me/api/portraits/men/46.jpg"alt="Pierluigi Rossi"></div><spanclass="autocomplete-list-text"><span><mark>Pi</mark>erluigi Rossi</span><em>Profilo</em></span></a></li><li><ahref="#"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-pa"></use></svg><spanclass="autocomplete-list-text"><span>Comune di <mark>Pi</mark>sa</span><em>Amministrazione</em></span></a></li><li><ahref="#"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-file"></use></svg><spanclass="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-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
<divclass="form-group"><labelfor="autocomplete-regioni"class="visually-hidden">Cerca nel sito</label><inputtype="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":"#"}]'><spanclass="autocomplete-icon"aria-hidden="true"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/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
<divclass="form-group"><labelfor="autocomplete-test"class="visually-hidden">Cerca nel sito</label><inputtype="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":"#"}]'><spanclass="autocomplete-icon"aria-hidden="true"><svgclass="icon icon-sm"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-search"></use></svg></span></div>
Attivazione tramite codice
È possibile creare un’istanza con il constructor, ad esempio:
import{InputSearch}from'bootstrap-italia';constinputElement=document.querySelector('#my-input-search');constinputSearch=newInputSearch(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.
1
2
3
4
<divclass="form-group"><labelfor="exampleFormControlTextarea1">Esempio di area di testo</label><textareaclass="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.
1
2
3
4
5
6
7
8
9
10
11
12
<divclass="form-group"><labelclass="active"for="input-text-lg">Grande</label><inputtype="text"class="form-control form-control-lg"id="input-text-lg"placeholder="Inserisci il tuo nome"></div><divclass="form-group"><labelclass="active"for="input-text-normal">Normale</label><inputtype="text"class="form-control"id="input-text-normal"placeholder="Inserisci il tuo nome"></div><divclass="form-group"><labelclass="active"for="input-text-sm">Piccolo</label><inputtype="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.