Kullanıcıların formunuzu tercih ettikleri tarayıcıda kullanmasına yardımcı olun
Formunuzun mümkün olduğunca fazla kişi için erişilebilir olmasını sağlamak üzere, iş için oluşturulan şu öğeleri kullanın: <input>
, <textarea>
, <select>
ve <button>
. Bu, kullanılabilir bir form için temel çizgisidir.
Varsayılan tarayıcı stilleri pek iyi görünmüyor! Bunu değiştirelim.
Form kontrollerinin herkes için okunabilir olmasını sağlama
Çoğu tarayıcıda form denetimlerinin varsayılan yazı tipi boyutu çok küçüktür. Form kontrollerinizin okunabilir olması 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ı olma
Sonraki adım olarak, kullanıcıların hangi öğelerin birbirlerine ait olduğunu anlamalarına yardımcı olmak için formunuzun düzenini değiştirin ve form öğeleri arasındaki boşluğu artırın.
margin
CSS özelliği öğeler arasındaki boşluğu artırır, padding
özelliği ise öğe içeriğinin etrafındaki boşluğu 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 denetimlerinin form kontrolleri gibi görünmesini sağlama
Form kontrolleriniz için anlaşılır stiller kullanarak kullanıcıların formunuzu doldurmasını kolaylaştırın.
Örneğin, <input>
öğelerini düz bir kenarlıkla biçimlendirin.
input,
textarea {
border: 1px solid;
}
Kullanıcıların formunuzu göndermesine yardımcı olun
Sitenizin stiliyle eşleştirmek üzere <button>
için bir background
kullanabilir ve varsayılan border
stillerini geçersiz kılabilir ya da kaldırabilirsiniz.
Kullanıcıların mevcut durumu anlaması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 kontrolleri arasındaki boşluğu nasıl artırabilirsiniz?
padding
CSS mülkünü kullanma.spacer
CSS mülkünü kullanma.margin
CSS mülkünü kullanma.boundary
CSS mülkünü kullanma.