JavaScript

Form etkinliklerine yanıt verme

JavaScript'i, formunuzdaki kullanıcı etkileşimlerine yanıt vermek, ek form alanlarını ortaya çıkarmak, form göndermek ve daha pek çok işlem için kullanabilirsiniz.

Kullanıcıların ek form kontrollerini doldurmalarına yardımcı olun

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

Bir <input> öğesini, yalnızca ilişkilendirilmiş <input type="radio"> seçiliyken görüntülemek için JavaScript kullanabilirsiniz.

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

Şimdi Demonun JavaScript kodu. aria-controls ve aria-expanded özelliklerini fark ettiniz mi? Bunları kullan ARIA özellikleri kullanıma sunduk.

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

Bir yorum formunuz olduğunu düşünün. Okuyucu, yorum ekleyip formu gönderdiğinde sayfayı yenilemeden yorumu hemen görebilseler iyi olur.

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

Arka uç komut dosyanız, POST isteğinin tarayıcıdan gelip gelmediğini kontrol edebilir (method="post" olan bir form öğesinin action özelliği kullanılarak) veya JavaScript'ten (ör. fetch() isteği).

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 stiline ve üslubuna uygun olduğundan emin olun

Varsayılan hata mesajlarının dili tarayıcılar arasında farklılık gösterir. Aynı mesajın tüm kullanıcılara gösterilmesini, ve mesajın sitenizin stil ve üslubuna uygun olduğundan emin misiniz? setCustomValidity()'ı kullanma Constraint Validation API yöntemi kullanabilirsiniz.

Kullanıcıların hatalar hakkında gerçek zamanlı olarak bilgilendirilmesini sağlayın

Form doğrulamaya yönelik yerleşik HTML özellikleri, kullanıcıları bilgilendirmek ve geçersiz form alanlarıyla ilgili kontroller yapın. Kullanıcılara bir form alanından ayrılır çıkmaz bilgilendirilmeleri uygun olmaz mı?

Şunu dinle: blur bir öğenin odağı kaybolduğunda tetiklenen etkinliği ve ValidityState arayüzünü kullanarak bir form kontrolünün geçersiz olup olmadığını belirleyebilirsiniz.

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

<input type="password"> için girilen metin varsayılan olarak belirsizdir. yardımcı olan çözümleri ayrıntılı olarak inceleyeceğiz. Girilen metnin görünürlüğünü değiştirmek için bir <button> göstererek kullanıcıların şifrelerini girmelerine yardımcı olun.

Demoyu deneyin. Şifreyi Göster <button> işlevini kullanarak girilen metnin görünürlüğünü değiştirebilirsiniz. Nasıl çalışır? Şifreyi Göster'i tıklayın. şifre alanının type özelliğini type="password" iken type="text" olarak değiştirir, 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.

Şifre şu anda gösteriliyor veya gizli durumdaysa ekran okuyucu kullanıcılarına bildirim göndermek için: aria-live="polite" ile gizli bir öğe kullanın ve metnini uygun şekilde değiştirin. Ekran okuyucu kullanıcılarının bir şifrenin ne zaman gösterildiğini ve ekranına bakan başka biri tarafından ne zaman göründüğünü bilmesi ö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

• FormData
• Constraint Validation API (Kısıtlama Doğrulama API'si)
• <input type="password">