फ़ॉर्म इवेंट का जवाब देना
JavaScript का इस्तेमाल, अपने फ़ॉर्म में लोगों के इंटरैक्शन का जवाब देने, फ़ॉर्म के अन्य फ़ील्ड दिखाने, फ़ॉर्म सबमिट करने वगैरह के लिए किया जा सकता है.
फ़ॉर्म में अन्य कंट्रोल भरने में उपयोगकर्ताओं की मदद करना
मान लें कि आपने एक सर्वे फ़ॉर्म बनाया है. जब कोई उपयोगकर्ता एक विकल्प चुनता है, तो आपको उससे जुड़ा खास सवाल पूछने के लिए एक और <input>
दिखाना होता है.
सिर्फ़ काम का <input>
एलिमेंट कैसे दिखाया जा सकता है?
किसी <input>
को दिखाने के लिए, JavaScript का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब उससे जुड़ा <input type="radio">
फ़िलहाल चुना गया हो.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
डेमो के लिए JavaScript कोड देखें.
क्या आपने aria-controls
और aria-expanded
एट्रिब्यूट पर ध्यान दिया है?
इन
ARIA एट्रिब्यूट
का इस्तेमाल करें, ताकि स्क्रीन रीडर इस्तेमाल करने वालों को यह समझने में मदद मिल सके कि कोई अतिरिक्त फ़ॉर्म कंट्रोल कब दिखाया या छिपाया जाता है.
पक्का करें कि उपयोगकर्ता, पेज को छोड़े बिना फ़ॉर्म सबमिट कर सकें
मान लें कि आपके पास एक टिप्पणी फ़ॉर्म है. अगर कोई पाठक टिप्पणी करता है और फ़ॉर्म सबमिट करता है, तो यह बेहतर होगा कि उसे पेज रीफ़्रेश किए बिना ही टिप्पणी दिखे.
इसके लिए, onsubmit
इवेंट सुनें. इसके बाद, डिफ़ॉल्ट व्यवहार को रोकने के लिए event.preventDefault()
का इस्तेमाल करें और
फ़ेच एपीआई का इस्तेमाल करके FormData
भेजें.
आपकी बैकएंड स्क्रिप्ट यह पता लगा सकती है कि POST
अनुरोध, ब्राउज़र से मिला है या फ़ॉर्म एलिमेंट के action
एट्रिब्यूट का इस्तेमाल करके, जहां method="post"
है) या JavaScript से मिला अनुरोध, जैसे कि fetch()
अनुरोध.
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
स्क्रीन रीडर का इस्तेमाल करने वालों को, कॉन्टेंट में लगातार होने वाले बदलावों के बारे में हमेशा सूचना दें.
अपने एचटीएमएल में, aria-live="polite"
एट्रिब्यूट के साथ कोई एलिमेंट जोड़ें.
साथ ही, बदलाव करने के बाद एलिमेंट का कॉन्टेंट अपडेट करें.
उदाहरण के लिए, किसी उपयोगकर्ता के टिप्पणी सबमिट करने के बाद, टेक्स्ट को 'आपकी टिप्पणी सफलतापूर्वक पोस्ट कर दी गई' पर अपडेट करें.
ARIA लाइव रीजन के बारे में ज़्यादा जानें.
JavaScript से पुष्टि करना
पक्का करें कि गड़बड़ी के मैसेज, आपकी साइट की स्टाइल और टोन के मुताबिक हों
डिफ़ॉल्ट गड़बड़ी के मैसेज के शब्द ब्राउज़र के हिसाब से अलग-अलग होते हैं.
यह कैसे पक्का किया जा सकता है कि सभी उपयोगकर्ताओं को एक जैसा मैसेज दिखे और वह आपकी साइट के स्टाइल और टोन के हिसाब से हो?
गड़बड़ी के मैसेज के बारे में बताने के लिए, Constraint वैलिडेशन एपीआई
के setCustomValidity()
तरीके का इस्तेमाल करें.
पक्का करें कि उपयोगकर्ताओं को गड़बड़ियों के बारे में रीयल टाइम में सूचना दी जाए
फ़ॉर्म की पुष्टि के लिए पहले से मौजूद एचटीएमएल सुविधाएं, उपयोगकर्ताओं को आपके बैकएंड में डेटा भेजने से पहले अमान्य फ़ॉर्म फ़ील्ड के बारे में सूचना देने का बेहतरीन तरीका हैं. क्या उपयोगकर्ताओं के फ़ॉर्म फ़ील्ड को छोड़ते ही उन्हें सूचना देना सही नहीं होगा?
उस
blur
इवेंट को सुनें जो किसी एलिमेंट के फ़ोकस खो जाने पर चालू होता है. साथ ही,
ValidityState
इंटरफ़ेस का इस्तेमाल करके, यह पता लगाएं कि फ़ॉर्म कंट्रोल अमान्य है या नहीं.
पक्का करें कि उपयोगकर्ता उनका डाला पासवर्ड देख सकते हैं
<input type="password">
के लिए डाला गया टेक्स्ट, उपयोगकर्ताओं की निजता को ध्यान में रखते हुए डिफ़ॉल्ट रूप से छिपा दिया जाता है.
डाले गए टेक्स्ट को टॉगल करने के लिए, <button>
दिखाकर उपयोगकर्ताओं को पासवर्ड डालने में मदद करें.
डेमो आज़माएं. पासवर्ड दिखाएं <button>
का इस्तेमाल करके, डाले गए टेक्स्ट के दिखने की सेटिंग को टॉगल करें.
यह कैसे काम करता है? पासवर्ड दिखाएं पर क्लिक करने पर, पासवर्ड फ़ील्ड की type
एट्रिब्यूट type="password"
से type="text"
में बदल जाता है. साथ ही, <button>
टेक्स्ट, 'पासवर्ड छिपाएं' में बदल जाता है.
पासवर्ड दिखाएं बटन को ऐक्सेस करने लायक बनाना ज़रूरी है.
aria-controls
एट्रिब्यूट का इस्तेमाल करके, <button>
को <input type="password">
से कनेक्ट करें.
अगर स्क्रीन रीडर का इस्तेमाल करने वालों को इस बारे में सूचना मिलती है कि फ़िलहाल पासवर्ड दिख रहा है या छिपाया गया है, तो aria-live="polite"
वाले छिपे हुए एलिमेंट का इस्तेमाल करें और उसी हिसाब से टेक्स्ट में बदलाव करें.
यह ज़रूरी है कि स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को जब कोई पासवर्ड दिखे और उसकी स्क्रीन देख रहे किसी दूसरे व्यक्ति को दिखे, तो उसे इसकी जानकारी मिल सके.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
पासवर्ड दिखाएं विकल्प लागू करने के बारे में ज़्यादा जानें.