JavaScript

Form etkinliklerine yanıt verme

Formunuzdaki kullanıcı etkileşimlerine yanıt vermek, ek form alanları göstermek, form göndermek ve daha pek çok şey için JavaScript'i kullanabilirsiniz.

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

Bir anket formu oluşturduğunuzu düşünün. Kullanıcı bir seçeneği belirledikten sonra bu seçimle ilgili belirli bir soru sormak için ek bir <input> gösterilmesini isteyebilirsiniz. Yalnızca alakalı <input> öğesini nasıl gösterebilirsiniz?

<input> öğesini yalnızca ilişkilendirilmiş <input type="radio"> seçiliyken göstermek için JavaScript'i kullanabilirsiniz.

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

Demonun JavaScript koduna bakalım. aria-controls ve aria-expanded özelliklerini fark ettiniz mi? Ekran okuyucu kullanıcılarının, ek bir form kontrolünün ne zaman gösterildiğini veya gizleneceğini anlamalarına yardımcı olmak için bu ARIA özelliklerini kullanın.

Kullanıcıların sayfadan ayrılmadan form gönderebildiğinden emin olun

Bir yorum formunuz olduğunu varsayalım. Okuyucu, yorum ekleyip formu gönderdiğinde, sayfayı yenilemeden yorumu hemen görebilmelidir.

Bunun için onsubmit etkinliğini dinleyin, ardından varsayılan davranışı engellemek için event.preventDefault() politikasını kullanın ve Fetch API'yi kullanarak FormData gönderin.

Tarayıcı Desteği

  • 42
  • 14
  • 39
  • 10.1

Kaynak

Arka uç komut dosyanız, POST isteğinin tarayıcıdan mı (method="post" olduğunda bir form öğesinin action özelliğini kullanarak) yoksa JavaScript'ten mi (ör. fetch() isteği) gelen olarak göründüğünü kontrol edebilir.

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

Dinamik içerik değişiklikleri konusunda ekran okuyucu kullanıcılarını her zaman bilgilendir. 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 stiline ve üslubuna uygun olmasını sağlayın

Varsayılan hata mesajlarının içeriği tarayıcılar arasında farklılık gösterir. Aynı mesajın tüm kullanıcılara gösterilmesini ve bu 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 gerçek zamanlı olarak bilgilendirilmesini sağlama

Form doğrulamada yerleşik HTML özellikleri, veriler arka ucunuza gönderilmeden önce kullanıcıları geçersiz form alanları hakkında bilgilendirmek için mükemmeldir. Kullanıcıları form alanından çıkar çıkmaz bilgilendirmek harika olmaz mıydı?

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ğini korumak amacıyla varsayılan olarak gizlenir. Girilen metnin görünürlüğünü açıp kapatmak için <button> simgesi göstererek kullanıcıların şifrelerini girmelerine yardımcı olun.

Demoyu deneyin. Şifreyi Göster'i <button> kullanarak girilen metnin görünürlüğünü değiştirin. İşleyiş şekli nasıldır? Şifreyi Göster tıklandığında şifre alanının type özelliği type="password" iken type="text" olarak değiştirilir ve <button> metni "Şifreyi Gizle" olarak değişir.

Şifreyi Göster düğmesinin erişilebilir olması önemlidir. aria-controls özelliğini kullanarak <button> ile <input type="password"> arasında bağlantı kurun.

Şifrenin şu anda gösterildiğini veya gizlendiğini ekran okuyucu kullanıcılarına bildirmek için gizli bir aria-live="polite" öğesi kullanın ve bu öğenin metnini uygun şekilde değiştirin. Ekran okuyucu kullanıcılarının, bir şifrenin ne zaman gösterildiğini ve ekranına bakan diğer kişiler tarafından görülebildiğini bilmesini sağlamak önemlidir.

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

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

Kaynaklar