Input

Elementi e stili per la creazione di input accessibili e responsivi tratti da https://italia.github.io/.../form/input/ .

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.

Per maggiori dettagli puoi guardare il video tutorial

Form 01

Utilizzo di placeholder e label

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

Form 02

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

Form 03

In caso di necessità, è anche possibile utilizzare un ulteriore contenuto testuale sotto il campo di testo, aggiungendo da interfaccia grafica, verrà aggiunto in automatico un elemento <small> con classe .form-text e .text-muted all’interno di .form-group.

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. Questo comportamento è attivo di default.

Form 04

Ulteriore testo informativo
Ulteriore testo informativo

Input con icona o bottoni

Non acora implementato

Input password

Il campo di tipo 'password' è stato disattivato (https://www.drupal.org/.../issue/2947991) in quanto è considerato pericoloso raccogliere password attraverso una webform. L'unico campo di tipo password è fornito dal modulo 'core/user'.

Tuttavia è possibile utilizzare il campo di tipo 'text' con l'opzione 'input hiding', in questo modo il campo verrà protetto quando il campo stesso non ha il focus. Associando questo comportamento con i permessi sullo specifico campo (inserimento, modifica e visualizzazione) si possono costruire dei webform e dei workflow per il trattamento dei dati conformi con i diversi regolamenti sulla privacy.

Form 05

Disabilitato

Seleziona l’opzione disattivato dall'interfaccia grafica per impedire la modifica del valore contenuto e non inviare i dati in esso contenuti.

Readonly

Seleziona l’opzione sola lettura dall'interfaccia grafica per impedire la modifica del valore contenuto.

Readonly normalizzato

Se per qualche motivo vuoi avere gli elementi <input readonly> nella forma stilizzata come testo normale dall'interfaccia grafica inserisci la classe .form-control-plaintext e la classe .form-control verrà rimossa in automatico.

Form 06

Form 07

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.

Form 08