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

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

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

आपको दो <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> एलिमेंट पर क्लिक करना.
सही, यह एक विकल्प है.
ऊपर दिए गए सभी विकल्प.
सही, सभी जवाब, फ़ॉर्म सबमिट करने के विकल्प हैं.

रिसॉर्स