एचटीएमएल एलिमेंट एट्रिब्यूट आपके <form> और फ़ॉर्म कंट्रोल को बेहतर बना सकते हैं.
फ़ॉर्म के कंट्रोल भरने में उपयोगकर्ताओं की मदद करना
उपयोगकर्ता आसानी से फ़ॉर्म भर सकें, इसके लिए
अपने <input> एलिमेंट के लिए सही type एट्रिब्यूट का इस्तेमाल करें.
ब्राउज़र type के हिसाब से सही यूज़र इंटरफ़ेस दिखाते हैं. जैसे, date टाइप के <input> के लिए तारीख चुनने वाला टूल.
मोबाइल डिवाइस के ब्राउज़र, ऑन-स्क्रीन कीबोर्ड दिखाते हैं. जैसे, type="tel" के लिए टेलीफ़ोन नंबर कीपैड.
कुछ <input> टाइप, किसी एलिमेंट का फ़ॉर्म सबमिट किए जाने पर, उसकी पुष्टि करने के नियमों में भी बदलाव करते हैं.
उदाहरण के लिए, <input type="url"> सिर्फ़ तब मान्य होता है, जब वह खाली न हो और वैल्यू एक यूआरएल हो.
पक्का करें कि उपयोगकर्ता डेटा डालें
टच डिवाइसों पर सही ऑन-स्क्रीन कीबोर्ड देने के लिए, अलग-अलग एट्रिब्यूट उपलब्ध हैं.
पहला विकल्प, type एट्रिब्यूट का इस्तेमाल करना है, जैसा कि ऊपर बताया गया है.
दूसरा विकल्प यह है कि Android और iOS
पर inputmode एट्रिब्यूट का इस्तेमाल किया जा सकता है.
type एट्रिब्यूट से उलट, inputmode एट्रिब्यूट सिर्फ़ ऑन-स्क्रीन कीबोर्ड
में बदलाव करता है. एलिमेंट के काम करने के तरीके में बदलाव नहीं होता. अगर आपको किसी <input> का डिफ़ॉल्ट यूज़र इंटरफ़ेस और पुष्टि करने के डिफ़ॉल्ट नियमों को बनाए रखना है, लेकिन फिर भी आपको ऑप्टिमाइज़ किया गया ऑन-स्क्रीन कीबोर्ड चाहिए, तो inputmode का इस्तेमाल करना एक अच्छा विकल्प है.
enterkeyhint एट्रिब्यूट का इस्तेमाल करके, ऑन-स्क्रीन कीबोर्ड पर Enter बटन को बदला जा सकता है.
उदाहरण के लिए, enterkeyhint="next" या enterkeyhint="done", बटन के लेबल को सही आइकॉन में बदलता है.
इससे उपयोगकर्ताओं को यह साफ़ तौर पर पता चलता है कि मौजूदा फ़ॉर्म सबमिट करने पर क्या होता है.
पक्का करें कि उपयोगकर्ता फ़ॉर्म सबमिट कर सकते हैं
मान लें कि आपको <form> भरने के लिए, सबमिट करें बटन पर क्लिक करना है, लेकिन कुछ नहीं होता.
समस्या यह हो सकती है कि बटन, disabled एट्रिब्यूट की मदद से बंद कर दिया गया हो.
फ़ॉर्म के मान्य होने तक, सबमिट करें बटन को बंद रखना आम पैटर्न है.
सैद्धांतिक तौर पर यह सुनने में ठीक लगता है, लेकिन आपको पूरा और मान्य उपयोगकर्ता इनपुट मिलने तक सबमिट करें बटन को बंद नहीं करना चाहिए. इसके बजाय, अमान्य डेटा डाले जाने पर उसे हाइलाइट करें. साथ ही, फ़ॉर्म सबमिट करते समय, समस्या वाले फ़ील्ड को उपयोगकर्ता के लिए हाइलाइट करें.
हालांकि, फ़ॉर्म के सही तरीके से सबमिट होने के बाद, सबमिट करें बटन को बंद किया जा सकता है. हालांकि, यह अब तक प्रोसेस नहीं हुआ है. बंद किए गए बटन के बारे में ज़्यादा जानें.
पहले डाला गया डेटा दिखाकर उपयोगकर्ताओं की मदद करें
मान लें कि आपके पास एक चेकआउट फ़ॉर्म है, जिसमें कई चरणों को पूरा किया गया है.
यह कैसे पक्का किया जाता है कि जब उपयोगकर्ता पिछले चरण पर वापस आता है, तब भी पहले डाली गई वैल्यू मौजूद हैं?
पहले ही पूरी हो चुकी वैल्यू दिखाने के लिए, value एट्रिब्यूट का इस्तेमाल करें.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
JavaScript में किसी फ़ॉर्म कंट्रोल की वैल्यू को फिर से पाने के कई तरीके हैं.
आपके पास
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 एट्रिब्यूट का इस्तेमाल क्यों करना चाहिए.
उपयोगकर्ताओं को इस बात का संकेत देने का एक बेहतर तरीका है कि विवरण या उदाहरण जोड़ने के लिए फ़ॉर्म कंट्रोल के नीचे एक अतिरिक्त HTML एलिमेंट का इस्तेमाल करें.
पक्का करें कि पुष्टि के लिए फ़ॉर्म के कंट्रोल तैयार हों
पहले से मौजूद पुष्टि करने की सुविधा चालू करने के लिए, कई एचटीएमएल एट्रिब्यूट उपलब्ध हैं.
खाली फ़ील्ड को सबमिट होने से रोकने के लिए, required एट्रिब्यूट का इस्तेमाल करें.
type एट्रिब्यूट की मदद से, पुष्टि करने के अन्य तरीके लागू किए जा सकते हैं.
उदाहरण के लिए, type="url" के लिए ज़रूरी <input> की वैल्यू, यूआरएल होना चाहिए.
यह पक्का करने के लिए कि उपयोगकर्ता कम से कम संख्या में वर्ण डाले,
minlength एट्रिब्यूट का इस्तेमाल करें.
तय की गई संख्या से ज़्यादा वर्णों वाले किसी भी मान को अनुमति नहीं देने के लिए,
maxlength एट्रिब्यूट का इस्तेमाल करें.
<input type="number"> जैसे न्यूमेरिक इनपुट टाइप के लिए, min और max एट्रिब्यूट का इस्तेमाल करें.
पुष्टि करने के बारे में ज़्यादा जानें: फ़ॉर्म में सही डेटा डालने में उपयोगकर्ताओं की मदद करें.
जांचें कि आपको कितना समझ आया
फ़ॉर्म एट्रिब्यूट के बारे में अपनी जानकारी की जांच करें
किसी ऑन-स्क्रीन कीबोर्ड पर Enter बटन का लेबल बदलने के लिए, किस एट्रिब्यूट का इस्तेमाल किया जा सकता है?
enterkeyenterkeyhintenterkeytextenterkeylabelvalue प्रॉपर्टी और getAttribute('value') में क्या अंतर है?
value प्रॉपर्टी मौजूदा वैल्यू दिखाती है और getAttribute('value') शुरुआती वैल्यू दिखाता है.value प्रॉपर्टी शुरुआती वैल्यू दिखाती है और getAttribute('value') मौजूदा वैल्यू दिखाता है.value प्रॉपर्टी कुंजी और वैल्यू दिखाता है, getAttribute('value') सिर्फ़ वैल्यू दिखाता है.