Moduli ben strutturati aiutano gli utenti e aumentano i tassi di conversione. Una piccola correzione può fare una grande differenza.
Ecco un esempio di una forma di pagamento semplice che illustra tutte le best practice:
Ecco un esempio di un semplice modulo per l'indirizzo che illustra tutte le best practice:
Ad esempio, il seguente codice HTML specifica l'input per un anno di nascita compreso tra il 1900 e il 2020. L'utilizzo di type="number" vincola i valori di input solo a numeri, nell'intervallo specificato da min e max. Se tenti di inserire un numero al di fuori dell'intervallo, lo stato dell'input non è valido.
L'esempio seguente utilizza pattern="[\d ]{10,30}" per garantire un numero di carta di pagamento valido, consentendo al contempo spazi:
I browser moderni eseguono anche la convalida di base per input di tipo email o url.
Layout griglia CSS
Il layout griglia CSS consente la creazione semplice di griglie flessibili.
Se consideriamo il precedente esempio con valori in virgola mobile, anziché creare le colonne con le percentuali, potremmo utilizzare il layout a griglia e l'unità fr, che rappresenta una parte dello spazio disponibile nel container.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Puoi usare la griglia anche per creare layout
normali, con tutti gli elementi che vuoi.
Il numero di tracce disponibili si riduce man mano che le dimensioni dello schermo si riducono.
Nella demo di seguito è presente il numero di schede che si possono inserire in ogni riga,
con una dimensione minima di 200px.
Scopri di più sul layout griglia CSS
Layout a più colonne
Per alcuni tipi di layout puoi utilizzare il layout a più colonne (multicol),
che consente di creare numeri adattabili di colonne con la proprietà column-width.
Nella demo di seguito, puoi vedere che vengono aggiunte colonne se c'è spazio per un'altra colonna 200px.