आप एक ऐसा फ़ॉर्म कैसे डिज़ाइन कर सकते हैं जो नाम और पते के कई तरह के फ़ॉर्मैट के साथ काम करे? मामूली फ़ॉर्म तकनीकी समस्याओं की वजह से उपयोगकर्ता परेशान हो सकते हैं. इस वजह से, वे आपकी साइट छोड़कर जा सकते हैं या खरीदारी पूरी करने से मना कर सकते हैं या साइन-अप करें.
इस कोडलैब से आपको, इस्तेमाल में आसान और ऐक्सेस किया जा सकने वाला ऐसा फ़ॉर्म बनाने का तरीका पता चलता है जो ज़्यादातर लोगों के काम आता है.
पहला चरण: एचटीएमएल एलिमेंट और एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना
कोडलैब का यह हिस्सा खाली फ़ॉर्म के साथ शुरू किया जा सकता है. इसमें सिर्फ़ एक हेडिंग और एक बटन शामिल होगा निजी ईमेल को सुरक्षित रखें. इसके बाद, इनपुट जोड़ना शुरू करें. (सीएसएस और कुछ JavaScript पहले से ही included.)
प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
इस कोड की मदद से, अपने
<form>एलिमेंट में नाम वाला फ़ील्ड जोड़ें:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
नाम वाले फ़ील्ड में यह मुश्किल और बार-बार आने वाला लग सकता है, लेकिन यह पहले से ही कई काम करता है.
आपने input के साथ label को जोड़ने के लिए label के for एट्रिब्यूट को
input का name या id. लेबल पर टैप या क्लिक करने से फ़ोकस, इनपुट पर ले जाता है. इससे, स्क्रीन पर
यह इनपुट की तुलना में बेहतर है—यह उंगलियों, थंब्स, और माउस क्लिक के लिए अच्छा है! स्क्रीनरीडर
लेबल या लेबल के इनपुट पर फ़ोकस होने पर, लेबल टेक्स्ट पढ़कर सुनाएं.
name="name" कैसा रहेगा? यह डेटा से जुड़ा नाम (जो 'name' होता है!)
इस इनपुट से, जो फ़ॉर्म सबमिट किए जाने पर सर्वर पर भेजा जाता है. इसमें name एट्रिब्यूट शामिल है
इसका मतलब यह भी है कि इस एलिमेंट के डेटा को FormData API से ऐक्सेस किया जा सकता है.
दूसरा चरण: डेटा डालने में उपयोगकर्ताओं की मदद करने के लिए एट्रिब्यूट जोड़ना
Chrome में नाम इनपुट में टैप या क्लिक करने पर क्या होता है? आपको ऑटोमैटिक भरने की सुविधा दिखेगी
दिए गए इनपुट के लिए ये सुझाव सही हैं, क्योंकि ब्राउज़र ने इन्हें सेव किया है और अनुमान लगाया है
name और id वैल्यू.
अब अपने इनपुट कोड में autocomplete="name" जोड़ें, ताकि वह कुछ ऐसा दिखे:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Chrome में पेज को फिर से लोड करें और नाम इनपुट में टैप या क्लिक करें. आपको क्या अंतर दिखा?
आपको एक छोटा सा बदलाव दिखेगा: autocomplete="name" के साथ अब ये सुझाव खास तौर पर दिखेंगे
जो इनपुट इनपुट में पहले इस्तेमाल किए गए थे और जिनमें autocomplete="name" भी था. ब्राउज़र
सिर्फ़ यह अंदाज़ा नहीं लगाया जा सकता कि क्या सही होगा. आपके पास इसका पूरा कंट्रोल है. साथ ही, आपको मैनेज करें...
आपके ब्राउज़र में सेव किए गए नाम और पतों को देखने और उनमें बदलाव करने का विकल्प.
अब पाबंदी की पुष्टि करने वाले एट्रिब्यूट जोड़ें
maxlength, pattern और required इसलिए आपका इनपुट कोड इस तरह दिखता है:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"का मतलब है कि ब्राउज़र 100 वर्णों से ज़्यादा लंबे इनपुट नहीं देगा.pattern="[\p{L} \-\.]+"ऐसे रेगुलर एक्सप्रेशन का इस्तेमाल करता है जो यूनिकोड अक्षर वाले वर्णों की अनुमति देता है, हाइफ़न और पीरियड (फ़ुल स्टॉप). इसका मतलब है कि Françoise या Jorg जैसे नामों को 'अमान्य'. ऐसा नहीं है अगर आप\wमान का उपयोग करते हैं, जो [सिर्फ़ उन वर्णों की अनुमति देता है लैटिन वर्णमाला.requiredका मतलब है... ज़रूरी है! ब्राउज़र फ़ील्ड में जोड़ा जा सकता है और अगर आप इसे सबमिट करने की कोशिश करते हैं, तो इनपुट को हाइलाइट कर देगा. कोई अतिरिक्त कोड नहीं आवश्यक!
यह देखने के लिए कि फ़ॉर्म इन एट्रिब्यूट के साथ और इनके बिना कैसे काम करता है, डेटा डालकर देखें:
- ऐसी वैल्यू डालकर देखें जो
patternएट्रिब्यूट के लिए सही नहीं हैं. - खाली इनपुट के साथ फ़ॉर्म सबमिट करने की कोशिश करें. आपको पहले से मौजूद ब्राउज़र के फ़ंक्शन से जुड़ी चेतावनी दिखेगी खाली ज़रूरी फ़ील्ड को चुनकर उस पर फ़ोकस करें.
तीसरा चरण: अपने फ़ॉर्म में पते का एक सुविधाजनक फ़ील्ड जोड़ना
पते का फ़ील्ड जोड़ने के लिए, अपने फ़ॉर्म में यह कोड डालें:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea, उपयोगकर्ताओं के लिए अपना पता डालने का सबसे आसान तरीका है. साथ ही, यह
काटना और चिपकाना.
पते के फ़ॉर्म को अलग-अलग कॉम्पोनेंट में न बांटें. जैसे, सड़क का नाम और नंबर मदद चाहिए. उपयोगकर्ताओं को उन फ़ील्ड में अपना पता डालने के लिए मजबूर न करें जिनका कोई मतलब नहीं है.
अब ZIP या पिन कोड और देश या क्षेत्र के लिए फ़ील्ड जोड़ें. सरलता के लिए, यहां सिर्फ़ पहले पांच देशों को शामिल किया गया है. पते के पूरे फ़ॉर्म में एक पूरी सूची दी गई है.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
आपको दिखेगा कि पिन कोड वैकल्पिक है. ऐसा इसलिए, क्योंकि कई देश पिन कोड का इस्तेमाल नहीं करते.
(ग्लोबल सोर्सबुक
194 अलग-अलग देशों के पते के फ़ॉर्मैट इस्तेमाल करते हैं. इसमें सैंपल पते भी शामिल हैं.) लेबल देश या
क्षेत्र का इस्तेमाल देश के बजाय किया जाता है, क्योंकि पूरी सूची के कुछ विकल्प (जैसे
autocomplete वैल्यू के बावजूद, यूनाइटेड किंगडम) सिंगल देश नहीं हैं.
चौथा चरण: खरीदारों को शिपिंग और बिलिंग पते आसानी से डालने की सुविधा देना
आपने पते का एक काफ़ी काम करने वाला फ़ॉर्म बनाया है, लेकिन क्या होगा अगर आपकी साइट को एक से ज़्यादा फ़ॉर्म की ज़रूरत हो
शिपिंग और बिलिंग के लिए पता, उदाहरण के लिए? अपना फ़ॉर्म अपडेट करके देखें, ताकि ग्राहक इसे सबमिट कर सकें
शिपिंग और बिलिंग पते. डेटा एंट्री को जल्द और आसानी से कैसे किया जा सकता है,
खासकर तब जब दोनों पते एक जैसे हों? इस कोडलैब के साथ दिए गए लेख में,
कई पतों को मैनेज करने की तकनीकें.
आप जो भी करें, पक्का करें कि autocomplete की सही वैल्यू का इस्तेमाल किया जा रहा हो!
पांचवां चरण: टेलीफ़ोन नंबर फ़ील्ड जोड़ना
टेलीफ़ोन नंबर इनपुट जोड़ने के लिए, फ़ॉर्म में यह कोड जोड़ें:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
फ़ोन नंबर के लिए एक ही इनपुट का इस्तेमाल करें: नंबर को हिस्सों में न बांटें. इससे, उपयोगकर्ताओं को डेटा डालने या कॉपी-पेस्ट करने, पुष्टि करने की प्रोसेस को आसान बनाने, और ब्राउज़र को जानकारी ऑटोमैटिक भरने की सुविधा मिलती है.
ये दो विशेषताएं हैं, जो टेलीफ़ोन नंबर डालने के उपयोगकर्ता अनुभव को बेहतर बना सकती हैं:
type="tel"से यह पक्का किया जाता है कि मोबाइल उपयोगकर्ताओं को सही कीबोर्ड मिले.enterkeyhint="done"मोबाइल कीबोर्ड पर एंटर कुंजी लेबल सेट करता है, ताकि यह दिखाया जा सके कि यह आखिरी है फ़ील्ड है और अब फ़ॉर्म को सबमिट किया जा सकता है (डिफ़ॉल्ट रूप से यहnextहै).
आपका पूरा पता फ़ॉर्म अब कुछ ऐसा दिखना चाहिए:
- दूसरे डिवाइसों पर अपना फ़ॉर्म आज़माएं. आप किन डिवाइस और ब्राउज़र को टारगेट कर रहे हैं? कैसे कर सकते थे फ़ॉर्म को बेहतर कैसे बनाया जा सकता है?
अलग-अलग डिवाइस पर अपने फ़ॉर्म की जांच करने के कई तरीके हैं:
- Chrome DevTools डिवाइस मोड का इस्तेमाल करना को सिम्युलेट किया जाता है.
- यूआरएल को कंप्यूटर से अपने फ़ोन पर भेजें.
- किसी रेंज पर जांच करने के लिए, BrowserStack जैसी सेवा का इस्तेमाल करें डिवाइसों और ब्राउज़र पर भी काम करता है.
आगे बढ़ते रहें
आंकड़े और असली उपयोगकर्ता की निगरानी: आपके फ़ॉर्म के डिज़ाइन की परफ़ॉर्मेंस और उपयोगिता को चालू करेगा. साथ ही, असल उपयोगकर्ताओं के लिए उसकी जांच और निगरानी करेगा, और यह देखने के लिए कि बदलाव सफल हुए हैं या नहीं. आपको अपनी साइट के लोड होने की परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर नज़र रखनी चाहिए, साथ ही, पेज ऐनलिटिक्स भी होता है. यह जानकारी होती है कि आपके पते वाले फ़ॉर्म से कितने उपयोगकर्ता बाउंस कर जाते हैं यह? उपयोगकर्ता आपके पता फ़ॉर्म वाले पेजों पर कितना समय बिताते हैं? और इंटरैक्शन से जुड़े आंकड़े (किस पेज का है) कॉम्पोनेंट, उपयोगकर्ताओं के साथ इंटरैक्ट करते हैं या नहीं?)
आपके उपयोगकर्ता कहां रहते हैं? वह अपना पता कैसे फ़ॉर्मैट करता है? पते के लिए वे किन नामों का इस्तेमाल करते हैं ज़िप या पिन कोड जैसे कॉम्पोनेंट? डाक पतों के बारे में फ़्रैंक की गाइड इस वेबसाइट पर 200 से ज़्यादा देशों में, पते के फ़ॉर्मैट के बारे में ज़रूरी लिंक और बेहतर दिशा-निर्देश दिए गए हैं.
देश चुनने वाले टूल, खराब इस्तेमाल के लिए जाने जाते हैं. आइटम की लंबी सूची के लिए, एलिमेंट को चुनने से बचें और ISO 3166 देश-कोड स्टैंडर्ड में फ़िलहाल 249 देशों की सूची दी गई है!
<select>के बजाय, हो सकता है कि आप किसी दूसरे विकल्प पर गौर करना चाहें. उदाहरण के लिए, बेमार्ड इंस्टिट्यूट के देश चुनने का विकल्प.क्या आप बहुत सारे आइटम वाली सूचियों के लिए बेहतर सिलेक्टर बना सकते हैं? कैसे पक्का किया जा सकता है कि आपका डिज़ाइन अलग-अलग डिवाइसों और प्लैटफ़ॉर्म पर उपलब्ध हैं? (
<select>एलिमेंट, इमेज के लिए अच्छी तरह से काम नहीं करता है आइटम की संख्या बहुत ज़्यादा है, लेकिन कम से कम इसका इस्तेमाल करीब-करीब सभी ब्राउज़र और सहायक डिवाइसों पर किया जा सकता है!)ब्लॉग पोस्ट <input type="country" /> चर्चा करता है देश चुनने के लिए, स्टैंडर्ड तय करने की जटिलता. देश के नामों का स्थानीय भाषा में भी लिखा जा सकता है समस्या. देश सूचियों में कई भाषाओं में, कई फ़ॉर्मैट में देश के कोड और नाम डाउनलोड करने की सुविधा मिलती है.