JavaScript

फ़ॉर्म इवेंट का जवाब देना

आपके पास अपने फ़ॉर्म पर उपयोगकर्ता इंटरैक्शन का जवाब देने, दूसरे फ़ॉर्म फ़ील्ड दिखाने, फ़ॉर्म सबमिट करने वगैरह के लिए 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 के लिए अनुरोध, ब्राउज़र से मिला है या नहीं (जहां method="post" है, किसी फ़ॉर्म एलिमेंट के action एट्रिब्यूट का इस्तेमाल करके) या JavaScript से, जैसे कि fetch() अनुरोध.

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

स्क्रीन रीडर का इस्तेमाल करने वालों को, कॉन्टेंट में होने वाले डाइनैमिक बदलावों के बारे में हमेशा सूचना दें. अपने एचटीएमएल में aria-live="polite" एट्रिब्यूट वाला एलिमेंट जोड़ें. और बदलाव के बाद तत्व की सामग्री को अपडेट करें. उदाहरण के लिए, किसी उपयोगकर्ता के टिप्पणी सबमिट करने के बाद टेक्स्ट को 'आपकी टिप्पणी पोस्ट कर दी गई थी' में अपडेट करें.

ARIA लाइव रीजन के बारे में ज़्यादा जानें.

JavaScript की मदद से पुष्टि करना

पक्का करें कि गड़बड़ी के मैसेज, आपकी साइट की स्टाइल और टोन के मुताबिक हों

ब्राउज़र के हिसाब से, गड़बड़ी के डिफ़ॉल्ट मैसेज लिखने में अंतर होता है. यह कैसे पक्का किया जा सकता है कि सभी लोगों को एक ही मैसेज दिखे. और क्या मैसेज आपकी साइट की स्टाइल और टोन से मेल खाता हो? setCustomValidity() का इस्तेमाल करें Constraint Validation API का तरीका का इस्तेमाल करें.

पक्का करें कि उपयोगकर्ताओं को गड़बड़ियों के बारे में रीयल टाइम में सूचना मिले

फ़ॉर्म की पुष्टि के लिए पहले से मौजूद एचटीएमएल सुविधाएं, उपयोगकर्ताओं को सूचना भेजने के लिए बेहतरीन होती हैं आपके बैकएंड पर डेटा भेजे जाने से पहले, अमान्य फ़ॉर्म फ़ील्ड के बारे में जानकारी. क्या उपयोगकर्ताओं को फ़ॉर्म फ़ील्ड से बाहर निकलते ही सूचित करना अच्छी बात नहीं है?

इसे सुनें 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>

पासवर्ड दिखाएं विकल्प को लागू करने के बारे में ज़्यादा जानें.

संसाधन

• FormData
• कंस्ट्रेंट की पुष्टि करने वाला एपीआई
• <input type="password">