Kullanıcıların formunuzu tercih ettikleri tarayıcıyla kullanmalarına yardımcı olun
Formunuza mümkün olduğunca çok kişinin erişebilmesini sağlamak üzere,
iş: <input>
, <textarea>
, <select>
ve <button>
. Bu, kullanılabilir bir formun temel çizgisidir.
Varsayılan tarayıcı stilleri iyi görünmüyor! Hadi değiştirelim.
Form kontrollerinin herkes için okunabilir olmasını sağlayın
Çoğu tarayıcıda form denetimlerinin varsayılan yazı tipi boyutu çok küçük. Form kontrollerinizin okunabilir olmasını sağlamak için yazı tipi boyutunu CSS ile değiştirin:
Okunabilirliği iyileştirmek için font-size
ve line-height
değerlerini artırın.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Kullanıcıların formunuzda gezinmesine yardımcı olun
Sonraki adım olarak formunuzun düzenini değiştirin ve form öğeleri arasındaki boşluğu artırın. kullanıcıların hangi öğelerin birbirine ait olduğunu anlamalarına yardımcı olur.
margin
CSS özelliği, öğeler arasındaki boşluğu artırır.
padding
özelliği, öğe içeriğinin çevresindeki alanı artırır.
Genel düzen için Flexbox veya Izgara'yı kullanın. CSS düzen yöntemleri hakkında daha fazla bilgi edinin.
Form kontrollerinin, form kontrolleri gibi göründüğünden emin olun
Form kontrollerinizde iyi anlaşılır stiller kullanarak kullanıcıların formunuzu doldurmasını kolaylaştırın.
Örneğin, düz bir kenarlıklı <input>
öğeleri ekleyin.
input,
textarea {
border: 1px solid;
}
Kullanıcıların formunuzu göndermesine yardımcı olun
Sitenizin stiliyle uyumlu olması amacıyla <button>
için bir background
kullanabilirsiniz.
ve varsayılan border
stillerini geçersiz kılabilir veya kaldırabilirsiniz.
Kullanıcıların mevcut durumu anlamalarına yardımcı olun
Tarayıcılar, :focus
için varsayılan bir stil uygular.
Rengi markanızla eşleştirmek için :focus
stillerini geçersiz kılabilirsiniz.
button:focus {
outline: 4px solid green;
}
Öğrendiklerinizi sınayın
Biçimlendirme formlarıyla ilgili bilginizi test edin
font-size
için neden göreli birimler kullanmalısınız?
Form denetimleri arasındaki boşluğu nasıl artırabilirsiniz?
margin
CSS mülkü kullanılıyor.padding
CSS mülkü kullanılıyor.spacer
CSS mülkü kullanılıyor.boundary
CSS mülkü kullanılıyor.