Formların doldurması gereken bir güçlük olabileceğini hepimiz biliyoruz. Özellikle fazla rehberlik veya geri bildirim olmadan sunulan bir girdiler listesinden başka bir şey olmadığı zaman. Ancak form oluşturucuları olarak, çevrimiçi formları dolduran kullanıcıların deneyimini geliştirmek için yapabileceğimiz birçok şey var.
CSS Kullanarak Form Doğrulama
CSS kullanarak, sözde sınıfları olan dört form girişine erişimimiz var-:valid, :invalid, :required ve:optional. Bu durumlar, kullanıcılara formu doldururken sınırlı olsa da – geri bildirimde bulunmak için kullanabiliriz.
:valid ve:invalid, kullanıcılara, girişleri gereken tüm şartları yerine getirip getirmediğini gerçek zamanlı olarak söyleyebiliriz.
1 2 3 4 | input:valid { border-color: green; } input:invalid { border-color: red; } |
Bununla birlikte, bu metodun kullanılmasıyla ilgili bir problem, stillerin kullanıcı form üzerinde hareket etmeye başlamadan önce bile uygulanmış olmasıdır. Gerekli girişler için bize şu şekilde gösterilecekler:invalid, ve isteğe bağlı girişler şu şekilde gösterilecektir:valid. Bu, kullanıcıya başlama şansı verilmeden önce, zaten harika bir deneyim olmayan negatif geribildirimler alabileceği anlamına gelir.
Stil:required ve:optional durumlar, genellikle bir etikette verilen bilgiler olduğundan, tipik olarak çok kullanışlı değildir. Ancak, bu durumları aşağıdakilerle birleştirmek isteyebiliriz: valid /: invalid sözde sınıfları ve sadece belirli kombinasyonları stillendir. Örneğin, yalnızca gerekli bir giriş geçerli olduğunda olumlu geribildirim vermek isteyebiliriz.
1 2 3 | input:required:valid { border-color: green; } |
Yorum Yap