फॉर्म और इनपुट

docs.scrimba.com

लगभग हर वेबसाइट जो आपके लिए कुछ करती है—सर्च बॉक्स, लॉगिन, चेकआउट, कमेंट फील्ड—एक फॉर्म पर बनी होती है। एक फॉर्म वह है जहां एक पेज आगंतुक से बात करना बंद करता है और सुनना शुरू करता है: यह एकत्र करता है कि कोई व्यक्ति क्या टाइप करता है, टिक करता है, या चुनता है, और वह डेटा कार्य के लिए हस्तांतरित किया जाता है। यह अध्याय उस HTML के बारे में है जो इसे संभव बनाता है।

फॉर्म एलिमेंट

एक फॉर्म एक कंटेनर है जो आगंतुक द्वारा भरी गई चीजों को एक साथ समूहित करता है। आप अपने इनपुट और एक बटन को <form> एलिमेंट के अंदर रखते हैं, और फॉर्म का काम सब कुछ एकत्र करना और आगंतुक के समाप्त होने पर इसे भेजना है।

<form>
  <label>आपका नाम</label>
  <input>
  <button>भेजें</button>
</form>

इसे एक डॉक्टर के कार्यालय में भरे गए कागजी फॉर्म की तरह सोचें। शीट सभी बॉक्स को धारण करती है, आप प्रत्येक में लिखते हैं, और नीचे आप पूरी शीट को एक बार में वापस करते हैं। <form> एलिमेंट वह शीट है।

<form> वह कंटेनर है जो अपने कंट्रोल को एकत्र करता है और उन्हें एक बंडल के रूप में सबमिट करता है। दो विशेषताएं सबमिट पर क्या होता है यह तय करती हैं: action वह पता है जहां डेटा भेजा जाता है, और method यह है कि यह कैसे भेजा जाता है।

<form action="/subscribe" method="post">
  <label for="email">ईमेल पता</label>
  <input id="email" name="email" type="email">
  <button type="submit">सदस्यता लें</button>
</form>

जब आगंतुक सबमिट ट्रिगर करता है, तो ब्राउज़र फॉर्म के अंदर हर नामित कंट्रोल को एकत्र करता है, मानों को पैकेज करता है, और action पते पर एक अनुरोध भेजता है। आपको इसमें से कुछ भी स्वयं को जोड़ना नहीं है। <form> एलिमेंट आपको यह व्यवहार मुफ्त देता है, यही कारण है कि कंट्रोल को एक वास्तविक फॉर्म में समूहित करना पृष्ठ पर ढीले इनपुट को बिखेरने से बेहतर है।

<form> एक मूल सबमिशन तंत्र है: अंतर्निर्मित ब्राउज़र व्यवहार जो फॉर्म के कंट्रोल को एक अनुरोध में एकत्र करता है और इसे भेजता है, बिना किसी स्क्रिप्टिंग के। सबमिट पर ब्राउज़र action (वह URL जहां अनुरोध जाता है) और method (get या post, इस अध्याय में बाद में कवर किया गया) को पढ़ता है, कंट्रोल को अनुरोध में सीरीलाइज़ करता है, और नेविगेट करता है। यह डिफ़ॉल्ट कारण है कि एक फॉर्म अभी भी JavaScript अक्षम या अभी तक लोड न होने पर काम करता है, जो वह बेसलाइन है जिसे आप निर्माण करते हैं बजाय उस चीज़ को जो आप प्रतिस्थापित करते हैं।

<form action="/subscribe" method="post">
  <label for="email">ईमेल पता</label>
  <input id="email" name="email" type="email">
  <button type="submit">सदस्यता लें</button>
</form>

दो व्यवहार लोगों को पकड़ते हैं। पहला, एक फॉर्म Enter पर सबमिट करता है जब फोकस एक सिंगल-लाइन टेक्स्ट फील्ड में हो, केवल बटन क्लिक पर नहीं, इसलिए कीबोर्ड सबमिशन अंतर्निर्मित है और परीक्षण करने योग्य है। दूसरा, डिफ़ॉल्ट सबमिट पृष्ठ को पुनः लोड करता है या नेविगेट करता है; जब आप JavaScript के साथ एक फॉर्म को संभालते हैं तो आप event.preventDefault() को कॉल करते हैं उस नेविगेशन को रोकने और नियंत्रण लेने के लिए। मूल सबमिट को फर्श के रूप में मानें: यह कुछ समझदारी से करना चाहिए भले ही कोई भी स्क्रिप्ट चलने से पहले। प्रगतिशील संवर्धन, काम करने वाले HTML के शीर्ष पर स्क्रिप्ट को परत करना, यहां शुरू करने का कारण है।

Junoफॉर्म एलिमेंट एक <form> वह कंटेनर है जो आपके इनपुट और एक बटन को धारण करता है, और जब कोई सबमिट करता है तो यह सब कुछ एक साथ भेजता है। डेस्क पर कागजी फॉर्म की कल्पना करें: एक शीट, बहुत सारे बॉक्स, एक बार में वापस किए गए। अपने फील्ड को एक फॉर्म में लपेटें और आपको बिना कुछ चतुर किए वह एकत्र-और-भेजें व्यवहार मिल जाता है।

Junoफॉर्म एलिमेंट<form> अपने कंट्रोल को बंडल करता है और सबमिट करता है; action कहता है कहां, method कहता है कैसे। आपको एकत्र और भेजना मुफ्त मिलता है, इसलिए ढीले इनपुट प्लस अपने स्वयं के क्लिक हैंडलर की जगह एक वास्तविक फॉर्म के लिए पहुंचें। यह आपको कोड बचाता है और किसी भी स्क्रिप्ट के लोड होने से पहले काम करता है।

Junoफॉर्म एलिमेंट मूल सबमिशन कंट्रोल को एकत्र करता है और बिना किसी स्क्रिप्ट के action को एक अनुरोध भेजता है, जो बिल्कुल वही कारण है कि एक फॉर्म तब भी काम करता है जब JavaScript बंद हो। याद रखें यह एक टेक्स्ट फील्ड में Enter पर सबमिट करता है, केवल क्लिक पर नहीं। जब आप JavaScript के साथ नियंत्रण लेते हैं, event.preventDefault() डिफ़ॉल्ट नेविगेशन को रोकता है, और सादा फॉर्म नीचे आपकी सुरक्षा जाल रहती है।

इनपुट और लेबल

एक <input> वह बॉक्स है जहां आगंतुक टाइप करता है। अपने आप पर हालांकि, एक इनपुट एक खाली बॉक्स है जिसमें कोई संकेत नहीं है कि यह क्या है। यही वह है जो एक लेबल है: यह वह टेक्स्ट है जो आगंतुक को बताता है कि बॉक्स में क्या डालें।

<label for="city">शहर</label>
<input id="city">

हर इनपुट को एक लेबल की जरूरत है। आप इनपुट को id देकर और लेबल को for से इंगित करके दोनों को जोड़ते हैं, दोनों में एक ही शब्द का उपयोग करते हैं। एक बार जब वे जुड़ जाते हैं, तो लेबल पर क्लिक करने से कर्सर बॉक्स में जाता है, जो एक छोटी दयालुता है जो फॉर्म को सभी के लिए उपयोग करना आसान बनाती है।

एक <input> एक एकल मान एकत्र करता है; एक <label> इसका नाम देता है। आप लेबल के for विशेषता को इनपुट के id से मिलाकर उन्हें जोड़ते हैं:

<label for="username">उपयोगकर्ता नाम</label>
<input id="username" name="username" type="text" required>

कुछ विशेषताएं अधिकांश इनपुट पर अपनी जगह अर्जित करती हैं। name वह कुंजी है जिसके तहत मान भेजा जाता है (नामकरण अनुभाग में कवर किया गया)। required फील्ड भरने तक सबमिशन को ब्लॉक करता है। placeholder बॉक्स के अंदर फीका संकेत पाठ दिखाता है, लेकिन एक प्लेसहोल्डर एक लेबल नहीं है: यह उस पल गायब हो जाता है जब कोई टाइप करता है, इसलिए यह असली चीज़ को प्रतिस्थापित नहीं कर सकता। हर इनपुट को अभी भी अपना <label> की जरूरत है।

एक <label> को अपने कंट्रोल से जोड़ने के दो तरीके हैं, और भेदभाव पहुंच-क्षमता के लिए महत्वपूर्ण है। पहला स्पष्ट संगति: लेबल एक for विशेषता रखता है जिसका मान कंट्रोल के id के बराबर होता है। दूसरा निहित संगति: आप कंट्रोल को लेबल एलिमेंट के अंदर लपेटते हैं, और कोई for या id की जरूरत नहीं है।

<!-- स्पष्ट: for id से मेल खाता है -->
<label for="phone">फोन</label>
<input id="phone" name="phone" type="tel">

<!-- निहित: इनपुट लेबल के अंदर बैठता है -->
<label>
  फोन
  <input name="phone" type="tel">
</label>

दोनों कंट्रोल को एक पहुंच योग्य नाम देते हैं, वह पाठ जो स्क्रीन रीडर घोषित करता है जब फील्ड फोकस प्राप्त करता है, इसलिए एक आगंतुक जो लेआउट नहीं देख सकता वह अभी भी जानता है कि क्या टाइप करें। स्पष्ट संगति को प्राथमिकता दें: यह CSS लेआउट से बचता है जो लेबल को इनपुट से दूर ले जाता है, और यह तब काम करता है जब स्टाइलिंग दोनों को अलग करने के लिए बाध्य करता है। कोई संबद्ध लेबल के बिना एक फील्ड एक नंगे संपादन बॉक्स के रूप में घोषित की जाती है जिसका कोई उद्देश्य नहीं है, जो वेब पर सबसे आम पहुंच-क्षमता विफलताओं में से एक है। पहुंच-क्षमता अध्याय इस पर व्यापक रूप से जाता है।

Junoइनपुट और लेबल<input> वह बॉक्स है जिसमें लोग टाइप करते हैं, और <label> वह पाठ है जो उन्हें बताता है कि वहां क्या जाता है। मेल खाने वाले for और id के साथ उन्हें जोड़ें और लेबल पर क्लिक करने से सीधे बॉक्स में कूद जाते हैं। हर एक इनपुट को एक लेबल दें; एक अकेला बॉक्स जिसके आगे कोई शब्द नहीं है केवल लोगों को भ्रमित करता है।

Junoइनपुट और लेबल लेबल के for को इनपुट के id से मेल खाएं और दोनों जुड़े हुए हैं। required पर झुकें खाली सबमिट को ब्लॉक करने के लिए, लेकिन placeholder को लेबल की जगह न दें: यह उस पल गायब हो जाता है जब कोई टाइप करता है। असली लेबल, हर फील्ड, कोई अपवाद नहीं।

Junoइनपुट और लेबल लेबल को जोड़ने के दो तरीके: for को id से मेल खाना, या इनपुट को लेबल के अंदर लपेटना। दोनों फील्ड को एक पहुंच योग्य नाम देते हैं, वह पाठ जो स्क्रीन रीडर पढ़ता है, और स्पष्ट for/id अधिक मजबूत विकल्प है जब CSS चीजों को अलग करता है। कोई लेबल के बिना एक फील्ड एक नाम रहित बॉक्स के रूप में पढ़ता है, जो सबसे आम पहुंच-क्षमता मिस में से एक है।

अन्य कंट्रोल

सब कुछ एक सादा टेक्स्ट बॉक्स नहीं है। कुछ प्रश्नों का उत्तर टिक करके, चुनकर, या सूची से चुनकर बेहतर दिया जाता है। एक टिक बॉक्स (एक चेकबॉक्स) एक ऑन-या-ऑफ स्विच है, और एक ड्रॉपडाउन किसी को कई विकल्पों से एक चुनने देता है।

<label>
  <input type="checkbox"> मुझे न्यूजलेटर भेजें
</label>

<label for="size">आकार</label>
<select id="size">
  <option>छोटा</option>
  <option>माध्यम</option>
  <option>बड़ा</option>
</select>

आपको इन्हें याद रखने की जरूरत नहीं है। अभी के लिए बिंदु यह है कि एक फॉर्म अपने प्रश्नों को किसी भी तरह से पूछ सकता है जो फिट बैठता है: टाइप करो, टिक करो, या सूची से चुनो।

<input> एलिमेंट अपनी type विशेषता के आधार पर आकार बदलता है, और सही प्रकार आपको एक बेहतर कीबोर्ड, अंतर्निर्मित सत्यापन, और एक मूल पिकर मुफ्त देता है:

<input type="email">     <!-- @ आकार को सत्यापित करता है, मोबाइल पर ईमेल कीबोर्ड -->
<input type="number">    <!-- संख्यात्मक कीपैड, ऊपर/नीचे स्टेपर्स -->
<input type="password">  <!-- वर्णों को मास्क करता है -->
<input type="date">      <!-- मूल दिनांक पिकर -->
<input type="checkbox">  <!-- एक एकल ऑन/ऑफ टॉगल -->
<input type="radio">     <!-- समूह से एक चुनें -->

<input> से परे, तीन एलिमेंट बाकी को कवर करते हैं। <textarea> लंबी लिखावट के लिए एक बहु-पंक्ति टेक्स्ट बॉक्स है। <select> और <option> बच्चों के साथ एक ड्रॉपडाउन सूची है। और जब आपको संबंधित फील्ड दृश्य और अर्थ से समूहित करने की जरूरत है, उन्हें एक <fieldset> में एक <legend> के साथ लपेटें जो समूह का नाम देता है:

<fieldset>
  <legend>डिलीवरी गति</legend>
  <label><input type="radio" name="speed" value="standard"> मानक</label>
  <label><input type="radio" name="speed" value="express"> एक्सप्रेस</label>
</fieldset>

<label for="message">संदेश</label>
<textarea id="message" name="message" rows="4"></textarea>

बटन भी type लेते हैं। type="submit" फॉर्म भेजता है (एक फॉर्म के अंदर बटन के लिए डिफ़ॉल्ट), type="reset" हर फील्ड को अपने शुरुआती मान में वापस साफ करता है, और type="button" अपने आप पर कुछ नहीं करता और JavaScript को हुक करने के लिए वहां है।

प्रत्येक कंट्रोल प्रकार व्यवहार रखता है जिसे आप इसे भेजने से पहले जानना चाहते हैं। रेडियो बटन एक साझा name द्वारा समूहीकृत होते हैं: केवल एक समूह में एक रेडियो चुना जा सकता है, और वह समूहन है जो उन्हें परस्पर एकमात्र बनाता है, इसलिए एक लापता या गलत name शांति से समूह को स्वतंत्र टॉगल में तोड़ देता है।

<fieldset>
  <legend>डिलीवरी गति</legend>
  <label><input type="radio" name="speed" value="standard" checked> मानक</label>
  <label><input type="radio" name="speed" value="express"> एक्सप्रेस</label>
</fieldset>

एक <fieldset> और <legend> केवल दृश्य नहीं हैं। <legend> स्क्रीन रीडर द्वारा सेट में हर कंट्रोल के लिए संदर्भ के रूप में घोषित किया जाता है, इसलिए "डिलीवरी गति" फील्डसेट में एक रेडियो "डिलीवरी गति, मानक" के रूप में पढ़ता है, जो एक समझदारी वाले फॉर्म और विकल्पों की एक सूची के बीच का अंतर है। दो और उत्पादन नोट्स। एक चेकबॉक्स केवल तभी अपना मान भेजता है जब यह टिक होता है; एक अनटिक्ड बॉक्स सबमिशन से पूरी तरह अनुपस्थित है, इसलिए सर्वर कुछ नहीं या एक गलत नहीं देखता है, जो अन्य तरफ डेटा को कैसे पढ़ा जाता है यह आकार देता है। और एक फॉर्म के अंदर type="submit" <button> के लिए डिफ़ॉल्ट प्रकार है, इसलिए एक नंगे <button> जिसका आप JavaScript ट्रिगर के रूप में मतलब रखते हैं फॉर्म सबमिट करेगा और पृष्ठ को पुनः लोड करेगा जब तक आप type="button" सेट न करें। वह डिफ़ॉल्ट लगातार लोगों को पकड़ता है।

Junoअन्य कंट्रोल एक फॉर्म एक से अधिक तरीके से पूछ सकता है: हां-या-नहीं के लिए एक टिक बॉक्स, सूची से एक चीज़ चुनने के लिए एक ड्रॉपडाउन। एक चेकबॉक्स <input type="checkbox"> है, और एक ड्रॉपडाउन एक <select> है जो <option> विकल्प को धारण करता है। उन्हें याद रखने की जरूरत नहीं; फॉर्म में सादे बॉक्स से अधिक होता है जब एक प्रश्न को इसकी जरूरत होती है।

Junoअन्य कंट्रोल इनपुट का type इसे पुनः आकार देता है: email, number, date, password, checkbox, radio, प्रत्येक एक फिटिंग कीबोर्ड या पिकर के साथ। लंबे पाठ के लिए <textarea> के लिए पहुंचें, एक ड्रॉपडाउन के लिए <select>, और संबंधित फील्ड को समूहित करने के लिए एक <fieldset> एक <legend> के साथ। बटन प्रकारों पर नजर रखें: submit एक फॉर्म के अंदर डिफ़ॉल्ट है।

Junoअन्य कंट्रोल रेडियो एक साझा name द्वारा समूहीकृत होते हैं, और एक <legend> फील्डसेट में हर कंट्रोल को बोली संदर्भ देता है, इसलिए यह संरचना है, सजावट नहीं। दो जाल: एक अनटिक्ड चेकबॉक्स बिल्कुल भी कुछ नहीं भेजता है, एक गलत नहीं, और एक नंगा <button> type="submit" को डिफ़ॉल्ट करता है, इसलिए यह पृष्ठ पुनः लोड करेगा जब तक आप type="button" सेट न करें।

फॉर्म डेटा को कैसे नाम दिया जाता है और सबमिट किया जाता है

जब एक फॉर्म भेजा जाता है, तो प्रत्येक उत्तर को एक लेबल की जरूरत है ताकि जो कोई इसे प्राप्त करता है वह जानता हो कि कौन सा बॉक्स यह आया। वह लेबल इनपुट का name है। आप इसे एक बार सेट करते हैं, और यह मान के साथ यात्रा करता है।

<label for="city">शहर</label>
<input id="city" name="city">

यदि आगंतुक उस बॉक्स में "दिल्ली" टाइप करता है, तो फॉर्म जोड़ी "city is दिल्ली" भेजता है। name यह है कि प्राप्त करने वाला पक्ष एक उत्तर को दूसरे से कैसे बताता है। बिना name वाला इनपुट सबमिशन से पूरी तरह छोड़ा जाता है, इसलिए यह छोटी विशेषता वह है जो वास्तव में डेटा को दिखाता है।

फॉर्म डेटा नाम/मान जोड़े के एक सेट के रूप में भेजा जाता है: प्रत्येक कंट्रोल का name कुंजी बन जाता है और जो आगंतुक ने दर्ज किया वह मान बन जाता है। केवल name के साथ कंट्रोल शामिल होते हैं, इसलिए name यह है जो कंट्रोल को सबमिट किए गए डेटा में बदल देता है।

<form action="/search" method="get">
  <label for="q">खोज</label>
  <input id="q" name="q" type="search">
  <label for="sort">इसके अनुसार सॉर्ट करें</label>
  <select id="sort" name="sort">
    <option value="recent">सबसे हाल का</option>
    <option value="top">शीर्ष रेटेड</option>
  </select>
  <button type="submit">खोज</button>
</form>

method विशेषता चुनती है कि वे जोड़े कैसे यात्रा करते हैं। method="get" उन्हें URL में एक क्वेरी स्ट्रिंग (/search?q=जूते&sort=recent) के रूप में जोड़ता है, जो खोज और फ़िल्टर करने के लिए उपयुक्त है जिन्हें आप बुकमार्क कर सकते हैं या साझा कर सकते हैं। method="post" उन्हें अनुरोध बॉडी में नज़र से बाहर रखता है, जो कुछ भी के लिए उपयुक्त है जो डेटा को बदल देता है या URL में नहीं होना चाहिए, जैसे कि एक पासवर्ड या एक भुगतान।

हर सबमिशन नाम/मान जोड़े का एक सेट है, और तीन विवरण तय करते हैं कि उन्हें कैसे एनकोड और भेजा जाता है।

method पहला है। get जोड़े को क्वेरी स्ट्रिंग के रूप में URL में सीरीलाइज़ करता है, पता के बाद ?key=value&key=value पाठ। यह अनुरोध को दोहराने योग्य और बुकमार्क योग्य बनाता है, और इसका मतलब है कि मान URL में, ब्राउज़र इतिहास में, और सर्वर लॉग में दिखाई देते हैं, इसलिए get पढ़ने के लिए है (खोज, फ़िल्टर) और कभी भी रहस्यों के लिए नहीं। post जोड़े को अनुरोध बॉडी में ले जाता है, इसके बजाय, जो कुछ भी करता है जो स्थिति को बदल देता है या संवेदनशील है उसके लिए विकल्प है।

enctype दूसरा है: एन्कोडिंग जो कहता है कि बॉडी कैसे स्वरूपित है। डिफ़ॉल्ट, application/x-www-form-urlencoded, जोड़े को एक key=value&... स्ट्रिंग में पैक करता है, जो टेक्स्ट के लिए ठीक है। एक चुनी हुई फाइल भेजने के लिए आपको enctype="multipart/form-data" पर स्विच करना चाहिए, वह प्रारूप जो टेक्स्ट फील्ड के साथ फाइल बाइट ले जा सकता है; एक फाइल इनपुट सही तरीके से अपलोड नहीं होगा इसके बिना।

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="avatar">प्रोफ़ाइल चित्र</label>
  <input id="avatar" name="avatar" type="file">
  <button type="submit">अपलोड करें</button>
</form>

तीसरा autocomplete है, और यह वह है जहां नामकरण UX और पहुंच-क्षमता में वापस भुगतान करता है। एक autocomplete टोकन ब्राउज़र को बताता है कि एक फील्ड मानक शर्तों में क्या मायने रखता है, इसलिए यह सही सहेजा मान प्रदान कर सकता है: autocomplete="email", autocomplete="name", autocomplete="current-password", autocomplete="street-address"। ये टोकन एक निर्धारित शब्दावली हैं, मुक्त पाठ नहीं, और उन्हें सही प्राप्त करने से एक ब्राउज़र या पासवर्ड प्रबंधक एक ही टैप में फॉर्म को भर सकता है, जो फोन पर टाइप करने या सहायक तकनीक का उपयोग करने वाले लोगों के लिए सबसे महत्वपूर्ण है।

<label for="email">ईमेल</label>
<input id="email" name="email" type="email" autocomplete="email">

अंतर्निर्मित चेक को सच रखना एक अलग काम है, फॉर्म सत्यापन अध्याय में कवर किया गया; यह अनुभाग इस बारे में है कि डेटा को कैसे आकार दिया जाता है और एक बार वह मान्य होने के बाद भेजा जाता है।

Junoफॉर्म डेटा को कैसे नाम दिया जाता है और सबमिट किया जाता है प्रत्येक इनपुट का name इसके उत्तर पर टैग है, इसलिए प्राप्तकर्ता जानता है कि मान शहर बॉक्स से आया है न कि ईमेल वाले से। name सेट करें, और बॉक्स का मान एक लेबल किए गए जोड़ी के रूप में भेजा जाता है। इसे भूल जाओ, और वह फील्ड शांति से छोड़ दिया जाता है, जो पहली बार बहुत सारे लोगों को पकड़ता है एक फॉर्म कुछ भी नहीं भेजता है।

Junoफॉर्म डेटा को कैसे नाम दिया जाता है और सबमिट किया जाता है सबमिट किया गया डेटा नाम/मान जोड़ी है, और केवल name के साथ कंट्रोल शामिल होते हैं। method को काम से मेल खाने के लिए चुनें: get मान को URL में डालता है खोज और फ़िल्टर के लिए जिन्हें आप बुकमार्क कर सकते हैं, post उन्हें बॉडी में छुपाता है कुछ भी जो डेटा को बदलता है या एक रहस्य रखता है के लिए। URL में पासवर्ड कभी न बनाने वाली गलती है।

Junoफॉर्म डेटा को कैसे नाम दिया जाता है और सबमिट किया जाता हैget जोड़े को URL में लिखता है, इसलिए यह पढ़ने के लिए है और कभी भी रहस्यों के लिए नहीं; post उन्हें बॉडी में ले जाता है। enctype को multipart/form-data पर स्विच करें या एक फाइल इनपुट अपलोड नहीं होगा। और email और current-password जैसे autocomplete टोकन पर प्रयास खर्च करें: वे एक निर्धारित शब्दावली हैं, और उन्हें सही प्राप्त करने से एक फोन या पासवर्ड प्रबंधक एक ही टैप में फॉर्म को भर सकता है।