Formulir yang didesain dengan baik akan membantu pengguna dan meningkatkan rasio konversi. Satu perbaikan kecil dapat memberikan dampak besar.
Jika Anda lebih suka mempelajari praktik terbaik ini dengan tutorial, lihat dua codelab: Codelab praktik terbaik formulir pembayaran dan Codelab praktik terbaik formulir alamat.
Berikut adalah contoh formulir pembayaran yang menunjukkan semua praktik terbaik:
Berikut adalah contoh formulir alamat sederhana yang menunjukkan semua praktik terbaik:
Misalnya, HTML berikut menentukan input untuk tahun lahir antara tahun 1900 dan 2020. Penggunaan type="number" membatasi nilai input hanya ke angka, dalam rentang yang ditentukan oleh min dan max. Jika Anda mencoba memasukkan angka di luar rentang, input akan
ditetapkan untuk memiliki status yang tidak valid.
Contoh berikut menggunakan pattern="[\d ]{10,30}" untuk memastikan nomor kartu pembayaran yang valid, sekaligus
mengizinkan spasi:
Browser modern juga melakukan validasi dasar untuk input dengan jenis email atau url.
Tata Letak Petak CSS
Tata Letak Petak CSS memungkinkan pembuatan petak fleksibel yang mudah.
Jika kita mempertimbangkan contoh yang mengambang sebelumnya,
bukan membuat kolom dengan persentase,
kita dapat menggunakan tata letak petak dan unit fr,
yang mewakili sebagian ruang yang tersedia dalam penampung.
.container { display: grid; grid-template-columns: 1fr 3fr; }
Petak juga dapat digunakan untuk membuat tata letak petak reguler,
dengan item sebanyak yang muat.
Jumlah trek yang tersedia akan berkurang seiring dengan mengecilnya ukuran layar.
Dalam demo, kita memiliki kartu sebanyak yang muat di setiap baris,
dengan ukuran minimum 200px.
Baca selengkapnya tentang Tata Letak Petak CSS
Tata letak multi-kolom
Untuk beberapa jenis tata letak, Anda dapat menggunakan Tata Letak Multi-kolom (Multicol),
yang dapat membuat jumlah kolom responsif dengan properti column-width.
Dalam demo, Anda dapat melihat bahwa kolom ditambahkan jika ada ruang untuk kolom 200px lainnya.