HTML फॉर्म्स
In this page:
<form action="url" method="post">
<label for="id">Label</label>
<input type="text" id="id" name="name">
<button type="submit">Submit</button>
</form>form एलिमेंट
form टैग वह कंटेनर है जो आपके सभी input fields, buttons, और selection menus को एक साथ ग्रुप करता है। यह ब्राउज़र को बताता है कि इस कंटेनर के अंदर दर्ज किया गया डेटा पैकेज करके सर्वर पर भेजा जाना चाहिए।
- डेटा को सफलतापूर्वक सबमिट कराने के लिए हमेशा अपने input fields को एक form एलिमेंट के अंदर ग्रुप करें।
- Accepted attributes:
- action — URL that processes the form
- method — get | post | dialog
- enctype — application/x-www-form-urlencoded | multipart/form-data | text/plain
- target — _self | _blank | _parent | _top
- autocomplete — on | off
- novalidate — boolean
उदाहरण: The form Element
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>Text Inputs और Labels
input टैग एक ऐसा इनपुट फील्ड डिफाइन करता है जहाँ यूज़र डेटा दर्ज कर सकते हैं, और label टैग उस फील्ड के लिए एक स्पष्ट टेक्स्ट डिस्क्रिप्शन देता है। अपने labels को inputs से लिंक करने से आपके फॉर्म काफी ज़्यादा accessible और क्लिक करने में आसान बन जाते हैं।
- अपने label के for attribute को input के id attribute से मैच कराकर उन्हें आपस में लिंक करें।
- Accepted attributes:
- input type — text | password | email | number | search | tel | url
- name — key used when submitting
- id — must match the label for attribute
- label for — id of the associated control
- placeholder / required / value
उदाहरण: Text Inputs and Labels
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</form>Selection Buttons (Radio और Checkboxes)
Radio buttons का उपयोग तब किया जाता है जब आप चाहते हैं कि यूज़र किसी लिस्ट में से ठीक एक ऑप्शन चुनें, जबकि checkboxes यूज़र को एक साथ कई ऑप्शन चुनने की सुविधा देते हैं।
- radio buttons को एक साथ ग्रुप करने के लिए सुनिश्चित करें कि उन सभी का name attribute बिल्कुल एक जैसा हो।
- Accepted attributes:
- type — radio | checkbox
- name — radios with the same name form one group
- value — data sent when selected
- checked — boolean; preselects
- required / disabled — booleans
उदाहरण: Selection Buttons (Radio and Checkboxes)
<form action="/submit" method="post">
<input type="radio" id="plan-basic" name="plan" value="basic">
<label for="plan-basic">Basic</label>
<input type="radio" id="plan-pro" name="plan" value="pro">
<label for="plan-pro">Pro</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe</label>
</form>Dropdown Selection Menus (select)
select एलिमेंट का उपयोग एक साफ-सुथरा, कॉम्पैक्ट dropdown मेनू बनाने के लिए किया जाता है। यह ऑप्शन की लिस्ट (जैसे देश या file types) दिखाने के लिए एकदम सही है, बिना आपके पेज लेआउट को गन्दा किए।
- अपनी लिस्ट के सबसे ऊपर एक disabled selected ऑप्शन जोड़ें, जो एक placeholder instruction की तरह काम करे।
- Accepted attributes:
- select name — key submitted
- select multiple — boolean; allow more than one selection
- select size — number of visible rows
- option value — data sent
- option selected — boolean; preselected
- option disabled — boolean
उदाहरण: Dropdown Selection Menus (select)
<form action="/submit" method="post">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="in">India</option>
</select>
</form>Submit Action Button
एक HTML फॉर्म डेटा सबमिशन को ट्रिगर करने वाले बटन के बिना अधूरा है। अपने बटन के type attribute को submit सेट करने पर ब्राउज़र को निर्देश मिलता है कि वह सारे फॉर्म डेटा को पैकेज करके सीधे आपके सर्वर पर भेज दे।
- एक स्पष्ट button label (जैसे Submit या Upload) इस्तेमाल करें ताकि यूज़र को पता चले कि बटन क्लिक करने से क्या होगा।
- Accepted attributes:
- type — submit
- value — button label (on input type=submit)
- formaction / formmethod / formenctype / formtarget / formnovalidate — per-button overrides
उदाहरण: The Submit Action Button
<form action="/submit" method="post">
<button type="submit">Submit</button>
</form>Form Validation Attributes
HTML5 अपने साथ built-in form validation लेकर आया। आप बिना कोई JavaScript लिखे फील्ड्स को required बना सकते हैं, minimum और maximum length सेट कर सकते हैं, और यहाँ तक कि patterns के खिलाफ भी वैलिडेट कर सकते हैं।
- product codes जैसे कस्टम फॉर्मेट को वैलिडेट करने के लिए regex के साथ pattern attribute का उपयोग करें।
- Accepted attributes:
- required — boolean
- minlength / maxlength — integer text length
- min / max — number, date or time bounds
- step — number | any
- pattern — regular expression
- कभी भी सिर्फ browser validation पर निर्भर न रहें।
- अपने डेटा को हमेशा अपने सर्वर पर भी validate करें।
उदाहरण: Form Validation Attributes
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="3" maxlength="10" pattern="[A-Za-z]+">
</form>Fieldset और Legend
fieldset एलिमेंट संबंधित form fields को एक साथ ग्रुप करता है। legend एलिमेंट उस ग्रुप को एक दिखने वाला टाइटल देता है। यह accessibility और लंबे फॉर्म्स के लिए खासतौर पर महत्वपूर्ण है।
- shipping address को billing address से अलग जैसे संबंधित फील्ड्स को ग्रुप करने के लिए fieldset का उपयोग करें।
- Accepted attributes:
- fieldset disabled — boolean; disables all contained controls
- fieldset form — id of an associated form
- fieldset name — name of the group
- legend — first child; only global attributes
उदाहरण: Fieldset and Legend
<form action="/submit" method="post">
<fieldset>
<legend>Shipping Address</legend>
<label for="street">Street:</label>
<input type="text" id="street" name="street">
</fieldset>
</form>enctype Attribute
enctype attribute ब्राउज़र को बताता है कि भेजने से पहले फॉर्म डेटा को कैसे पैकेज किया जाए। file uploads के लिए आपको multipart/form-data चाहिए होता है, वरना ब्राउज़र असली फ़ाइल की जगह सिर्फ उसका नाम plain text के रूप में भेज देता है।
- जिस भी फॉर्म में file input हो, उसमें हमेशा enctype को multipart/form-data सेट करें।
- Accepted values:
- application/x-www-form-urlencoded — default
- multipart/form-data — required for file uploads
- text/plain — plain text, mainly debugging
उदाहरण: The enctype Attribute
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="document">Document:</label>
<input type="file" id="document" name="document">
</form>autocomplete Attribute
autocomplete attribute यह नियंत्रित करता है कि ब्राउज़र किसी फील्ड के लिए पहले दर्ज की गई वैल्यू सुझा सकता है या नहीं। इसे पूरे फॉर्म पर या individual inputs पर सेट किया जा सकता है, और ब्राउज़र इसका उपयोग लौटने वाले विज़िटर्स के लिए बार-बार टाइपिंग को तेज़ करने में करते हैं।
- autocomplete="email" या autocomplete="tel" जैसे specific values इस्तेमाल करें, ताकि ब्राउज़र सिर्फ raw history से नहीं बल्कि समझदारी से फील्ड्स भर सके।
- Accepted values:
- on — allow browser autofill
- off — disable autofill
- name | email | username | new-password | current-password | tel | street-address | postal-code | cc-number — specific autofill tokens
उदाहरण: The autocomplete Attribute
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password" autocomplete="off">
</form>novalidate Attribute
डिफ़ॉल्ट रूप से, अगर required या pattern जैसे built-in validation rules पूरे नहीं होते तो ब्राउज़र फॉर्म सबमिशन को रोक देते हैं।
form टैग में novalidate जोड़ने से वह ऑटोमैटिक चेकिंग बंद हो जाती है, जो तब उपयोगी होती है जब आप खुद JavaScript में validation संभालना चाहते हैं।
- जब डिफ़ॉल्ट ब्राउज़र वैलिडेशन पॉपअप आपकी साइट डिज़ाइन से मेल नहीं खाते, तो अपने custom error messages के साथ novalidate का उपयोग करें।
- Accepted values:
- novalidate — boolean attribute on form
- Disables built-in constraint validation on submit
- Per-button alternative: formnovalidate
उदाहरण: The novalidate Attribute
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</form>datalist एलिमेंट
datalist किसी input के लिए सुझाई गई वैल्यू की एक लिस्ट देता है, बिना यूज़र को सिर्फ उसी लिस्ट में से चुनने के लिए मजबूर किए — select dropdown के उलट। यूज़र फिर भी अपनी वैल्यू टाइप कर सकते हैं, लेकिन टाइप करते समय उन्हें सुझाव भी दिखते हैं।
- datalist उन चीज़ों के लिए बढ़िया है जैसे country names या product categories, जहाँ आप बहुत ज़्यादा प्रतिबंधित किए बिना इनपुट को गाइड करना चाहते हैं।
- Accepted attributes:
- datalist id — referenced by the input list attribute
- input list — id of the datalist
- option value — suggested value
- option label — optional display text
उदाहरण: The datalist Element
<form action="/submit" method="post">
<label for="country">Country:</label>
<input list="countries" id="country" name="country">
<datalist id="countries">
<option value="India">
<option value="United States">
</datalist>
</form>GET बनाम POST की समझ
GET और POST किसी फॉर्म द्वारा डेटा भेजने के दो सबसे सामान्य तरीके हैं। GET डेटा को URL में एक query string के रूप में जोड़ देता है, जिससे वह दिखने योग्य और bookmark करने योग्य बन जाता है, जो searches के लिए एकदम सही है।
POST डेटा को request body में अदृश्य रूप से भेजता है, जिससे यह passwords जैसी संवेदनशील चीज़ों या file uploads जैसी बड़ी चीज़ों के लिए बेहतर होता है।
- search forms और filters के लिए GET का उपयोग करें जहाँ URL शेयर करने पर वही नतीजे दोबारा मिलने चाहिए, और signups या purchases जैसी डेटा बदलने वाली चीज़ों के लिए POST का उपयोग करें।
- Accepted values:
- method — get | post | dialog
- get — data appended to URL query string
- post — data sent in the request body
उदाहरण: GET vs POST Explained
<form action="/search" method="get">
<label for="q">Search:</label>
<input type="text" id="q" name="q">
</form>
<form action="/signup" method="post">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</form>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: