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

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

फ़ॉर्म एलिमेंट क्या होते हैं?

आपको दो <input> एलिमेंट, <input type="text"> और <input type="file"> दिखते हैं. ये अलग-अलग क्यों दिखते हैं?

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

फ़ॉर्म एलिमेंट के लिए लेबल

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

कंट्रोल की मदद से उपयोगकर्ता जो डेटा डालता है उसकी पहचान करने के लिए, 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.
फिर से कोशिश करें!

एक से ज़्यादा लाइन वाले फ़ॉर्म कंट्रोल के लिए, किसका इस्तेमाल किया जाता है?

<input> एलिमेंट में type='multi-line' है.
फिर से कोशिश करें!
<text> एलिमेंट.
फिर से कोशिश करें!
<textarea> एलिमेंट.
🎉
<input> एलिमेंट में type='long' है.
फिर से कोशिश करें!

फ़ॉर्म कैसे सबमिट करें?

<button> एलिमेंट पर क्लिक करना.
ठीक है, यह एक विकल्प है.
Enter बटन का इस्तेमाल करके.
ठीक है, यह एक विकल्प है.
type='submit' वाले <input> एलिमेंट पर क्लिक करके.
ठीक है, यह एक विकल्प है.

संसाधन