İ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 bir fark yaratabilir.
Aşağıda, en iyi uygulamaların tümünü gösteren basit bir ödeme şekli örneği verilmiştir:
Aşağıda, en iyi uygulamaların tümünü gösteren basit bir adres formu örneği verilmiştir:
Örneğin, aşağıdaki HTML, 1900 ile 2020 arasındaki bir doğum yılı için girişi belirtir. type="number" kullanıldığında giriş değerleri yalnızca min ve max tarafından belirtilen aralıktaki sayılarla sınırlandırılır. Aralık dışında bir sayı girmeye çalışırsanız giriş geçersiz bir duruma sahip olacak şekilde 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ılmıştır:
Modern tarayıcılar, email veya url türündeki girişler için temel doğrulama da yapar.
CSS Izgara Düzeni
CSS Izgara Düzeni, esnek ızgaraların kolayca oluşturulmasına olanak tanır.
Önceki kayan reklam örneğini dikkate alırsak, sütunlarımızı yüzde değerleriyle oluşturmak yerine ızgara düzenini ve kapsayıcıdaki kullanılabilir alanın bir kısmını temsil eden fr birimini kullanabiliriz.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Izgara, mümkün olduğunca çok sayıda öğeyle normal ızgara düzenleri oluşturmak için de kullanılabilir.
Ekran boyutu küçüldükçe, kullanılabilir parçaların sayısı da azalır.
Aşağıdaki demoda, en az 200px boyutunda olmak üzere her satıra sığabilecek sayıda kartımız bulunmaktadır.
CSS Izgara Düzeni hakkında daha fazla bilgi edinin.
Çok sütunlu düzen
Bazı düzen türlerinde, Çok Sütunlu Düzen (Çoklu Sütun) özelliğini kullanabilirsiniz. Bu yöntem, column-width özelliğiyle duyarlı sayıda sütun oluşturabilir.
Aşağıdaki demoda, başka bir 200px sütunu için yer varsa sütunların eklendiğini görebilirsiniz.