Form

Elementi e stili per la creazione di moduli accessibili e responsivi

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Il Form, o modulo, è un componente involucro (wrapper) che permette di raggruppare e impaginare controlli di input correlati per l'invio di informazioni o la configurazione di opzioni.

Le persone possono inviare il form quando tutti i campi obbligatori sono compilati e i dati sono validi rispetto al formato richiesto dallo specifico campo.

Come usarlo

Attenzione a

  • Se il modulo è lungo e complesso, valuta se già possiedi da altre fonti alcuni dei dati che dovresti richiedere: se sì potresti semplicemente farli validare all'utente, evitandogli di inserirli ex novo; per semplificare la compilazione, puoi inoltre dividere il form in più passi, utilizzando il componente Steppers.
  • Implementa per tutti i campi del form la migliore validazione possibile dei valori inseriti; l'obiettivo della validazione non è restituire errori generici, ma guidare l'utente nella compilazione e nella risoluzione di eventuali errori, oltre che standardizzare i dati inviati.
  • Data la natura di interazione complessa, testa sempre la sua efficacia con gli utenti.

Buone pratiche sui contenuti

  • Prevedi un titolo e una descrizione del form, e laddove necessario titoli intermedi se utili alla scansione di gruppi di campi o step.
  • Inserisci didascalie e istruzioni tra i campi se necessarie a guidare la compilazione da parte dell'utente; puoi anche utilizzare soluzioni di aiuto contestuale come i tooltip.
  • Cura la leggibilità dei contenuti delle etichette (label) e dei testi segnaposto per tutti i campi: devono essere chiari e concisi.
  • Cura la progettazione dei microtesti di errore: devono aiutare le persone a completare la compilazione e risolvere in autonomia eventuali errori.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Da verificare

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Da verificare

Struttura titolazioni, etichette e testi alternativi

Navigabile

Da verificare

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Da verificare

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

Anatomia

In stesura

Comportamento

All'invio dei dati il form, se ci sono errori nella compilazione, restituisce un messaggio di alert complessivo e riferimenti visivi e informativi puntuali sulla validità di ogni campo di cui è composto.

Specifiche di design

In stesura

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici