JavaScript

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

JavaScript का इस्तेमाल करके, अपने फ़ॉर्म पर उपयोगकर्ता के इंटरैक्शन का जवाब दिया जा सकता है. साथ ही, फ़ॉर्म के अन्य फ़ील्ड दिखाए जा सकते हैं, फ़ॉर्म सबमिट किया जा सकता है, और बहुत कुछ किया जा सकता है.

उपयोगकर्ताओं को फ़ॉर्म के अन्य कंट्रोल भरने में मदद करना

मान लें कि आपने एक सर्वे फ़ॉर्म बनाया है. उपयोगकर्ता के किसी विकल्प को चुनने के बाद, आपको चुने गए विकल्प से जुड़ा कोई सवाल पूछने के लिए, एक और <input> दिखाना है. सिर्फ़ काम का <input> एलिमेंट कैसे दिखाया जा सकता है?

JavaScript का इस्तेमाल करके, किसी <input> को सिर्फ़ तब दिखाया जा सकता है, जब उससे जुड़ा <input type="radio"> चुना गया हो.

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

आइए, डेमो के लिए JavaScript कोड पर नज़र डालते हैं. क्या आपने aria-controls और aria-expanded एट्रिब्यूट देखे हैं? स्क्रीन रीडर इस्तेमाल करने वाले लोगों को यह समझने में मदद करने के लिए कि फ़ॉर्म का कोई अतिरिक्त कंट्रोल कब दिखाया या छिपाया जाता है, इन ARIA एट्रिब्यूट का इस्तेमाल करें.

पक्का करें कि उपयोगकर्ता किसी पेज को छोड़े बिना फ़ॉर्म सबमिट कर सकें

मान लें कि आपके पास टिप्पणी करने के लिए कोई फ़ॉर्म है. जब कोई पाठक टिप्पणी जोड़ता है और फ़ॉर्म सबमिट करता है, तो बेहतर होगा कि उसे पेज रीफ़्रेश किए बिना तुरंत टिप्पणी दिखे.

ऐसा करने के लिए, onsubmit इवेंट को सुनें. इसके बाद, डिफ़ॉल्ट व्यवहार को रोकने के लिए event.preventDefault() का इस्तेमाल करें और Fetch API का इस्तेमाल करके FormData भेजें.

Browser Support

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

Source

आपकी बैकएंड स्क्रिप्ट यह जांच सकती है कि POST अनुरोध, ब्राउज़र से आया है या JavaScript से. उदाहरण के लिए, fetch() अनुरोध. इसके लिए, फ़ॉर्म एलिमेंट के action एट्रिब्यूट का इस्तेमाल किया जाता है, जहां method="post" होता है.

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

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

लाइव स्ट्रीम के लिए ARIA एट्रिब्यूट के ज़रिए तय किए गए क्षेत्रों के बारे में ज़्यादा जानें.

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

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

गड़बड़ी के डिफ़ॉल्ट मैसेज अलग-अलग ब्राउज़र में अलग-अलग होते हैं. यह कैसे पक्का किया जा सकता है कि सभी उपयोगकर्ताओं को एक ही मैसेज दिखे और वह मैसेज आपकी साइट की स्टाइल और टोन के मुताबिक हो? गड़बड़ी के मैसेज तय करने के लिए, Constraint Validation API के 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>

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

संसाधन