Yayınlanma tarihi: 8 Kasım 2023
Kullanıcı girişi, tüm kullanıcı arayüzlerinde 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çicileri, yalnızca kullanıcı girişi değiştirdikten sonra hatalar hakkında geri bildirim vererek giriş doğrulamayla ilgili kullanıcı deneyimini iyileştirmeye yardımcı olur. Bu yeni seçicilerle, kullanıcının değiştirdiği girişi takip etmek için durum bilgisi içeren kod yazmak gerekmez.
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 geçerli değerinin doğrulama kısıtlamalarını karşılayıp karşılamadığına bağlı olarak bir form kontrolüyle eşleşir. Ancak yeni :user-valid
ve :user-invalid
sözde sınıflarının avantajı, yalnızca kullanıcı girişle önemli ölçüde etkileşime geçtikten sonra bir form denetimiyle eşleşmeleridir.
Zorunlu ve boş bir form denetimi, kullanıcı sayfayla etkileşime geçmeye 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 kontrolü :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ş, select ve textarea 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şimlerinin ve doğrulama kısıtlamalarının bir kombinasyonuna göre eşleştirilir. Bunları çalışırken görmek için aşağıdaki demoyla etkileşime geçin:
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ı deneyimine ulaşmak için ek durum bilgisi içeren kod yazmak gerekiyordu. Bu kod, ilk değeri, girişin mevcut odak durumunu, kullanıcının değerde yaptığı değişikliklerin kapsamını takip etmek, ek bir geçerlilik kontrolü yapmak ve son olarak stil için seçilecek bir sınıf eklemek zorundaydı. Artık tüm bunları otomatik olarak yönetmek için tarayıcıya güvenebilirsiniz.
Diğer kaynaklar
- :user-valid - MDN web docs
- :user-invalid - MDN web docs
- Kullanıcı Etkileşimi Sözde Sınıfları - W3C Düzenleyici Taslağı
- Form Kısıtlama Doğrulaması - MDN web dokümanları
- Formlar Erişilebilirlik Eğitimi - Web Erişilebilirlik Girişimi
Unsplash'taki Behzad Ghaffarian tarafından çekilen kapak fotoğrafı.