फ़ॉर्म

ज़्यादातर साइटों और ऐप्लिकेशन में वेब फ़ॉर्म शामिल होता है. DoWebsitesकी ज़रूरतदेखेंदेखेंबिलकुलहरसभीBrowser.com में, चुटकुलों के लिए भले ही कोई फ़ॉर्म न हो, लेकिन Machineलर्निंगWorkshop.com (MLW) का फ़ॉर्म भी हो सकता है. यह हालांकि, अप्रैल फूल डे के मज़ाक़ के तौर पर शुरू हुआ था, लेकिन यह बिलकुल नकली है. MLW का मुख्य "कॉल टू ऐक्शन" एक रजिस्ट्रेशन फ़ॉर्म है, ताकि मशीनें वर्कशॉप के लिए साइन अप कर सकें. यह फ़ॉर्म <form> एलिमेंट में शामिल होता है.

एचटीएमएल <form> एलिमेंट ऐसे दस्तावेज़ के लैंडमार्क की पहचान करता है जिसमें जानकारी सबमिट करने के लिए, इंटरैक्टिव कंट्रोल मौजूद हैं. <form> में नेस्ट किए गए आपको सभी इंटरैक्टिव (और नॉन-इंटरैक्टिव) फ़ॉर्म कंट्रोल मिलेंगे, जो उस फ़ॉर्म को बनाते हैं.

एचटीएमएल असरदार है. यह सेक्शन, एचटीएमएल की खूबियों पर फ़ोकस करता है. इसमें यह बताया गया है कि JavaScript को जोड़े बिना एचटीएमएल क्या कर सकता है. यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, फ़ॉर्म डेटा क्लाइंट-साइड का इस्तेमाल करने पर आम तौर पर सीएसएस या JavaScript शामिल होता है. इनके बारे में यहां नहीं बताया गया है. लर्निंग फ़ॉर्म का एक पूरा कोर्स है. हम यहां उस सेक्शन का डुप्लीकेट नहीं बनाएंगे. हालांकि, हम फ़ॉर्म में ऐसे कई कंट्रोल और एचटीएमएल एट्रिब्यूट की जानकारी देंगे जो उन्हें बेहतर बनाएंगे.

फ़ॉर्म की मदद से, उपयोगकर्ताओं को अपनी वेबसाइट या ऐप्लिकेशन से इंटरैक्ट करने, डाली गई जानकारी की पुष्टि करने, और डेटा को सर्वर पर सबमिट करने की सुविधा दी जा सकती है. एचटीएमएल एट्रिब्यूट की मदद से, उपयोगकर्ता के लिए फ़ॉर्म के कंट्रोल चुनने या कोई वैल्यू डालने की ज़रूरत पड़ सकती है. एचटीएमएल एट्रिब्यूट की मदद से, ऐसी खास शर्तें तय की जा सकती हैं जिनका इस्तेमाल वैल्यू के लिए मान्य होना ज़रूरी है. जब उपयोगकर्ता, फ़ॉर्म सबमिट करने की कोशिश करता है, तो फ़ॉर्म कंट्रोल की सभी वैल्यू क्लाइंट-साइड कंस्ट्रेंट की पुष्टि से गुज़रती हैं. जब तक डेटा ज़रूरी शर्त के मुताबिक नहीं हो जाता, तब तक फ़ॉर्म को सबमिट होने से रोका जा सकता है. इनमें JavaScript के बिना ही सभी वैल्यू शामिल हैं. इस सुविधा को बंद भी किया जा सकता है: novalidate एट्रिब्यूट को <form> पर या आम तौर पर किसी बटन पर formnovalidate सेट करने से, फ़ॉर्म डेटा को बाद में पूरा करने के लिए सेव किया जाता है. ऐसा करने से, पुष्टि करने की प्रोसेस रुक जाती है.

फ़ॉर्म सबमिट करना

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

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

आसान फ़ॉर्म में आपको <form> एलिमेंट, कुछ फ़ॉर्म इनपुट, और 'सबमिट करें' बटन की ज़रूरत होगी. हालांकि, फ़ॉर्म सबमिट करने के अलावा और भी बहुत कुछ होता है.

<form> एलिमेंट के एट्रिब्यूट, एचटीटीपी तरीका सेट करते हैं. इसके लिए, फ़ॉर्म सबमिट किया जाता है और फ़ॉर्म सबमिशन को प्रोसेस करने वाला यूआरएल होता है. हां, फ़ॉर्म सबमिट और प्रोसेस किए जा सकते हैं. साथ ही, बिना किसी JavaScript के एक नया पेज लोड किया जा सकता है. <form> एलिमेंट ज़्यादा असरदार है.

<form> एलिमेंट के action और method एट्रिब्यूट की वैल्यू से उस यूआरएल के बारे में पता चलता है जो फ़ॉर्म का डेटा प्रोसेस करता है और डेटा सबमिट करने के लिए इस्तेमाल किया गया एचटीटीपी तरीका. डिफ़ॉल्ट रूप से, फ़ॉर्म का डेटा मौजूदा पेज पर भेजा जाता है. इसके अलावा, action एट्रिब्यूट को उस यूआरएल पर सेट करें जहां डेटा भेजा जाना है.

भेजा गया डेटा, फ़ॉर्म के अलग-अलग फ़ॉर्म कंट्रोल के नाम/वैल्यू पेयर से बना होता है. डिफ़ॉल्ट रूप से, इसमें name वाले फ़ॉर्म में नेस्ट किए गए सभी फ़ॉर्म कंट्रोल शामिल होते हैं. हालांकि, form एट्रिब्यूट की मदद से, <form> के बाहर फ़ॉर्म कंट्रोल शामिल किए जा सकते हैं. साथ ही, <form> में नेस्ट किए गए फ़ॉर्म कंट्रोल को हटाया जा सकता है. फ़ॉर्म कंट्रोल और <fieldset> के साथ काम करता है. form एट्रिब्यूट, कंट्रोल से जुड़े फ़ॉर्म की वैल्यू के तौर पर id की वैल्यू लेता है. यह ज़रूरी नहीं है कि यह उसी फ़ॉर्मैट में हो जिसमें वह नेस्ट किया गया है. इसका मतलब है कि फ़ॉर्म कंट्रोल को <form> में फ़िज़िकल तौर पर नेस्ट करने की ज़रूरत नहीं है.

method एट्रिब्यूट, अनुरोध का एचटीटीपी प्रोटोकॉल बताता है. आम तौर पर, GET या POST होता है. GET के साथ, फ़ॉर्म डेटा को action के यूआरएल के साथ name=value पेयर की पैरामीटर स्ट्रिंग के तौर पर भेजा जाता है.

POST के साथ, डेटा को एचटीटीपी अनुरोध के मुख्य हिस्से में जोड़ा जाता है. पासवर्ड और क्रेडिट कार्ड की जानकारी जैसा सुरक्षित डेटा भेजते समय, हमेशा POST का इस्तेमाल करें.

एक DIALOG तरीका भी है. अगर <form method="dialog">, <dialog> के अंदर है, तो फ़ॉर्म सबमिट करने से डायलॉग बंद हो जाएगा. सबमिट किया गया इवेंट होता है. हालांकि, डेटा को न तो मिटाया जाता है और न ही सबमिट किया जाता है. फिर से, JavaScript के बिना. इस बारे में डायलॉग सेक्शन में बताया गया है. बस ध्यान रखें कि इससे फ़ॉर्म सबमिट नहीं होता. इसलिए, शायद आप सबमिट बटन में formmethod="dialog" और formnovalidate, दोनों को शामिल करना चाहें.

फ़ॉर्म के बटन में, इस सेक्शन की शुरुआत में दिए गए एट्रिब्यूट से ज़्यादा एट्रिब्यूट हो सकते हैं. अगर बटन में formaction, formenctype, formmethod, formnovalidate या formtarget एट्रिब्यूट शामिल है, तो फ़ॉर्म सबमिट करने के लिए बटन पर सेट की गई वैल्यू को <form> पर सेट किए गए action, enctype, method, और target के बजाय प्राथमिकता दी जाएगी. पाबंदी की पुष्टि, फ़ॉर्म सबमिट करने से पहले होती है. हालांकि, ऐसा सिर्फ़ तब होता है, जब चालू किए गए 'सबमिट करें' बटन पर formnovalidate न हो और <form> पर novalidate न हो.

यह जानने के लिए कि फ़ॉर्म सबमिट करने के लिए किस बटन का इस्तेमाल किया गया है, बटन को name दें. बिना नाम या वैल्यू वाले बटन, फ़ॉर्म सबमिट करते समय फ़ॉर्म के डेटा के साथ नहीं भेजे जाते.

फ़ॉर्म सबमिट करने के बाद

जब उपयोगकर्ता पूरा ऑनलाइन फ़ॉर्म सबमिट करता है, तो उससे जुड़े फ़ॉर्म कंट्रोल के नाम और वैल्यू सबमिट हो जाती हैं. यह नाम, name एट्रिब्यूट की वैल्यू के तौर पर दिया जाता है. ये वैल्यू, value एट्रिब्यूट के कॉन्टेंट या उपयोगकर्ता की डाली गई या चुनी गई वैल्यू से मिलती हैं. <textarea> की वैल्यू उसका इंटरनल टेक्स्ट होता है. <select> की वैल्यू, चुने गए <option> का value है. अगर <option> में कोई value एट्रिब्यूट शामिल नहीं है, तो यह वैल्यू चुने गए विकल्प के अंदर के टेक्स्ट के तौर पर दिखेगी.

<form method="GET">
  <label for="student">Pick a student:</label>
  <select name="student" id="student">
    <option value="hoover">Hoover Sukhdeep</option>
    <option>Blendan Smooth</option>
    <option value="toasty">Toasty McToastface</option>
  </select>
  <input type="submit" value="Submit Form">
</form>

किसी छात्र/छात्रा को चुनें: हूवर सुखदीप ब्लेंडन स्मूद टोस्टी मैकटोस्टफ़ेस

"हूवर सुखदीप" चुनने पर (या कुछ न करने से, जैसा ब्राउज़र दिखाता है और इसलिए डिफ़ॉल्ट रूप से पहला विकल्प वैल्यू चुनता है) और फिर 'सबमिट करें' बटन पर क्लिक करने से यह पेज फिर से लोड होगा और यूआरएल इस पर सेट हो जाएगा:

https://web.dev/learn/html/forms?student=hoover

दूसरे विकल्प में value एट्रिब्यूट नहीं है, इसलिए इनर टेक्स्ट को वैल्यू के तौर पर सबमिट किया गया है. "ब्लेंडन स्मूद" चुनने और 'सबमिट करें' बटन पर क्लिक करने से, यह पेज फिर से लोड हो जाएगा और यूआरएल इस पर सेट हो जाएगा:

https://web.dev/learn/html/forms?student=Blendan+Smooth

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

इनपुट के 22 टाइप हैं. इसलिए, हम इन सभी तरह के इनपुट नहीं दे सकते. बस इस बात का ध्यान रखें कि जब आप उपयोगकर्ता से जानकारी डालना चाहें, तो वैल्यू डालना ज़रूरी नहीं है और अक्सर यह गलत आइडिया होता है. <input> एलिमेंट के लिए, जहां उपयोगकर्ता वैल्यू में बदलाव नहीं कर सकता, आपको हमेशा कोई वैल्यू शामिल करनी चाहिए. इसमें hidden, radio, checkbox, submit, button, और reset जैसे इनपुट एलिमेंट शामिल हैं.

फ़ॉर्म कंट्रोल के लिए यूनीक name का इस्तेमाल करने से, सर्वर साइड डेटा प्रोसेसिंग आसान हो जाती है. इसके इस्तेमाल का सुझाव दिया जाता है. इसमें चेकबॉक्स और रेडियो बटन को अपवाद माना जा सकता है.

रेडियो बटन

अगर आपने कभी देखा है कि जब रेडियो बटन के ग्रुप में से कोई रेडियो बटन चुना जाता है, तो एक बार में सिर्फ़ एक रेडियो बटन चुना जा सकता है. ऐसा name एट्रिब्यूट की वजह से होता है. यह 'सिर्फ़ एक चुना जा सकने वाला' इफ़ेक्ट, ग्रुप में मौजूद हर रेडियो बटन को एक जैसा name देकर बनाया जाता है.

ग्रुप के लिए name यूनीक होना चाहिए: अगर आपने गलती से दो अलग-अलग ग्रुप के लिए एक ही name का इस्तेमाल किया है, तो दूसरे ग्रुप में मौजूद रेडियो बटन को चुनने से, पहले ग्रुप में एक ही name से चुने गए सभी विकल्प से चुने हुए का निशान हट जाएगा.

चुने गए रेडियो बटन के value के साथ, name को फ़ॉर्म के साथ सबमिट किया जाता है. पक्का करें कि हर रेडियो बटन में काम का (और आम तौर पर यूनीक) value हो. नहीं चुने गए रेडियो बटन की वैल्यू नहीं भेजी जाती हैं.

किसी पेज पर आप जितने चाहें उतने रेडियो ग्रुप रख सकते हैं. हर ग्रुप अलग से काम कर सकता है, बशर्ते हर ग्रुप का name ग्रुप अलग हो.

अगर आपको समान नाम वाले ग्रुप में, चुने गए रेडियो बटन में से किसी एक के साथ पेज लोड करना है, तो checked एट्रिब्यूट शामिल करें. यह रेडियो बटन, :default सीएसएस स्यूडो क्लास से मेल खाएगा, भले ही उपयोगकर्ता किसी दूसरे रेडियो को चुने. फ़िलहाल चुना गया रेडियो बटन, :checked स्यूडो क्लास से मेल खाता है.

अगर उपयोगकर्ता को रेडियो बटन के ग्रुप से रेडियो कंट्रोल चुनना है, तो कम से कम एक कंट्रोल में required एट्रिब्यूट जोड़ें. किसी ग्रुप के रेडियो बटन में required को शामिल करने से, फ़ॉर्म सबमिट करने के लिए एक विकल्प चुनना ज़रूरी होता है. हालांकि, ज़रूरी नहीं है कि यह, मान्य होने के लिए चुने गए एट्रिब्यूट वाला रेडियो हो. साथ ही, <legend> में साफ़ तौर पर बताएं कि फ़ॉर्म कंट्रोल ज़रूरी है. हर बटन के साथ रेडियो बटन के ग्रुप को लेबल करने की जानकारी बाद में दी गई है.

चेकबॉक्स

ग्रुप में मौजूद सभी चेकबॉक्स पर एक ही name होना चाहिए. सिर्फ़ चुनिंदा चेकबॉक्स के name और value फ़ॉर्म के साथ सबमिट किए गए हैं. अगर आपने एक ही नाम वाले कई चेकबॉक्स चुने हैं, तो एक ही नाम को अलग-अलग वैल्यू के साथ सबमिट किया जाएगा. अगर आपके पास एक ही नाम वाले कई फ़ॉर्म कंट्रोल हैं, तो सभी चेकबॉक्स को ऐंपरसेंड से अलग करके सबमिट किया जाएगा. भले ही, वे सभी चेकबॉक्स न हों.

अगर आप चेकबॉक्स में value शामिल नहीं करते हैं, तो चुने गए चेकबॉक्स की वैल्यू डिफ़ॉल्ट रूप से on हो जाएगी. यह वैल्यू शायद काम की न हो. अगर chk नाम के तीन चेकबॉक्स हैं और उन पर सही का निशान लगा है, तो फ़ॉर्म सबमिशन को समझा नहीं जा सकेगा:

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

चेकबॉक्स को ज़रूरी बनाने के लिए, required एट्रिब्यूट जोड़ें. उपयोगकर्ता को हमेशा इसकी सूचना दें कि चेकबॉक्स पर सही का निशान लगा होना चाहिए या जब किसी फ़ॉर्म को कंट्रोल करने की ज़रूरत हो. किसी चेकबॉक्स में required जोड़ने से, सिर्फ़ उसी चेकबॉक्स पर असर पड़ता है. इस चेकबॉक्स का असर, इसी नाम वाले दूसरे चेकबॉक्स पर नहीं पड़ता.

लेबल और फ़ील्डसेट

उपयोगकर्ताओं को फ़ॉर्म भरने का तरीका जानने के लिए, फ़ॉर्म का ऐक्सेस होना ज़रूरी है. हर फ़ॉर्म कंट्रोल में एक लेबल होना चाहिए. फ़ॉर्म कंट्रोल के ग्रुप को भी लेबल किया जा सकता है. अलग-अलग इनपुट, चुनने, और टेक्स्ट वाले हिस्से <label> से लेबल किए जाते हैं. वहीं, फ़ॉर्म कंट्रोल के ग्रुप को <fieldset> के <legend> कॉन्टेंट के हिसाब से लेबल किया जाता है, जो उन्हें ग्रुप करता है.

पिछले उदाहरणों में, आपने देखा होगा कि 'सबमिट करें' बटन को छोड़कर हर फ़ॉर्म कंट्रोल में एक <label> था. लेबल ऐक्सेस किए जा सकने वाले नामों के साथ फ़ॉर्म कंट्रोल देते हैं. बटन को अपने कॉन्टेंट या वैल्यू के आधार पर, ऐक्सेस किया जा सकने वाला नाम मिलता है. बाकी सभी फ़ॉर्म कंट्रोल के लिए, <label> प्रॉपर्टी से जुड़े होने की ज़रूरत होती है. अगर जुड़ा हुआ कोई लेबल नहीं है, तो भी ब्राउज़र आपके फ़ॉर्म कंट्रोल को रेंडर करेगा, लेकिन उपयोगकर्ताओं को यह पता नहीं चलेगा कि उसे किस जानकारी की उम्मीद है.

किसी फ़ॉर्म कंट्रोल को <label> के साथ साफ़ तौर पर जोड़ने के लिए, <label> पर for एट्रिब्यूट शामिल करें: इसकी वैल्यू उस फ़ॉर्म कंट्रोल का id है जिससे यह जुड़ा है.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">

आपका नाम

लेबल को फ़ॉर्म कंट्रोल से जोड़ने के कई फ़ायदे हैं. लेबल, ऐक्सेस किए जा सकने वाले नाम से कंट्रोल देकर, फ़ॉर्म कंट्रोल को स्क्रीन रीडर इस्तेमाल करने वालों को ऐक्सेस करते हैं. लेबल "हिट एरिया" भी होते हैं; एरिया बड़ा करके वे साइट को उन उपयोगकर्ताओं के लिए ज़्यादा फ़ायदेमंद बनाते हैं जिन्हें परेशानी होने की समस्या है. अगर माउस का इस्तेमाल किया जा रहा है, तो "आपका नाम" लेबल पर कहीं भी क्लिक करके देखें. ऐसा करने से इनपुट फ़ोकस मिलता है.

इंप्लिसिट लेबल देने के लिए, शुरुआती और बंद <label> टैग के बीच फ़ॉर्म कंट्रोल शामिल करें. इसे स्क्रीन रीडर और पॉइंटर डिवाइस, दोनों से एक जैसे तरीके से ऐक्सेस किया जा सकता है. हालांकि, इसमें साफ़ तौर पर दिखने वाले लेबल की तरह स्टाइलिंग हुक नहीं मिलता.

<label>Your name
  <input type="text" name="name">
</label>

आपका नाम

लेबल "हिट एरिया" होते हैं, इसलिए किसी इंप्लिसिट लेबल में इंटरैक्टिव एलिमेंट शामिल न करें. इसके अलावा, इंप्लिसिट लेबल में लेबल वाले फ़ॉर्म कंट्रोल के अलावा, अन्य कोई इंटरैक्टिव कॉम्पोनेंट शामिल न करें. उदाहरण के लिए, अगर ब्राउज़र में एचटीएमएल को रेंडर करने के दौरान किसी लेबल में लिंक शामिल किया जाता है, तो फ़ॉर्म कंट्रोल करने के लिए लेबल पर क्लिक करने से, आपके उपयोगकर्ता उलझन में पड़ जाएंगे. हालांकि, उन्हें किसी नए पेज पर रीडायरेक्ट कर दिया जाएगा.

आम तौर पर, <label>, फ़ॉर्म कंट्रोल से पहले का होता है. हालांकि, रेडियो बटन और चेकबॉक्स के मामले में ऐसा नहीं होता. ऐसा करना ज़रूरी नहीं है. यह बस एक सामान्य UX पैटर्न है. 'लर्निंग फ़ॉर्म' सीरीज़ में फ़ॉर्म डिज़ाइन के बारे में जानकारी दी गई है.

रेडियो बटन और चेकबॉक्स के ग्रुप के लिए, लेबल उस फ़ॉर्म कंट्रोल का ऐक्सेस किया जा सकने वाला नाम देता है जिससे वह जुड़ा होता है. हालांकि, कंट्रोल के ग्रुप और उनके लेबल के लिए भी एक लेबल की ज़रूरत होती है. ग्रुप को लेबल करने के लिए, सभी एलिमेंट को <fieldset> में ग्रुप करें. साथ ही, <legend> ग्रुप का लेबल दें.

<fieldset>
  <legend>Who is your favorite student?</legend>
  <ul>
    <li>
      <label>
        <input type="radio" value="blendan" name="machine"> Blendan Smooth
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="toasty" name="machine"> Toasty McToastface
      </label>
    </li>
  </ul>
</fieldset>

इस उदाहरण में, इंप्लिसिट हर एक रेडियो बटन को <label> लेबल करता है और <legend> रेडियो बटन के ग्रुप के लिए लेबल देता है. <fieldset> को दूसरे <fieldset> के अंदर नेस्ट करना स्टैंडर्ड तरीका है. उदाहरण के लिए, अगर कोई फ़ॉर्म कई सवालों का सर्वे है, जिसे मिलते-जुलते सवालों के ग्रुप में बांटा गया है, तो "पसंदीदा छात्र/छात्रा" <fieldset> को "आपके पसंदीदा" के लेबल वाले एक और <fieldset> में नेस्ट किया जा सकता है:

<fieldset>
  <legend>Your favorites:</legend>
  <ul start="6">
    <li>
      <fieldset>
        <legend>Who is your favorite student?</legend>
        <ul>
          <li>
            <!-- the rest of the code here -->

इन एलिमेंट के डिफ़ॉल्ट रूप से दिखने की वजह से, इनका इस्तेमाल कम किया गया है. हालांकि, <legend> और <fieldset> को सीएसएस के साथ स्टाइल किया जा सकता है. सभी ग्लोबल एट्रिब्यूट के अलावा, <fieldset> में name, disabled, और form एट्रिब्यूट भी इस्तेमाल किए जा सकते हैं. किसी फ़ील्डसेट को बंद करने पर, नेस्ट किए गए सभी फ़ॉर्म कंट्रोल बंद हो जाते हैं. <fieldset> पर, न तो name और न ही form एट्रिब्यूट का ज़्यादा इस्तेमाल किया जाता है. JavaScript वाले फ़ील्डसेट को ऐक्सेस करने के लिए name का इस्तेमाल किया जा सकता है, लेकिन फ़ील्डसेट को ही सबमिट किए गए डेटा में शामिल नहीं किया जाता. इसमें नाम वाले फ़ॉर्म कंट्रोल को शामिल किया जाता है.

इनपुट टाइप और डाइनैमिक कीबोर्ड

जैसा कि पहले बताया जा चुका है, 22 अलग-अलग तरह के इनपुट हैं. कुछ मामलों में, जब कोई उपयोगकर्ता ऐसे डाइनैमिक कीबोर्ड वाले डिवाइस पर होता है जो ज़रूरत के हिसाब से ही दिखता है, जैसे कि फ़ोन, तो इस्तेमाल किए गए इनपुट के टाइप से यह तय होता है कि कीबोर्ड किस तरह का है. डिफ़ॉल्ट कीबोर्ड को, ज़रूरी इनपुट के टाइप के हिसाब से ऑप्टिमाइज़ किया जा सकता है. उदाहरण के लिए, tel टाइप में टेलीफ़ोन नंबर डालने के लिए ऑप्टिमाइज़ किया गया कीपैड दिखेगा; email में @ और . शामिल होते हैं; और url के डाइनैमिक कीबोर्ड में कोलन और स्लैश चिह्न शामिल होते हैं. माफ़ करें, iPhone में अब भी url इनपुट टाइप के लिए, डिफ़ॉल्ट डाइनैमिक कीबोर्ड में : को शामिल नहीं किया गया है.

iPhone और दो अलग-अलग Android फ़ोन पर <input type="tel"> के लिए कीबोर्ड:

iPhone और दो अलग-अलग Android फ़ोन पर <input type="email"> के लिए कीबोर्ड:

माइक्रोफ़ोन और कैमरे को ऐक्सेस किया जा रहा है

फ़ाइल इनपुट टाइप <input type="file"> के ज़रिए, फ़ॉर्म के ज़रिए फ़ाइलें अपलोड की जा सकती हैं. फ़ाइलें किसी भी तरह की हो सकती हैं. इन फ़ाइलों को accept एट्रिब्यूट की मदद से तय किया जा सकता है. साथ ही, इन्हें सीमित भी किया जा सकता है. स्वीकार किए जाने वाले फ़ाइल टाइप की सूची में, फ़ाइल एक्सटेंशन की कॉमा-सेपरेटेड लिस्ट हो सकती है. यह सूची ग्लोबल टाइप या ग्लोबल टाइप और एक्सटेंशन का कॉम्बिनेशन हो सकती है. उदाहरण के लिए, accept="video/*, .gif" कोई भी वीडियो फ़ाइल या ऐनिमेटेड GIF स्वीकार करता है. साउंड फ़ाइलों के लिए "audio/*", वीडियो फ़ाइलों के लिए "video/*", और इमेज फ़ाइलों के लिए "image/*" का इस्तेमाल करें.

मीडिया कैप्चर स्पेसिफ़िकेशन में बताए गए capture एट्रिब्यूट का इस्तेमाल तब किया जा सकता है, जब उपयोगकर्ता के कैमरे या माइक्रोफ़ोन का इस्तेमाल करके नई मीडिया फ़ाइल बनाई जा रही हो. लोगों को दिखने वाले इनपुट डिवाइसों के लिए वैल्यू को user पर या फ़ोन के बैक कैमरे या माइक्रोफ़ोन के लिए environment पर सेट किया जा सकता है. आम तौर पर, capture का इस्तेमाल बिना किसी वैल्यू के किया जाता है, क्योंकि उपयोगकर्ता यह चुनता है कि उसे किस इनपुट डिवाइस का इस्तेमाल करना है.

<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

पहले से मौजूद पुष्टि

फिर से, किसी JavaScript को शामिल किए बिना, एचटीएमएल अमान्य वैल्यू वाले फ़ॉर्म को सबमिट होने से रोक सकता है.

कुछ सीएसएस सिलेक्टर ऐसे हैं जो एचटीएमएल एट्रिब्यूट की मौजूदगी के आधार पर फ़ॉर्म कंट्रोल को मैच करते हैं. इनमें :required और :optional बूलियन required सेट है या नहीं; :default, अगर checked हार्ड कोड किया गया है; और :enabled या :disabled, इंटरैक्टिव है या {2/2.2} इस आधार पर.2.2disabled :read-write स्यूडोक्लास, contenteditable सेट और फ़ॉर्म कंट्रोल से एलिमेंट को मैच करती है, जिनमें डिफ़ॉल्ट रूप से बदलाव किया जा सकता है. जैसे, number, password, और text इनपुट टाइप. इनमें चेकबॉक्स, रेडियो बटन या hidden टाइप वगैरह शामिल नहीं होते. अगर आम तौर पर लिखे जाने वाले एलिमेंट में readonly एट्रिब्यूट सेट किया गया है, तो वह :read-only से मेल खाएगा.

जब उपयोगकर्ता फ़ॉर्म कंट्रोल में जानकारी डालता है, तब सीएसएस यूज़र इंटरफ़ेस (यूआई) सिलेक्टर, स्थिति के हिसाब से चालू और बंद हो जाएंगे. इनमें :valid, :invalid, :in-range, और :out-of-range शामिल हैं. जब उपयोगकर्ता किसी फ़ॉर्म कंट्रोल से बाहर निकल जाता है, तो या तो पूरी तरह से काम नहीं करने वाला :user-invalid या :user-valid स्यूडो क्लास मैच करेगा.

सीएसएस का इस्तेमाल करके, यह बताया जा सकता है कि जब उपयोगकर्ता फ़ॉर्म से इंटरैक्ट करता है, तब फ़ॉर्म के कंट्रोल की ज़रूरत है या नहीं. साथ ही, यह भी बताया जा सकता है कि यह मान्य है या नहीं. यहां तक कि सीएसएस का इस्तेमाल करके, लोगों को 'सबमिट करें' बटन पर क्लिक करने से रोका जा सकता है. ऐसा तब तक किया जा सकता है, जब तक फ़ॉर्म मान्य नहीं हो जाता:

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

यह सीएसएस स्निपेट एक तरह का पैटर्न है. आपका यूज़र इंटरफ़ेस (यूआई) समझने में आसान और साफ़ दिख सकता है. हालांकि, कई उपयोगकर्ता गड़बड़ी का मैसेज भेजने की सुविधा चालू करने के लिए, फ़ॉर्म सबमिट करने की कोशिश करते हैं. इस तरह से 'सबमिट करें' बटन को बंद दिखाना, कंस्ट्रेंट की पुष्टि करने की अनुमति नहीं देता है. इस सुविधा पर ज़्यादातर लोग भरोसा करते हैं.

लागू सीएसएस को यूज़र इंटरफ़ेस (यूआई) की मौजूदा स्थिति के आधार पर लगातार अपडेट किया जाता है. उदाहरण के लिए, email, number, url, और तारीख के टाइप जैसे इनपुट टाइप शामिल करने पर, अगर वैल्यू शून्य (खाली नहीं) है और मौजूदा वैल्यू मान्य ईमेल, नंबर, यूआरएल, तारीख या समय नहीं है, तो :invalid सीएसएस स्यूडो क्लास मैच होगी. लगातार होने वाला यह अपडेट, पहले से मौजूद एचटीएमएल कंस्ट्रेंट की पुष्टि करने से अलग होता है. यह पुष्टि सिर्फ़ तब की जाती है, जब उपयोगकर्ता फ़ॉर्म सबमिट करने की कोशिश करता है.

पहले से मौजूद कंस्ट्रेंट की पुष्टि करने की सुविधा, सिर्फ़ एचटीएमएल एट्रिब्यूट के साथ सेट की गई सीमाओं के लिए काम की है. :required और :valid/:invalid स्यूडोक्लास के आधार पर किसी एलिमेंट को स्टाइल किया जा सकता है. हालांकि, फ़ॉर्म सबमिट करते समय ब्राउज़र आपको required, pattern, min, max, और type एट्रिब्यूट के आधार पर गड़बड़ियों से जुड़े गड़बड़ी के मैसेज दिखाता है.

जब हम पसंदीदा छात्र/छात्रा को चुने बिना फ़ॉर्म सबमिट करने की कोशिश करते हैं, तो कंस्ट्रेंट की पुष्टि करने की प्रक्रिया में validityState.valueMissing गड़बड़ी की वजह से, फ़ॉर्म सबमिट नहीं हो पाता.

अगर कोई भी validityState प्रॉपर्टी true दिखाती है, तो सबमिशन ब्लॉक हो जाता है और ब्राउज़र पहले गलत फ़ॉर्म कंट्रोल में गड़बड़ी का मैसेज दिखाता है. इस मैसेज पर फ़ोकस किया जाता है. जब उपयोगकर्ता किसी फ़ॉर्म सबमिशन को चालू करता है और वहां अमान्य वैल्यू होती हैं, तो पहले अमान्य फ़ॉर्म कंट्रोल पर गड़बड़ी का मैसेज दिखेगा और इस पर फ़ोकस किया जाएगा. अगर ज़रूरी कंट्रोल में कोई वैल्यू सेट नहीं है, अगर संख्या वाली वैल्यू रेंज से बाहर है या वैल्यू, type एट्रिब्यूट के लिए ज़रूरी टाइप की नहीं है, तो फ़ॉर्म की पुष्टि नहीं की जाएगी, सबमिट नहीं किया जाएगा, और गड़बड़ी का मैसेज दिखेगा.

अगर number, तारीख या समय की वैल्यू, सेट की गई कम से कम min से कम या ज़्यादा से ज़्यादा max से ज़्यादा है, तो कंट्रोल :out-of-range (और :invalid) होगा. फ़ॉर्म सबमिट करते समय, उपयोगकर्ता को valididityState.rangeUnderflow, validityState.rangeOverflow गड़बड़ी की सूचना दी जाएगी. अगर वैल्यू, step वैल्यू के साथ पूरी तरह से अलग है, चाहे वह साफ़ तौर पर सेट की गई हो या 1 पर सेट की गई हो, तो कंट्रोल :out-of-range (और :invalid) होगा. साथ ही, एक validityState.stepMismatch गड़बड़ी दिखेगी. गड़बड़ी, एक बबल के तौर पर दिखती है. डिफ़ॉल्ट रूप से, इससे गलती को ठीक करने के बारे में ज़रूरी जानकारी मिलती है.

वैल्यू की लंबाई के लिए एक जैसे एट्रिब्यूट होते हैं: सबमिट करने पर validityState.tooLong या validityState.tooShort के साथ minlength और maxlength एट्रिब्यूट, उपयोगकर्ता को गड़बड़ी के बारे में सूचना देंगे. maxlength, उपयोगकर्ता को बहुत ज़्यादा वर्ण डालने से भी रोकता है.

maxlength एट्रिब्यूट का इस्तेमाल करने पर, लोगों को खराब अनुभव मिल सकता है. आम तौर पर, यह बेहतर तरीका होता है कि उपयोगकर्ता, काउंटर के ज़रिए तय की गई वर्ण की लंबाई से ज़्यादा लिखें. वैकल्पिक रूप से, फ़ॉर्म के साथ सबमिट किए गए <output> एलिमेंट के रूप में, टेक्स्ट में बदलाव करना बेहतर होता है. इससे वे तब तक टेक्स्ट में बदलाव कर पाते हैं, जब तक कि आउटपुट तय की गई सीमा को पार नहीं करता. maxlength को आपके एचटीएमएल में शामिल किया जा सकता है; जैसा कि हमने ऊपर बताया है, यह JavaScript के बिना काम करता है. इसके बाद, लोड होने पर, JavaScript में इस कैरेक्टर काउंटर को बनाने के लिए, maxlength एट्रिब्यूट की वैल्यू का इस्तेमाल किया जा सकता है.

ऐसा लगता है कि कुछ इनपुट टाइप में डिफ़ॉल्ट पाबंदियां हैं, लेकिन ये लागू नहीं हैं. उदाहरण के लिए, tel इनपुट टाइप, डाइनैमिक कीबोर्ड वाले डिवाइसों पर न्यूमेरिक (संख्या वाला) टेलीफ़ोन कीपैड देता है, लेकिन मान्य वैल्यू को सीमित नहीं करता. इसके और दूसरे इनपुट टाइप के लिए, pattern एट्रिब्यूट है. मान्य वैल्यू के तौर पर मेल खाने के लिए, रेगुलर एक्सप्रेशन तय किया जा सकता है. अगर कोई वैल्यू खाली स्ट्रिंग है और वैल्यू की ज़रूरत नहीं है, तो इससे validityState.patternMismatch गड़बड़ी नहीं होगी. अगर ज़रूरी हो और खाली हो, तो उपयोगकर्ता को patternMismatch के बजाय, validityState.valueMissing के लिए गड़बड़ी का डिफ़ॉल्ट मैसेज दिखाया जाएगा.

ईमेल के मामले में, शायद validityState.typeMismatch आपकी ज़रूरतों के हिसाब से इसे ठीक न कर रहा हो. आप pattern एट्रिब्यूट को शामिल कर सकते हैं, ताकि बिना टीएलडी वाले इंट्रानेट ईमेल पतों को मान्य न माना जाए. पैटर्न एट्रिब्यूट की मदद से, ऐसा रेगुलर एक्सप्रेशन मिलता है जिसका वैल्यू मैच होना ज़रूरी है. पैटर्न मैच की ज़रूरत होने पर, पक्का करें कि उपयोगकर्ता को साफ़ तौर पर पता चल रहा हो कि क्या उम्मीद की जा रही है.

ये सभी काम JavaScript की एक लाइन के बिना किए जा सकते हैं. हालांकि, एचटीएमएल एपीआई होने की वजह से, कंस्ट्रेंट की पुष्टि करने के दौरान कस्टम मैसेज शामिल करने के लिए, JavaScript का इस्तेमाल किया जा सकता है. बचे हुए वर्णों की संख्या अपडेट करने के लिए, JavaScript का इस्तेमाल किया जा सकता है. साथ ही, पासवर्ड की मज़बूती के लिए प्रोग्रेस बार दिखाने या डाइनैमिक तौर पर बेहतर तरीके से पूरा करने के किसी भी अन्य तरीके को दिखाने के लिए भी JavaScript का इस्तेमाल किया जा सकता है.

उदाहरण

इस उदाहरण में <dialog> में एक फ़ॉर्म दिया गया है, जिसमें <form> को नेस्ट किया गया है, जिसमें तीन फ़ॉर्म कंट्रोल और दो सबमिट बटन हैं. साथ ही, इसमें साफ़ लेबल और निर्देश दिए गए हैं.

'सबमिट करें' बटन पर क्लिक करने पर, डायलॉग बॉक्स बंद हो जाता है. फ़ॉर्म का डिफ़ॉल्ट तरीका बदलने के लिए, formmethod="dialog" का इस्तेमाल करें. साथ ही, डेटा सबमिट किए बिना या मिटाए बिना <dialog> को बंद कर दें. आपको formnovalidate भी शामिल करना होगा. ऐसा न करने पर, ब्राउज़र यह पुष्टि करने की कोशिश करेगा कि सभी ज़रूरी फ़ील्ड में वैल्यू मौजूद है या नहीं. हो सकता है कि उपयोगकर्ता कोई भी डेटा डाले बिना, डायलॉग और फ़ॉर्म को बंद करना चाहे; पुष्टि करने से यह काम नहीं करेगा. aria-label="close" को शामिल करें, क्योंकि “X" एक विज़ुअल क्यू है, लेकिन जानकारी देने वाला लेबल नहीं है.

फ़ॉर्म कंट्रोल में सभी लेबल इंप्लिसिट लेबल हैं, इसलिए आपको id या for एट्रिब्यूट शामिल करने की ज़रूरत नहीं है. दोनों इनपुट एलिमेंट में ज़रूरी एट्रिब्यूट होते हैं, जो इन्हें ज़रूरी बनाते हैं. नंबर इनपुट में step साफ़ तौर पर सेट होता है, ताकि यह दिखाया जा सके कि step को शामिल कैसे किया जाता है. step की डिफ़ॉल्ट वैल्यू 1 होती है, इसलिए इस एट्रिब्यूट को हटाया जा सकता है.

<select> की एक डिफ़ॉल्ट वैल्यू तय होती है, जिसकी वजह से required एट्रिब्यूट को इस्तेमाल करना ज़रूरी नहीं होता. हर विकल्प में value एट्रिब्यूट शामिल करने के बजाय, वैल्यू डिफ़ॉल्ट रूप से अंदरूनी टेक्स्ट में बदल जाती है.

आखिर में मौजूद 'सबमिट करें' बटन, फ़ॉर्म के तरीके को POST पर सेट करता है. क्लिक करने पर, हर वैल्यू की वैधता की जांच की जाएगी. अगर सभी वैल्यू मान्य हैं, तो फ़ॉर्म का डेटा सबमिट किया जाएगा, डायलॉग बंद हो जाएगा. साथ ही, पेज thankyou.php पर रीडायरेक्ट हो सकता है, जो कार्रवाई यूआरएल है. अगर कोई वैल्यू मौजूद नहीं है या संख्या वाली वैल्यू में कोई चरण मेल नहीं खाता या वह रेंज से बाहर है, तो ब्राउज़र से तय की गई गड़बड़ी का मैसेज दिखेगा. हालांकि, फ़ॉर्म सबमिट नहीं किया जाएगा और डायलॉग बंद नहीं होगा. गड़बड़ी के डिफ़ॉल्ट मैसेज को validityState.setCustomValidity('message here') तरीके से पसंद के मुताबिक बनाया जा सकता है. बस ध्यान रखें कि अगर आपने कोई कस्टम मैसेज सेट किया है, तो जब सब कुछ मान्य होगा, तो मैसेज को साफ़ तौर पर खाली स्ट्रिंग पर सेट किया जाना चाहिए. ऐसा न करने पर, फ़ॉर्म सबमिट नहीं होगा.

दूसरी ज़रूरी बातें

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

फ़ॉर्म डिज़ाइन करते समय, इस बात का ध्यान रखना ज़रूरी है कि सभी लोग आपके जैसे नहीं हैं. हो सकता है कि किसी व्यक्ति के पास उपनाम के रूप में सिर्फ़ एक अक्षर हो (या कोई उपनाम ही न हो), हो सकता है कि उसका कोई पिन कोड न हो, उसका तीन-लाइनों का पता हो, और उसका कोई मोहल्ले का पता न हो. ऐसा हो सकता है कि उन्हें आपके फ़ॉर्म का अनुवाद किया हुआ वर्शन दिख रहा हो.

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

एचटीएमएल में ऐसे सभी टूल होते हैं जिनसे फ़ॉर्म के बेसिक कंट्रोल को ऐक्सेस किया जा सकता है. फ़ॉर्म एलिमेंट या प्रोसेस जितना ज़्यादा इंटरैक्टिव होगा, ऐक्सेस को जिस लेवल पर लागू करना है, जहां ज़रूरी हो वहां ARIA के नामों, भूमिकाओं, और वैल्यू को सेट और अपडेट करने के मामले में सुलभता पर ज़्यादा ध्यान देना होगा. साथ ही, ज़रूरत के हिसाब से ARIA के लाइव एलानों पर भी ध्यान देना होगा. हालांकि, जैसा कि हमने यहां सीखा है, सिर्फ़ एचटीएमएल के साथ, आप ARIA या JavaScript का इस्तेमाल किए बिना सुलभता और वैधता के अपने लक्ष्य को लंबे समय तक पा सकते हैं.

आपने जो सीखा है उसकी जांच करें

फ़ॉर्म के बारे में अपनी जानकारी परखें.