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à

In stesura

Stato del componente

In stesura

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