JavaScript

Form etkinliklerine yanıt verme

JavaScript'i kullanarak formunuzdaki kullanıcı etkileşimlerine yanıt verebilir, ek form alanları gösterebilir, form gönderebilir ve daha pek çok işlem yapabilirsiniz.

Kullanıcıların ek form kontrollerini doldurmasına yardımcı olma

Bir anket formu oluşturduğunuzu varsayalım. Kullanıcı bir seçenek seçtikten sonra, seçimle ilgili belirli bir soru sormak için ek bir <input> göstermek istiyorsunuz. Yalnızca alakalı <input> öğesini nasıl gösterebilirsiniz?

JavaScript'i kullanarak yalnızca ilişkili <input type="radio"> seçiliyken bir <input>'ü gösterebilirsiniz.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Demo için JavaScript koduna göz atalım. aria-controls ve aria-expanded özelliklerini fark ettiniz mi? Ekran okuyucu kullanıcılarının ek bir form denetiminin ne zaman gösterildiğini veya gizlendiğini anlamalarına yardımcı olmak için aşağıdaki ARIA özelliklerini kullanın.

Kullanıcıların sayfadan ayrılmadan form gönderebilmesini sağlayın

Bir yorum formunuz olduğunu varsayalım. Bir okuyucu yorum ekleyip formu gönderdiğinde, sayfayı yenilemeden yorumu hemen görebilmesi ideal olur.

Bunu yapmak için onsubmit etkinliğini dinleyin, ardından varsayılan davranışı önlemek için event.preventDefault()'ü kullanın ve Getirme API'sini kullanarak FormData'yi gönderin.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

Arka uç komut dosyanız, bir POST isteğinin tarayıcıdan (method="post" olan bir form öğesinin action özelliğini kullanarak) mı yoksa JavaScript'ten (fetch() isteği gibi) mi geldiğini kontrol edebilir.

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Ekran okuyucu kullanıcılarını dinamik içerik değişiklikleri hakkında her zaman bilgilendirin. HTML'nize aria-live="polite" özelliğine sahip bir öğe ekleyin ve bir değişiklikten sonra öğenin içeriğini güncelleyin. Örneğin, bir kullanıcı yorum gönderdikten sonra metni "Yorumunuz başarıyla yayınlandı" olarak güncelleyin.

ARIA canlı bölgeleri hakkında daha fazla bilgi edinin.

JavaScript ile doğrulama

Hata mesajlarının sitenizin tarzına ve üslubuna uygun olmasını sağlayın

Varsayılan hata mesajlarının ifadesi tarayıcılar arasında farklılık gösterir. Tüm kullanıcılara aynı mesajın gösterilmesini ve mesajın sitenizin stil ve üslubuyla uyumlu olmasını nasıl sağlayabilirsiniz? Kendi hata mesajlarınızı tanımlamak için Constraint Validation API'nin setCustomValidity() yöntemini kullanın.

Kullanıcıların hatalar hakkında anlık olarak bilgilendirildiğinden emin olun

Form doğrulaması için yerleşik HTML özellikleri, veriler arka uç sunucunuza gönderilmeden önce kullanıcıları geçersiz form alanları hakkında bilgilendirmek için mükemmeldir. Kullanıcılar bir form alanından ayrılır ayrılmaz bildirim almak istemez misiniz?

Bir öğe odağını kaybettiğinde tetiklenen blur etkinliğini dinleyin ve bir form kontrolünün geçersiz olup olmadığını tespit etmek için ValidityState arayüzünü kullanın.

Kullanıcıların girdikleri şifreyi görebildiğinden emin olun

<input type="password"> için girilen metin, kullanıcıların gizliliğine saygı duymak için varsayılan olarak gizlenir. Girilmiş metnin görünürlüğünü değiştiren bir <button> göstererek kullanıcıların şifrelerini girmelerine yardımcı olun.

Demoyu deneyin. Şifreyi Göster <button> simgesini kullanarak girilen metnin görünürlüğünü açın veya kapatın. Nasıl çalışır? Şifreyi Göster'i tıkladığınızda şifre alanının type özelliği type="password" yerine type="text" olarak değişir ve <button> metni "Şifreyi Gizle" olarak değişir.

Şifreyi Göster düğmesine erişilebilir olması önemlidir. aria-controls özelliğini kullanarak <button> öğesini <input type="password"> öğesine bağlayın.

Ekran okuyucu kullanıcılarını şifrenin şu anda gösterilip gösterilmediği konusunda bilgilendirmek için aria-live="polite" ile gizli bir öğe kullanın ve öğenin metnini buna göre değiştirin. Ekran okuyucu kullanıcılarının, şifrenin ne zaman gösterildiğini ve ekranlarına bakan başka bir kullanıcı tarafından görünür olup olmadığını bilmesini sağlamak önemlidir.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Şifre gösterme seçeneğini uygulama hakkında daha fazla bilgi edinin.

Kaynaklar