Formların stilini belirleme

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?

Boyutun kullanıcı tercihine uygun olduğundan emin olmak 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 denetimleri arasındaki boşluğu nasıl artırabilirsiniz?

padding CSS mülkü kullanılıyor.
Tekrar deneyin.
spacer CSS mülkü kullanılıyor.
Tekrar deneyin.
margin CSS mülkü kullanılıyor.
🎉
boundary CSS mülkü kullanılıyor.
Tekrar deneyin.

Kaynaklar