फॉर्म इनपुट टाइप्स
आज हम input type बदलते हैं — login के लिए email और password, और एक choice control के रूप में checkbox।
- 1
Input types क्या होते हैं
पिछले लेसन में एक सादे text field वाला form बनाया। आज वही
<input>tagtypeबदलते ही आकार बदलता है।तीन types का अभ्यास:
email,password, औरcheckbox। Radio और number भी वही idea हैं — अलगtypevalue — बाद में अभ्यास। - 2
समस्या: केवल सादे टेक्स्ट के बजाय पासवर्ड, ईमेल और टिक बॉक्स की ज़रूरत
एक साधारण टेक्स्ट बॉक्स में पासवर्ड टाइप करने पर वह स्क्रीन पर सबको दिख जाता है। इसी तरह मोबाइल पर ईमेल टाइप करते समय
@ढूँढना मुश्किल होता है, और सहमति जताने के लिए टाइप करने के बजाय एक आसान टिक बॉक्स चाहिए होता है।HTML ने इस समस्या को हल करने के लिए नए टैग्स का आविष्कार नहीं किया, बल्कि
<input>के अंदरtypeएट्रिब्यूट जोड़ दिया—जिससे एक ही टैग पासवर्ड, ईमेल, नंबर या चेकबॉक्स का रूप ले लेता है। - 3
Browser कैसे Input Types के अनुसार कीबोर्ड और वैलिडेशन बदलता है
मोबाइल फोन पर
type="email"क्लिक करते ही कीबोर्ड पर@और.comकी कीज आ जाती हैं। साथ ही ब्राउज़र सबमिट करने से पहले ईमेल का सही सिंटैक्स भी जाँचता है।type="password"आपके अक्षरों को काले डॉट्स या स्टार्स के पीछे छुपा देता है।type="checkbox"केवल तभी सर्वर को भेजा जाता है जब वह टिक किया गया हो। - 4
आज की प्रैक्टिस: एक संपूर्ण Login और Checkbox फॉर्म
नीचे दिए गए लॉगिन फॉर्म में पासवर्ड टाइप करें और देखें कि कैसे अक्षर स्वतः छिप जाते हैं। "Remember me" चेकबॉक्स पर टिक लगाकर इसका व्यवहार देखें।
- 5
ज़रूरत के अनुसार सटीक Input Type चुनने का नियम
Secrets या email के लिए बेहतर type हो तो सादा
textमत लगाओ। जो field भेजनी हो, उस परnameरखो।
स्क्रीन पर सुरक्षा (अक्षरों को मास्क करना) और मोबाइल पर विशेष ईमेल कीबोर्ड (@ और .com) सक्रिय करता है।
हाँ/ना या विकल्प चुनने के लिए। टेक्स्ट इनपुट से अलग, चेकबॉक्स केवल तभी सबमिट होता है जब वह टिक किया गया हो।
आप क्या सीखेंगे
- 1type से input का व्यवहार बदलता है
- 2email में @ वाला पता चाहिए
- 3password टाइप छुपाता है
- 4checkbox on या off choice है
- 5name अब भी तय करता है क्या भेजे
लाइन-बाय-लाइन
type="email"Email field। Browsers email keypad दिखा सकते हैं और बुनियादी address आकार जाँच सकते हैं।
type="password"Password field। अक्षर masked रहते हैं ताकि पास वाले आसानी से न पढ़ सकें।
type="checkbox" value="yes"टिक बॉक्स। Checked हो तो form
remember=yesभेजता है। Unchecked हो तो वह name छूट जाता है।
खुद ट्राई करो
type="email", type="password", और “I agree” वाला checkbox लेकर छोटा signup form बनाओ। हर field पर label और name रखो।
हिंट: पिछले लेसन वाला form पैटर्न — सिर्फ़ type values बदलती हैं।
गलती कहाँ होती है
- 1.Password के लिए
type="text"। Secret स्क्रीन पर दिखता रहता है। - 2.Checkbox पर
valueभूलना जब साफ़ submitted जवाब चाहिए हो।
इंटरव्यू की तैयारी
Q: type="text" की जगह type="email" क्यों इस्तेमाल करना चाहिए?↓
यह मोबाइल फोन पर सीधे @ वाला अनुकूलित कीबोर्ड खोलता है और ब्राउज़र को सबमिट करने से पहले अमान्य ईमेल एड्रेस रोकने की इन-बिल्ट अनुमति देता है।
Q: क्या type="password" इंटरनेट पर डेटा को एन्क्रिप्ट करता है?↓
नहीं। यह केवल स्क्रीन पर अक्षरों को छिपाता है ताकि आसपास खड़े लोग पासवर्ड न पढ़ सकें। नेटवर्क पर सुरक्षित ट्रांसमिशन के लिए HTTPS (SSL) और POST मेथड ज़रूरी है।
Q: Checkbox का value सर्वर पर कब भेजा जाता है?↓
केवल तभी जब चेकबॉक्स पर टिक लगा हो (Checked)। यदि चेकबॉक्स अनचेक्ड है, तो ब्राउज़र सबमिशन पेलोड से उसका नाम और मान पूरी तरह बाहर कर देता है।