Formların stilini belirleme

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?

Bedenin kullanıcı tercihine uygun olmasını sağlamak için.
🎉
Boyutun önceki öğeye yanıt verdiğinden emin olmak için.
Tekrar deneyin.
Boyutun koyu moda yanıt verdiğinden emin olmak için.
Tekrar deneyin.
Boyutun medya sorgularına yanıt verdiğinden emin olmak için.
Tekrar deneyin.

Form kontrolleri arasındaki boşluğu nasıl artırabilirsiniz?

padding CSS mülkünü kullanma.
Tekrar deneyin.
spacer CSS mülkünü kullanma.
Tekrar deneyin.
margin CSS mülkünü kullanma.
🎉
boundary CSS mülkünü kullanma.
Tekrar deneyin.

Kaynaklar