Elementi e stili per la creazione di input accessibili e responsivi tratti da https://italia.github.io/.../form/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
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.
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.
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.