किन फ़ॉर्म फ़ील्ड का इस्तेमाल किया जा सकता है?
सबसे अच्छा उपयोगकर्ता अनुभव देने के लिए,
पक्का करें कि एलिमेंट और एलिमेंट type का इस्तेमाल किया जा रहा हो, जो उपयोगकर्ता के डेटा के लिए सबसे सही हैं.
टेक्स्ट भरने में उपयोगकर्ताओं की मदद करें
उपयोगकर्ताओं को टेक्स्ट डालने के लिए फ़ॉर्म फ़ील्ड उपलब्ध कराने के लिए, <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> उपलब्ध है.
और कई दूसरे टाइप भी हैं. <input> का इस्तेमाल करें, ताकि उपयोगकर्ता अपना पासवर्ड डाल सकें
type="password" के साथ. यहां डाले गए हर वर्ण को तारे के निशान ("*") या बिंदु ("•") से छिपाया जाता है,
ताकि पासवर्ड न पढ़ा जा सके.
क्या आपको फ़ॉर्म डेटा में यूनीक सुरक्षा टोकन शामिल करना है?
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" के लिए, पासवर्ड डालने का कस्टम इंटरफ़ेस दिखाया गया है.