← Back to HTML Course | Chapter 5: Forms | Lesson 2 of 7

HTML Form Attributes

कल्पना कीजिए कि आप किसी लोकल रेस्टोरेंट में एक पेपर feedback फॉर्म भर रहे हैं। भरने के बाद, आप उस पेपर को अपनी टेबल पर यूँ ही नहीं छोड़ते; आप दीवार पर लगे feedback बॉक्स को ढूँढते हैं ताकि उसे उसमें डाल सकें। Form attributes वही डिलीवरी इंस्ट्रक्शन्स हैं। ये आपके पेज पर दिखने वाले input fields को नहीं बदलते, बल्कि ब्राउज़र को बिल्कुल बताते हैं कि आपका डेटा कहाँ भेजना है (server endpoint), उसे कैसे पैकेज करना है (GET या POST), और रिस्पॉन्स कैसे दिखाना है। इन attributes को सही तरीके से कॉन्फ़िगर करना आपके user data को सुरक्षित रखने और आपके forms को सही तरीके से काम करने के लिए बेहद ज़रूरी है।
Syntax
markup
<form action="url" method="get|post" target="_self" autocomplete="on|off" novalidate>
  <!-- form controls -->
</form>

action Attribute

action attribute उस सर्वर URL या endpoint को डिफाइन करता है जहाँ यूज़र के submit बटन क्लिक करने पर फॉर्म डेटा भेजा जाएगा।

Note:
  • अगर आप action attribute को खाली छोड़ देते हैं, तो ब्राउज़र डेटा को सीधे मौजूदा पेज के URL पर सबमिट कर देगा।
  • Accepted values:
  • action — absolute URL | relative URL | empty (current page)
  • Overridden by a submit button formaction
Warning: सुनिश्चित करें कि आपका action URL पूरी तरह सही और सुरक्षित हो, वरना आपके form submissions फेल हो जाएंगे।

उदाहरण: The action Attribute

markup
<form action="/submit-form">
  <input type="text" name="query">
</form>

method Attribute

method attribute आपके फॉर्म डेटा को भेजने के लिए उपयोग किए जाने वाले HTTP protocol method को डिफाइन करता है। आप GET method (जो डेटा को URL path में जोड़ता है) और POST method (जो डेटा को request body के अंदर छुपाता है) के बीच चुन सकते हैं।

Note:
  • search queries के लिए GET method का उपयोग करें, और passwords या file uploads जैसी संवेदनशील जानकारी के लिए POST method का उपयोग करें।
  • Accepted values:
  • get — data in URL; default
  • post — data in request body
  • dialog — closes the enclosing dialog
Warning: passwords या personal data भेजने के लिए कभी भी GET method इस्तेमाल न करें, क्योंकि वे ब्राउज़र के address bar में खुलेआम दिखाई देंगे।

उदाहरण: The method Attribute

markup
<form action="/search" method="get">
  <input type="text" name="q">
</form>

target Attribute

target attribute ब्राउज़र को बताता है कि फॉर्म सबमिट होने के बाद response पेज कहाँ दिखाना है। यह बिल्कुल standard links पर मौजूद target attribute की तरह काम करता है, जिससे आप response पेज को मौजूदा विंडो में या नए टैब में लोड करा सकते हैं।

Note:
  • जब आप चाहते हैं कि फीडबैक सबमिट करने के बाद यूज़र आपके मौजूदा tool पेज पर बने रहें, तो target="_blank" सेट करें।
  • Accepted values:
  • _self — same context (default)
  • _blank — new tab or window
  • _parent — parent context
  • _top — top-level context
  • framename — a named iframe
Warning: target="_blank" का ज़्यादा इस्तेमाल न करें, क्योंकि लगातार नए टैब खुलने से आपके यूज़र के डेस्कटॉप ब्राउज़र में अव्यवस्था हो सकती है।

उदाहरण: The target Attribute

markup
<form action="/feedback" method="post" target="_blank">
  <input type="text" name="comment">
</form>

autocomplete Attribute

autocomplete attribute ब्राउज़र को बताता है कि वह यूज़र की पिछली एंट्रीज़ के आधार पर फॉर्म फील्ड्स को अपने आप भर सकता है या नहीं। आप पूरे फॉर्म के लिए या specific input फील्ड्स के लिए इस सेटिंग को ऑन या ऑफ कर सकते हैं।

Note:
  • registration forms पर autocomplete को enabled रखें ताकि आपके यूज़र को बार-बार वही डिटेल्स टाइप न करनी पड़ें।
  • Accepted values:
  • on — allow browser autofill (default)
  • off — disable autofill
Warning: shared computers पर user privacy की सुरक्षा के लिए bank accounts या security codes जैसे sensitive fields पर autocomplete डिसेबल करें।

उदाहरण: The autocomplete Attribute

markup
<form autocomplete="on">
  <input type="text" name="username">
</form>

novalidate Attribute

डिफ़ॉल्ट रूप से, ब्राउज़र सबमिट करने से पहले फॉर्म फील्ड्स पर बेसिक validation checks करते हैं (जैसे यह सुनिश्चित करना कि email फील्ड में '@' चिह्न हो)।

novalidate attribute इन native ब्राउज़र चेक्स को बंद कर देता है, जिससे आप इसके बजाय custom JavaScript का उपयोग करके validation खुद संभाल सकते हैं।

Note:
  • जब आप JavaScript का उपयोग करके कस्टम, स्टाइल किए गए error messages डिज़ाइन करना चाहते हैं, तो novalidate attribute का उपयोग करें।
  • Accepted values:
  • novalidate — boolean attribute
  • Skips built-in validation on submit
Warning: अगर आप novalidate के ज़रिए browser validation डिसेबल करते हैं, तो यूज़र्स को खाली forms सबमिट करने से रोकने के लिए आपको custom script validation लिखनी होगी।

उदाहरण: The novalidate Attribute

markup
<form action="/submit" novalidate>
  <input type="email" name="email" required>
</form>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.