:user-valid:user-invalidKullanıcı girişleri, tüm kullanıcı arayüzlerindeki en hassas konulardan biridir. Kullanılabilir bir uygulama, kullanıcıların girişlerindeki hataları görmelerine, anlamalarına ve düzeltmelerine yardımcı olmalıdır. :user-valid ve :user-invalid sözde sınıf seçiciler, yalnızca kullanıcı girişi değiştirdikten sonra hatalar hakkında geri bildirim vererek giriş doğrulamasında kullanıcı deneyimini iyileştirmeye yardımcı olur. Bu yeni seçiciler sayesinde, kullanıcının değiştirdiği girişleri takip etmek için durum bilgili kod yazmaya gerek kalmıyor.
Kullanıcı etkileşimi sözde sınıf seçicileri
:user-valid ve :user-invalid sözde sınıf seçicileri, mevcut :valid ve :invalid sözde sınıflarına benzer. Her ikisi de mevcut değerinin doğrulama kısıtlamalarını karşılayıp karşılamadığına göre bir form kontrolüyle eşleşir. Bununla birlikte, yeni :user-valid ve :user-invalid sözde sınıflarının avantajı, yalnızca kullanıcı girişle önemli ölçüde etkileşimde bulunduktan sonra form kontrolüyle eşleşebilmesidir.
Zorunlu ve boş bir form denetimi, kullanıcı sayfayla etkileşimde bulunmaya başlamamış olsa bile :invalid ile eşleşir. Ancak kullanıcı, girişi değiştirip geçersiz bir durumda bırakana kadar aynı form denetimi :user-invalid ile eşleşmez.
:user-valid ve :user-invalid sözde sınıflarını kullanma
Aşağıdaki örneklerde gösterildiği gibi giriş, seçim ve metin alanı denetimlerinin stilini belirlemek için bu sözde sınıfları kullanın:
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
Seçiciler, kullanıcı etkileşimleri ve doğrulama kısıtlamalarının bir kombinasyonuna göre eşleşir. Uygulamalı olarak görmek için aşağıdaki demoyu izleyin:
Daha az kodla daha iyi kullanıcı deneyimi
Bu sözde sınıflar olmadan, :user-valid ve :user-invalid tarafından sağlanan kullanıcı deneyimini sağlamak ekstra durum bilgili kod yazmayı gerektiriyordu. Bu kodun başlangıç değerini, girişin o anki odaklanma durumunu, kullanıcının değerde yaptığı değişikliklerin kapsamını izlemek, ekstra bir doğruluk kontrolü yapmak ve son olarak stil için seçilecek bir sınıf eklemek gerekiyordu. Artık tüm bunları otomatik olarak
işlemesi için tarayıcıya güvenebilirsiniz.
Daha fazla kaynak
- :user-valid - MDN web dokümanları
- :user-invalid - MDN web belgeleri
- Kullanıcı etkileşimi sözde sınıfları - W3C Editörün Taslağı
- Form Kısıtlaması Doğrulaması - MDN web belgeleri
- Forms Erişilebilirlik Eğiticisi - Web Erişilebilirlik Girişimi
Kapak fotoğrafı, Unsplash'ta Behzad Ghaffarian tarafından çekilmiştir.