İyi tasarlanmış formlar kullanıcılara yardımcı olur ve dönüşüm oranlarını artırır. Küçük bir düzeltme büyük fark yaratabilir.
Bu en iyi uygulamaları bir eğitimle öğrenmeyi tercih ediyorsanız Ödeme formu en iyi uygulamaları kod laboratuvarı ve Adres formu en iyi uygulamaları kod laboratuvarı'na göz atın.
Tüm en iyi uygulamaları gösteren bir ödeme formu örneğini aşağıda bulabilirsiniz:
Tüm en iyi uygulamaları gösteren basit bir adres formu örneği aşağıda verilmiştir:
Örneğin, aşağıdaki HTML'de 1900 ile 2020 arasında bir doğum yılı girişi belirtilmektedir. type="number" kullanıldığında giriş değerleri, min ve max tarafından belirtilen aralıktaki yalnızca sayılarla sınırlandırılır. Aralığın dışında bir sayı girmeye çalışırsanız giriş geçersiz bir duruma ayarlanır.
Aşağıdaki örnekte, boşluklara izin verirken geçerli bir ödeme kartı numarası sağlamak için pattern="[\d ]{10,30}" kullanılmaktadır:
Modern tarayıcılar, email veya url türüne sahip girişler için de temel doğrulama yapar.
CSS Izgara Düzeni
CSS ızgara düzeni, esnek ızgaraların kolayca oluşturulmasını sağlar.
Daha önceki yüzen örnekte olduğu gibi, sütunlarımızı yüzdelerle oluşturmak yerine, ızgara düzenini ve kapsayıcıdaki kullanılabilir alanın bir bölümünü temsil eden fr birimini kullanabiliriz.
.container { display: grid; grid-template-columns: 1fr 3fr; }
Izgara, sığabilecek kadar öğe içeren normal ızgara düzenleri oluşturmak için de kullanılabilir.
Ekran boyutu küçüldükçe kullanılabilen parça sayısı azalır.
Demoda, her satıra sığabilecek kadar kart var ve kartların minimum boyutu 200px.
CSS ızgara düzeni hakkında daha fazla bilgi edinin.
Çok sütunlu düzen
Bazı düzen türleri için birden çok sütunlu düzeni (Multicol) kullanabilirsiniz. Bu düzen, column-width mülküyle duyarlı sayıda sütun oluşturabilir.
Demoda, başka bir 200px sütunu için yer varsa sütunların eklendiğini görebilirsiniz.