फ़ॉर्म

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

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

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

फ़ॉर्म की मदद से, उपयोगकर्ताओं को आपकी वेबसाइट या ऐप्लिकेशन से इंटरैक्ट करने की सुविधा मिलती है. साथ ही, डाली गई जानकारी की पुष्टि करने और उन्हें सबमिट करने की सुविधा भी मिलती है एक सर्वर को भेजना है. एचटीएमएल एट्रिब्यूट की मदद से, उपयोगकर्ता को फ़ॉर्म कंट्रोल चुनने या कोई वैल्यू डालने की ज़रूरत पड़ सकती है. एचटीएमएल एट्रिब्यूट उन खास शर्तों को तय कर सकते हैं जिनका मान मान्य होने के लिए मेल खाना चाहिए. जब उपयोगकर्ता फ़ॉर्म सबमिट करने की कोशिश करता है, सभी फ़ॉर्म कंट्रोल वैल्यू, क्लाइंट-साइड कंस्ट्रेंट वैलिडेशन से जुड़ी होती हैं. साथ ही, वे सबमिशन को रोक सकती हैं जब तक डेटा ज़रूरी शर्तों के मुताबिक नहीं हो जाता; ये सभी काम 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 के साथ, फ़ॉर्म का डेटा name=value पेयर की पैरामीटर स्ट्रिंग, जिसे action के यूआरएल से जोड़ा गया.

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

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

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

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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 सीएसएस pseudo-class से मेल खाता है, भले ही उपयोगकर्ता कोई दूसरा रेडियो चुने. फ़िलहाल चुना गया रेडियो बटन :checked से मेल खाता है pseudo-class.

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

चेकबॉक्स

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

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

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

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

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

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

पिछले उदाहरणों में, आपने देखा होगा कि 'सबमिट करें' बटन को छोड़कर बाकी सभी फ़ॉर्म कंट्रोल में <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> फ़ॉर्म कंट्रोल से पहले आता है. हालांकि, रेडियो बटन और चेकबॉक्स के मामले में ऐसा नहीं होता. ऐसा करना ज़रूरी नहीं है. यह सिर्फ़ यूएक्स पैटर्न है. 'फ़ॉर्म सीखें' सीरीज़ में फ़ॉर्म डिज़ाइन के बारे में जानकारी होती है.

रेडियो बटन और चेकबॉक्स के ग्रुप के लिए, लेबल उस फ़ॉर्म कंट्रोल का ऐक्सेस करने लायक नाम देता है जिससे वह जुड़ा हुआ है; लेकिन कंट्रोल ग्रुप और उनके लेबल के लिए भी लेबल की ज़रूरत होगी. ग्रुप को लेबल करने के लिए सभी एलिमेंट का ग्रुप बनाएं. <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 एट्रिब्यूट भी इस्तेमाल किए जा सकते हैं. किसी फ़ील्डसेट को बंद करने पर, नेस्ट किए गए सभी फ़ॉर्म के कंट्रोल बंद हो जाते हैं. name और form एट्रिब्यूट में से किसी के भी पास नहीं है का <fieldset> पर बहुत ज़्यादा इस्तेमाल होता है. 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, यह इस बात पर निर्भर करता है कि एलिमेंट इंटरैक्टिव है या नहीं और disabled विशेषता मौजूद है. :read-write pseudoclass, एलिमेंट से मेल खाता है contenteditable सेट किया गया और ऐसे फ़ॉर्म कंट्रोल जिनमें डिफ़ॉल्ट रूप से बदलाव किया जा सकता है. जैसे, number, password, और text इनपुट टाइप (लेकिन चेकबॉक्स नहीं, रेडियो बटन या hidden टाइप वगैरह). अगर सामान्य रूप से लिखे जा सकने वाले किसी एलिमेंट में readonly है विशेषता सेट है, तो यह इसके बजाय :read-only से मेल खाएगा.

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

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

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

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

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

बिल्ट-इन कंस्ट्रेंट वैलिडेशन, सिर्फ़ एचटीएमएल एट्रिब्यूट के साथ सेट किए गए कंस्ट्रेंट के लिए काम करता है. आपके पास एलिमेंट को स्टाइल करने के लिए, ब्राउज़र ने :required और :valid/:invalid pseudoclasses पर, 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 गड़बड़ी. यह गड़बड़ी, बबल के तौर पर दिखती है. साथ ही, गलती को ठीक करने के बारे में डिफ़ॉल्ट रूप से मददगार जानकारी दी जाती है.

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

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

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

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

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

उदाहरण

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

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

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

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

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

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

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

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

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

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

देखें कि आपको कितना समझ आया है

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