Glitch

Formulir yang dirancang dengan baik akan membantu pengguna dan meningkatkan rasio konversi. Satu perbaikan kecil dapat membuat perbedaan besar!

Berikut adalah contoh formulir pembayaran sederhana 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 1900 dan 2020. Penggunaan type="number" akan 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 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 kisi-kisi fleksibel yang mudah. Jika mempertimbangkan contoh float sebelumnya, alih-alih membuat kolom dengan persentase, kita dapat menggunakan tata letak petak dan unit fr, yang mewakili sebagian ruang yang tersedia di container.

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

{i>Grid<i} juga dapat digunakan untuk membuat tata letak {i>grid<i} reguler, dengan sebanyak mungkin item yang sesuai. Jumlah trek yang tersedia akan dikurangi saat ukuran layar menyusut. Dalam demo di bawah, kami memiliki sebanyak mungkin kartu yang muat di setiap baris, dengan ukuran minimum 200px.

Baca selengkapnya tentang Tata Letak Petak CSS

Tata letak beberapa kolom

Untuk beberapa jenis tata letak, Anda dapat menggunakan Tata Letak Multi-Kolom (Multicol), yang dapat membuat jumlah kolom responsif dengan properti column-width. Pada demo di bawah, Anda dapat melihat bahwa kolom ditambahkan jika ada ruang untuk kolom 200px lainnya.