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