Glitch

I moduli ben progettati aiutano gli utenti e aumentano i tassi di conversione. Una piccola correzione può fare una grande differenza.

Se preferisci apprendere queste best practice con un tutorial, consulta i due codelab: Codelab sulle best practice per i moduli di pagamento e Codelab sulle best practice per i moduli di indirizzo.

Ecco un esempio di modulo di pagamento che mostra tutte le best practice:

Ecco un esempio di un semplice modulo di indirizzo che mostra tutte le best practice:

Ad esempio, il seguente codice HTML specifica l'inserimento di un anno di nascita compreso tra il 1900 e il 2020. L'utilizzo di type="number" limita i valori di input solo ai numeri, nell'intervallo specificato da min e max. Se provi a inserire un numero non compreso nell'intervallo, l'input verrà impostato su uno stato non valido.

L'esempio seguente utilizza pattern="[\d ]{10,30}" per garantire un numero di carta di pagamento valido, consentendo al contempo gli spazi:

I browser moderni eseguono anche la convalida di base per gli input di tipo email o url.

Layout a griglia CSS

La funzionalità CSS Grid Layout consente di creare facilmente griglie flessibili. Se consideriamo l'esempio precedente con le colonne a flottante, invece di creare le colonne con le percentuali, potremmo utilizzare il layout a griglia e l'unità fr, che rappresenta una parte dello spazio disponibile nel contenitore.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

La griglia può essere utilizzata anche per creare layout a griglia regolari con tutti gli elementi che possono essere visualizzati. Il numero di tracce disponibili diminuirà con la riduzione delle dimensioni dello schermo. Nella demo abbiamo quante più schede possono essere visualizzate in ogni riga, con una dimensione minima di 200px.

Scopri di più sul layout a griglia CSS

Layout a più colonne

Per alcuni tipi di layout puoi utilizzare il layout a più colonne (Multicol), che consente di creare un numero di colonne adattabili con la proprietà column-width. Nella demo, puoi vedere che le colonne vengono aggiunte se c'è spazio per un'altra colonna 200px.