फ़ॉर्म को इंटरैक्टिव बनाने के लिए, आपको फ़ॉर्म एलिमेंट जोड़ने होंगे. इसमें डेटा डालने और चुनने के लिए कंट्रोल, कंट्रोल की जानकारी देने वाले एलिमेंट, फ़ील्ड को ग्रुप करने वाले एलिमेंट, और फ़ॉर्म सबमिट करने के लिए बटन होते हैं.
फ़ॉर्म एलिमेंट क्या होते हैं?
आपको दो <input> एलिमेंट, <input type="text"> और <input type="file"> दिखते हैं. ये अलग-अलग क्यों दिखते हैं?
एलिमेंट के नाम और type एट्रिब्यूट के आधार पर, ब्राउज़र अलग-अलग यूज़र इंटरफ़ेस दिखाते हैं, अलग-अलग मान्यकरण के नियमों का इस्तेमाल करते हैं, और कई अन्य सुविधाएं देते हैं. सही फ़ॉर्म कंट्रोल का इस्तेमाल करने से, बेहतर फ़ॉर्म बनाने में मदद मिलती है.
फ़ॉर्म एलिमेंट के लिए लेबल
मान लें कि आपको एक ऐसा इनपुट जोड़ना है जहां उपयोगकर्ता अपना पसंदीदा रंग डाल सके.
इसके लिए, आपको अपने फ़ॉर्म में <input> एलिमेंट जोड़ना होगा. हालांकि, उपयोगकर्ता को यह कैसे पता चलेगा कि उसे अपना पसंदीदा रंग भरना है?
फ़ॉर्म कंट्रोल के बारे में बताने के लिए, हर फ़ॉर्म कंट्रोल के लिए <label> का इस्तेमाल करें.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
लेबल एलिमेंट पर मौजूद for एट्रिब्यूट, इनपुट पर मौजूद id एट्रिब्यूट से मेल खाता है.
उपयोगकर्ता के इनपुट को कैप्चर करना
जैसा कि नाम से पता चलता है, <input> एलिमेंट का इस्तेमाल, उपयोगकर्ताओं से इनपुट इकट्ठा करने के लिए किया जाता है.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
जैसा कि पहले बताया गया है, id एट्रिब्यूट, <input> को <label> से कनेक्ट करता है.
इस उदाहरण में, नाम और टाइप एट्रिब्यूट के बारे में क्या जानकारी है?
नाम एट्रिब्यूट
name एट्रिब्यूट का इस्तेमाल करके, उस डेटा की पहचान करें जिसे उपयोगकर्ता कंट्रोल की मदद से डालता है.
फ़ॉर्म सबमिट करने पर, यह नाम अनुरोध में शामिल किया जाता है.
मान लें कि आपने फ़ॉर्म कंट्रोल का नाम mountain रखा है और उपयोगकर्ता ने Gutenberg डाला है, तो अनुरोध में यह जानकारी mountain=Gutenberg के तौर पर शामिल होती है.
फ़ॉर्म कंट्रोल का नाम बदलकर hill करने की कोशिश करें.
अगर आपने ऐसा सही तरीके से किया है और फ़ॉर्म सबमिट कर दिया है, तो यूआरएल में hill दिखेगा.
इनपुट का टाइप
फ़ॉर्म कंट्रोल कई तरह के होते हैं. इन सभी में काम की सुविधाएं पहले से मौजूद होती हैं. ये अलग-अलग ब्राउज़र और प्लैटफ़ॉर्म पर काम करती हैं. type एट्रिब्यूट के आधार पर, ब्राउज़र अलग-अलग यूज़र इंटरफ़ेस रेंडर करता है, अलग-अलग ऑन-स्क्रीन कीबोर्ड दिखाता है, और पुष्टि करने के अलग-अलग नियमों का इस्तेमाल करता है. टाइप बदलने का तरीका जानें.
type="checkbox" का इस्तेमाल करने पर, ब्राउज़र अब टेक्स्ट फ़ील्ड के बजाय चेकबॉक्स रेंडर करता है.
चेकबॉक्स में अन्य एट्रिब्यूट भी शामिल होते हैं.
इसे चुने गए विकल्प के तौर पर दिखाने के लिए, checked एट्रिब्यूट सेट करें.
आपके पास चुनने के लिए, कई अन्य टाइप उपलब्ध हैं. इस बारे में ज़्यादा जानकारी, हम बाद के मॉड्यूल में देंगे.
टेक्स्ट की एक से ज़्यादा लाइनें डालने की अनुमति दें
मान लें कि आपको एक ऐसा फ़ील्ड चाहिए जहां उपयोगकर्ता टिप्पणी लिख सके.
इसके लिए, क्या यह बेहतर नहीं होगा कि वे टेक्स्ट की कई लाइनें डाल सकें?
<textarea> एलिमेंट का यही मकसद है.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
विकल्पों की सूची से चुनना
उपयोगकर्ताओं को चुनने के लिए विकल्पों की सूची कैसे दी जाती है?
इसके लिए, <select> एलिमेंट का इस्तेमाल किया जा सकता है.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
सबसे पहले, आपको एक <select> एलिमेंट जोड़ना होगा.
अन्य सभी फ़ॉर्म कंट्रोल की तरह, इसे id एट्रिब्यूट का इस्तेमाल करके <label> से कनेक्ट किया जाता है. साथ ही, name एट्रिब्यूट का इस्तेमाल करके इसे यूनीक नाम दिया जाता है.
<select> एलिमेंट के स्टार्ट और एंड टैग के बीच, एक से ज़्यादा <option> एलिमेंट जोड़े जा सकते हैं. हर एलिमेंट, एक विकल्प को दिखाता है.
हर विकल्प में एक यूनीक value एट्रिब्यूट होता है. इसलिए, फ़ॉर्म का डेटा प्रोसेस करते समय, उन्हें अलग-अलग पहचाना जा सकता है.
विकल्प एलिमेंट में मौजूद टेक्स्ट, ऐसी वैल्यू होती है जिसे इंसान पढ़ सकते हैं.
अगर आपने <select> का चुनाव किए बिना इस फ़ॉर्म को सबमिट किया, तो अनुरोध में color=orange शामिल होगा. हालांकि, ब्राउज़र को कैसे पता चलता है कि कौनसा विकल्प इस्तेमाल किया जाना चाहिए?
ब्राउज़र, सूची में दिए गए पहले विकल्प का इस्तेमाल करता है. हालांकि, ऐसा तब नहीं होता, जब:
- एक
<option>एलिमेंट मेंselectedएट्रिब्यूट मौजूद है. - उपयोगकर्ता कोई दूसरा विकल्प चुनता है.
कोई विकल्प पहले से चुनना
selected एट्रिब्यूट की मदद से, एक विकल्प को पहले से चुना जा सकता है. यह डिफ़ॉल्ट रूप से सेट हो जाता है. भले ही, <option> एलिमेंट किसी भी क्रम में तय किए गए हों.
ग्रुप फ़ॉर्म कंट्रोल
कभी-कभी आपको फ़ॉर्म कंट्रोल को ग्रुप करने की ज़रूरत होती है. इसके लिए, <fieldset> एलिमेंट का इस्तेमाल किया जा सकता है.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
क्या आपने <fieldset> एलिमेंट के अंदर मौजूद <legend> एलिमेंट देखा? आपको क्या लगता है कि इसका इस्तेमाल किस काम के लिए किया जाता है?
अगर आपका जवाब "फ़ॉर्म कंट्रोल के ग्रुप के बारे में बताने के लिए" है, तो आपका जवाब सही है!
हर <fieldset> एलिमेंट के लिए <legend> एलिमेंट की ज़रूरत होती है. ठीक इसी तरह, हर फ़ॉर्म कंट्रोल के लिए उससे जुड़ा <label> एलिमेंट ज़रूरी होता है.
<legend> को <fieldset> में सबसे पहले रखना होगा.
<legend> एलिमेंट के बाद, उन फ़ॉर्म कंट्रोल को तय किया जा सकता है जिन्हें ग्रुप में शामिल किया जाना चाहिए.
कोई फ़ॉर्म सबमिट करना
फ़ॉर्म कंट्रोल जोड़ने और उन्हें ग्रुप करने का तरीका जानने के बाद, आपके मन में यह सवाल आ सकता है कि कोई उपयोगकर्ता फ़ॉर्म कैसे सबमिट कर सकता है?
पहला विकल्प, <button> एलिमेंट का इस्तेमाल करना है.
<button>Submit</button>
जब कोई उपयोगकर्ता सबमिट करें बटन पर क्लिक करता है, तो ब्राउज़र, <form> एलिमेंट के ऐक्शन एट्रिब्यूट में दिए गए यूआरएल पर अनुरोध करता है. इस अनुरोध में, फ़ॉर्म कंट्रोल का पूरा डेटा शामिल होता है.
<button> एलिमेंट के बजाय, type="submit" के साथ <input> एलिमेंट का भी इस्तेमाल किया जा सकता है. इनपुट, <button> की तरह दिखता है और काम करता है.
<input> के बारे में बताने के लिए, <label> एलिमेंट का इस्तेमाल करने के बजाय, value एट्रिब्यूट का इस्तेमाल करें.
<input type="submit" value="Submit">
इसके अलावा, फ़ॉर्म फ़ील्ड पर फ़ोकस होने पर, Enter कुंजी का इस्तेमाल करके भी फ़ॉर्म सबमिट किया जा सकता है.
देखें कि आपको कितना समझ आया
फ़ॉर्म एलिमेंट के बारे में अपनी जानकारी की जांच करें
किसी <label> को फ़ॉर्म कंट्रोल से कैसे कनेक्ट किया जाता है?
<label> में for='color' और <input> में name='color'.<label> में for='color' और <input> में id='color'.<label> में id='color' और <input> में for='color'.<label> में name='color' और <input> में for='color.एक से ज़्यादा लाइन वाले फ़ॉर्म कंट्रोल के लिए, किसका इस्तेमाल किया जाता है?
type='multi-line' वाला <input> एलिमेंट.<text> एलिमेंट.<textarea> एलिमेंट.type='long' वाला <input> एलिमेंट.फ़ॉर्म कैसे सबमिट किया जा सकता है?
<button> एलिमेंट पर क्लिक करने से.Enter बटन का इस्तेमाल करके.type='submit' वाले <input> एलिमेंट पर क्लिक करने से.