फ़ॉर्म के एट्रिब्यूट की पूरी जानकारी

एचटीएमएल एलिमेंट एट्रिब्यूट, आपके <form> और फ़ॉर्म के कंट्रोल को बेहतर बना सकते हैं.

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

उपयोगकर्ताओं के लिए फ़ॉर्म भरना आसान बनाने के लिए, अपने <input> एलिमेंट के लिए, सही type एट्रिब्यूट का इस्तेमाल करें.

ब्राउज़र ऐसा यूज़र इंटरफ़ेस दिखाते हैं जो type के हिसाब से सही हो, जैसे, date टाइप के <input> के लिए, तारीख चुनने वाला टूल. मोबाइल डिवाइसों के ब्राउज़र में, चुना गया ऑन-स्क्रीन कीबोर्ड दिखता है. जैसे कि type="tel" के लिए टेलीफ़ोन नंबर कीपैड.

कुछ <input> टाइप, फ़ॉर्म सबमिट होने पर एलिमेंट की पुष्टि करने के नियमों में भी बदलाव करते हैं. उदाहरण के लिए, <input type="url"> सिर्फ़ तब मान्य होता है, जब वह खाली न हो और वैल्यू एक यूआरएल हो.

पक्का करें कि उपयोगकर्ता डेटा डालें

टच डिवाइसों पर सही ऑन-स्क्रीन कीबोर्ड देने के लिए, अलग-अलग एट्रिब्यूट होते हैं. जैसा कि ऊपर बताया गया है, पहला विकल्प type एट्रिब्यूट का इस्तेमाल करना है.

दूसरा विकल्प है, inputmode एट्रिब्यूट का इस्तेमाल किया जा सकता है Android और iOS. type एट्रिब्यूट से अलग, inputmode एट्रिब्यूट सिर्फ़ ऑन-स्क्रीन कीबोर्ड में बदलाव करता है बताई गई होती है, न कि एलिमेंट का व्यवहार. अगर आप चाहें, तो inputmode का इस्तेमाल किया जा सकता है <input> का डिफ़ॉल्ट यूज़र इंटरफ़ेस और पुष्टि करने के डिफ़ॉल्ट नियम बनाए रखें, लेकिन फिर भी ऑप्टिमाइज़ किया गया ऑन-स्क्रीन कीबोर्ड.

ऑन-स्क्रीन कीबोर्ड पर मौजूद Enter बटन को बदलने के लिए, enterkeyhint एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, enterkeyhint="next" या enterkeyhint="done" बटन के लेबल को सही आइकॉन में बदल देता है. इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि मौजूदा फ़ॉर्म सबमिट करने पर क्या होगा.

पक्का करें कि उपयोगकर्ता, फ़ॉर्म सबमिट कर सकते हैं

मान लें कि आपने <form> भरा है. इसके बाद, सबमिट करें बटन पर क्लिक किया, लेकिन कुछ नहीं हुआ. समस्या यह हो सकती है कि disabled एट्रिब्यूट की वजह से बटन बंद कर दिया गया हो. आम तौर पर, सबमिट करें बटन को तब तक बंद रखा जाता है, जब तक फ़ॉर्म मान्य नहीं हो जाता.

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

हालांकि, फ़ॉर्म सबमिट होने के बाद, सबमिट करें बटन को बंद किया जा सकता है, लेकिन अभी तक संसाधित नहीं हुआ है. बंद किए गए बटन के बारे में ज़्यादा जानें.

उपयोगकर्ताओं को पहले डाला गया डेटा दिखाकर उनकी मदद करें

मान लें कि आपके पास कई चरणों वाला एक चेकआउट फ़ॉर्म है. यह कैसे पक्का किया जाता है कि उपयोगकर्ता के पिछले चरण पर वापस जाने पर भी, पहले से डाली गई वैल्यू वहीं मौजूद रहती हैं या नहीं? पहले ही पूरी की जा चुकी वैल्यू दिखाने के लिए, value एट्रिब्यूट का इस्तेमाल करें.

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

JavaScript में किसी फ़ॉर्म कंट्रोल की वैल्यू वापस पाने के कई तरीके हैं. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए value प्रॉपर्टी का इस्तेमाल किया जा सकता है या किसी प्रॉपर्टी की वैल्यू को इसके साथ ऐक्सेस किया जा सकता है getAttribute('value'). दोनों में एक बड़ा अंतर है, value प्रॉपर्टी हमेशा मौजूदा वैल्यू दिखाती है, और getAttribute() का इस्तेमाल करने पर हमेशा शुरुआती वैल्यू मिलती है.

इसे आज़माएं! नाम वाले फ़ील्ड में टेक्स्ट बदलें और कंसोल देखें. देखें कि value प्रॉपर्टी, फ़िलहाल दिख रहे टेक्स्ट को कैसे दिखाती है. जबकि getAttribute('value') हमेशा शुरुआती वैल्यू दिखाता है.

दोनों के बीच के अंतर के बारे में ज़्यादा जानें DOM एट्रिब्यूट और DOM प्रॉपर्टी.

checkbox या radio टाइप के <input> एलिमेंट के लिए, checked एट्रिब्यूट का इस्तेमाल करें. अगर उपयोगकर्ता ने कोई विकल्प चुना है, तो उसे जोड़ें और अगर नहीं, तो उसे हटा दें.

पक्का करें कि उपयोगकर्ताओं को सही फ़ॉर्मैट समझ आ गया हो

placeholder एट्रिब्यूट की वैल्यू से पता चलता है कि किस तरह की जानकारी मिल सकती है.

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

इससे उपयोगकर्ताओं को भ्रम हो सकता है, क्योंकि यह अजीबोगरीब लग सकता है कि फ़ॉर्म कंट्रोल पहले से ही भरा हुआ क्यों है. इसके अलावा, प्लेसहोल्डर जोड़ने से यह देखना मुश्किल हो सकता है कि कौनसे फ़ॉर्म फ़ील्ड अब भी भरे जाने हैं. इसके अलावा, प्लेसहोल्डर टेक्स्ट की डिफ़ॉल्ट शैली को पढ़ना मुश्किल हो सकता है.

आम तौर पर, placeholder एट्रिब्यूट का इस्तेमाल करते समय सावधान रहें और किसी फ़ॉर्म कंट्रोल के बारे में ज़्यादा जानकारी देने के लिए, कभी भी placeholder एट्रिब्यूट का इस्तेमाल न करें. इसके बजाय, <label> एलिमेंट का इस्तेमाल करें. इसके बारे में ज़्यादा जानें आपको placeholder एट्रिब्यूट का इस्तेमाल क्यों नहीं करना चाहिए.

अतिरिक्त एचटीएमएल एलिमेंट का इस्तेमाल करना, उपयोगकर्ताओं को यह संकेत देने का एक बेहतर तरीका है कि किस तरह की जानकारी की उम्मीद की जा सकती है पर क्लिक करें.

पक्का करें कि फ़ॉर्म के कंट्रोल, पुष्टि के लिए तैयार हैं

पहले से मौजूद पुष्टि को चालू करने के लिए, कई तरह के एचटीएमएल एट्रिब्यूट उपलब्ध हैं. खाली फ़ील्ड सबमिट होने से रोकने के लिए, required एट्रिब्यूट का इस्तेमाल करें. type एट्रिब्यूट का इस्तेमाल करके, अतिरिक्त पुष्टि की जा सकती है. उदाहरण के लिए, type="url" की ज़रूरी <input> वैल्यू एक यूआरएल होनी चाहिए.

यह पक्का करने के लिए कि उपयोगकर्ता कम से कम वर्ण डाले, minlength एट्रिब्यूट का इस्तेमाल करें. तय संख्या से ज़्यादा वर्णों वाली किसी भी वैल्यू को अस्वीकार करने के लिए, maxlength एट्रिब्यूट का इस्तेमाल करें. संख्या वाले इनपुट टाइप, जैसे कि <input type="number"> के लिए, min और max एट्रिब्यूट का इस्तेमाल करें.

पुष्टि करने के बारे में ज़्यादा जानें: फ़ॉर्म में सही डेटा डालने में उपयोगकर्ताओं की मदद करें.

देखें कि आपको कितना समझ आया है

डिवाइस की विशेषताओं से जुड़ी अपनी जानकारी को परखें

संसाधन

• <input> एचटीएमएल एट्रिब्यूट
• ग्लोबल एचटीएमएल एट्रिब्यूट