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