लोगों को सबसे अच्छा अनुभव देने के लिए, पक्का करें कि आपने एलिमेंट और एलिमेंट type का इस्तेमाल किया हो. यह एलिमेंट, उपयोगकर्ता के डाले गए डेटा के हिसाब से सबसे सही होना चाहिए.
उपयोगकर्ताओं को टेक्स्ट भरने में मदद करना
फ़ॉर्म फ़ील्ड देने के लिए, <input> एलिमेंट का इस्तेमाल करें. <input>, एक शब्द, वाक्यांशों, और छोटी एंट्री के लिए सबसे अच्छा विकल्प है. ज़्यादा लंबे टेक्स्ट के लिए, <textarea> एलिमेंट का इस्तेमाल करें. इससे कई लाइनों का टेक्स्ट लिखा जा सकता है. साथ ही, उपयोगकर्ता के लिए यह देखना आसान हो जाता है कि उसने कौन-सा टेक्स्ट डाला है. ऐसा इसलिए, क्योंकि इस एलिमेंट को स्क्रोल किया जा सकता है और इसका साइज़ बदला जा सकता है.
पक्का करें कि उपयोगकर्ता, डेटा को सही फ़ॉर्मैट में डालें
क्या आपको उपयोगकर्ताओं को फ़ोन नंबर भरने में मदद करनी है?
<input> के लिए, type एट्रिब्यूट की वैल्यू को type="tel" में बदलें.
मोबाइल डिवाइसों पर उपयोगकर्ताओं को अडैप्टिव ऑन-स्क्रीन कीबोर्ड मिलता है. इससे वे फ़ोन नंबर को तेज़ी से डाल पाते हैं.
ईमेल पते के लिए, type="email" का इस्तेमाल करें.
इसमें भी, अडैप्ट किया गया ऑन-स्क्रीन कीबोर्ड दिखाया गया है.
फ़ॉर्म फ़ील्ड को ज़रूरी बनाने के लिए, required एट्रिब्यूट का इस्तेमाल करें.
फ़ॉर्म सबमिट होने पर, ब्राउज़र यह जांच करता है कि इनपुट में कोई वैल्यू मौजूद है या नहीं. साथ ही, यह भी जांच करता है कि वह वैल्यू मान्य है या नहीं. इस मामले में, ब्राउज़र यह जांच करता है कि वैल्यू, सही फ़ॉर्मैट वाला ईमेल पता है या नहीं.
अलग-अलग इनपुट टाइप के बारे में ज़्यादा जानें. इनमें पुष्टि करने की सुविधाएं भी पहले से मौजूद होती हैं.
उपयोगकर्ताओं को तारीखें भरने में मदद करना
आपको अगली यात्रा कब शुरू करनी है?
उपयोगकर्ताओं को तारीखें भरने में मदद करने के लिए, type="date" का इस्तेमाल करें.
कुछ ब्राउज़र, फ़ॉर्मैट को प्लेसहोल्डर के तौर पर दिखाते हैं. जैसे, yyyy-mm-dd. इससे तारीख डालने का तरीका पता चलता है.
सभी नए ब्राउज़र, तारीख चुनने के लिए कस्टम इंटरफ़ेस उपलब्ध कराते हैं. इन्हें तारीख चुनने वाला टूल कहा जाता है.
उपयोगकर्ताओं को कोई विकल्प चुनने में मदद करना
यह पक्का करने के लिए कि उपयोगकर्ता, उपलब्ध विकल्पों में से किसी एक को चुन या अनचुने, type="checkbox" का इस्तेमाल करें.
क्या आपको एक से ज़्यादा विकल्प देने हैं?
आपके इस्तेमाल के हिसाब से, कई विकल्प उपलब्ध हैं.
अगर उपयोगकर्ताओं को सिर्फ़ एक विकल्प चुनने की अनुमति देनी है, तो पहले संभावित समाधान देखें.
type="radio" और name की एक ही वैल्यू के साथ, एक से ज़्यादा <input> एलिमेंट इस्तेमाल किए जा सकते हैं. उपयोगकर्ताओं को सभी विकल्प एक साथ दिखते हैं, लेकिन वे सिर्फ़ एक विकल्प चुन सकते हैं.
<select> एलिमेंट का इस्तेमाल भी किया जा सकता है.
उपयोगकर्ता, उपलब्ध विकल्पों की सूची को स्क्रोल करके देख सकते हैं और उनमें से कोई एक विकल्प चुन सकते हैं.
कुछ इस्तेमाल के उदाहरणों के लिए, जैसे कि संख्याओं की रेंज चुनना, range टाइप का <input> एक अच्छा विकल्प हो सकता है.
क्या आपको एक से ज़्यादा विकल्प चुनने की सुविधा देनी है?
multiple एट्रिब्यूट वाले <select> एलिमेंट का इस्तेमाल करें या checkbox टाइप के कई <input> एलिमेंट का इस्तेमाल करें.
<datalist> एलिमेंट के साथ <input> का भी इस्तेमाल किया जा सकता है.
इससे आपको टेक्स्ट फ़ील्ड और <option> एलिमेंट की सूची मिलती है.
पक्का करें कि उपयोगकर्ता अलग-अलग तरह का डेटा भर सकें
इस्तेमाल के कुछ उदाहरणों के लिए, इनपुट के और भी टाइप उपलब्ध हैं.
उपयोगकर्ताओं को उन ब्राउज़र में कलर पिकर उपलब्ध कराने के लिए, color टाइप का <input> होता है जिनमें यह सुविधा काम करती है. इसके अलावा, कई अन्य टाइप भी होते हैं. यह पक्का करने के लिए कि उपयोगकर्ता अपना पासवर्ड डाल सकें, type="password" के साथ <input> का इस्तेमाल करें. डालने पर हर वर्ण को तारे ("*") या बिंदु ("•") से छिपा दिया जाता है, ताकि पासवर्ड को पढ़ा न जा सके.
क्या आपको फ़ॉर्म के डेटा में यूनीक सुरक्षा टोकन शामिल करना है?
type="hidden" के साथ <input> का इस्तेमाल करें.
hidden टाइप के <input> की वैल्यू को उपयोगकर्ता न तो देख सकते हैं और न ही उसमें बदलाव कर सकते हैं.
उपयोगकर्ताओं को फ़ाइलें अपलोड और सबमिट करने की अनुमति देने के लिए, type="file" के साथ <input> का इस्तेमाल करें.
अगर आपको किसी खास मामले में कस्टम एलिमेंट तय करने हैं, तो ऐसा किया जा सकता है. हालांकि, इसके लिए यह ज़रूरी है कि कोई भी बिल्ट-इन एलिमेंट या टाइप सही न हो.
लोगों को आपका फ़ॉर्म भरने में मदद करना
फ़ॉर्म के कई एलिमेंट और टाइप होते हैं, लेकिन आपको कौनसे एलिमेंट और टाइप चुनने चाहिए?
कुछ मामलों में, सही एलिमेंट और टाइप चुनना आसान होता है. जैसे, <input type="date">. हालांकि, अन्य लोगों के लिए यह निर्भर करता है.
उदाहरण के लिए, type="checkbox" या <select> एलिमेंट के साथ कई <input> एलिमेंट इस्तेमाल किए जा सकते हैं.
लिस्टबॉक्स और ड्रॉप-डाउन सूचियों में से किसी एक को चुनने के बारे में ज़्यादा जानें.
आम तौर पर, यह पक्का करें कि आपने असली उपयोगकर्ताओं के साथ अपने फ़ॉर्म को टेस्ट किया हो, ताकि आपको सबसे अच्छा फ़ॉर्म एलिमेंट और टाइप मिल सके.
देखें कि आपको कितना समझ आया
फ़ॉर्म फ़ील्ड के बारे में अपनी जानकारी की जांच करना
क्या फ़ॉर्म कंट्रोल का इस्तेमाल करके एक साथ कई फ़ाइलें अपलोड की जा सकती हैं?
<input type="files"> का इस्तेमाल किया जा रहा है.<input type="file" multiple> का इस्तेमाल किया जा रहा है.<input type="multiple-files"> का इस्तेमाल किया जा रहा है.type="text" और type="password" में क्या अंतर है?
type="password" के लिए, पासवर्ड डालने के लिए अडैप्ट किया गया ऑन-स्क्रीन कीबोर्ड दिखाया गया है.type="password" का इस्तेमाल करने पर, डाले गए हर वर्ण को तारे के निशान (*) या बिंदु (•) से छिपा दिया जाता है.type="password" के लिए, पासवर्ड डालने का कस्टम इंटरफ़ेस दिखाया गया है.