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