:user-valid
:user-invalid
Kullanı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.