HTML Form in Hindi – HTML Form क्या है और कैसे बनाएं

नमस्कार दोस्तों! अगर आप HTML सीख रहे हैं, तो “html form in hindi“ एक ऐसा विषय है जिसे हर शुरुआती (Beginner) को अच्छी तरह समझना चाहिए।
इस लेख में हम आपको विस्तार से बताएँगे:

• HTML Form क्या होता है?
• HTML Form का उपयोग कहाँ-कहाँ किया जाता है?
• HTML Form बनाने की मूल संरचना (Basic Structure)
• Form टैग और उसके महत्वपूर्ण Attributes
• HTML Form के प्रमुख Elements
• Contact Form का उदाहरण — Code और Output के साथ
• FAQs (अक्सर पूछे जाने वाले प्रश्न)

दोस्तों यह लेख पढ़ने के बाद आपके मन में HTML Form से जुड़े लगभग सभी सवालों के जवाब मिल जाएँगे, और आप खुद से एक Basic से लेकर Advance Form बना पाएँगे।

---

HTML Form क्या होता है?- Html Form In hindi

दोस्तों, HTML Form का उपयोग करके हम किसी भी उपयोगकर्ता (User) से जानकारी एकत्र (Collect) कर सकते हैं — जैसे उनका नाम, मोबाइल नंबर, ईमेल आईडी, पता आदि।

आपने कई वेबसाइट्स पर फ़ॉर्म देखे होंगे, जैसे:

• Signup Form
• Login Form
• Contact Us Form

ये सभी उदाहरण HTML Form की मदद से ही बनाए जाते हैं।

इन फ़ॉर्म्स की सहायता से उपयोगकर्ता (User) अपनी जानकारी भरता है, जो आगे की प्रक्रिया (Processing) के लिए उपयोग की जाती है।

---

HTML Form कहाँ-कहाँ उपयोग होते हैं? – HTML Form Kaha Use Kare In Hindi

दोस्तों, HTML Form का उपयोग वहाँ किया जाता है जहाँ हमें उपयोगकर्ता (User) से जानकारी एकत्रित करनी होती है। ये फ़ॉर्म मुख्य रूप से विभिन्न वेबसाइट्स पर इस्तेमाल किए जाते हैं, जैसे:

• Signup और Login Forms – जहाँ उपयोगकर्ता अपना ईमेल और पासवर्ड दर्ज करता है।
• Contact Us Forms – जहाँ उपयोगकर्ता अपना नाम, ईमेल और संदेश भेजता है।
• Feedback या Job Application Forms – जहाँ उपयोगकर्ता अपनी व्यक्तिगत जानकारी (Details) जमा करता है।
• Online Surveys और Quiz Forms – जहाँ उपयोगकर्ता से राय (Opinion) या उत्तर (Response) लिया जाता है।
• Checkout Forms (E-commerce Websites) – जहाँ उपयोगकर्ता शिपिंग (Shipping) और भुगतान (Payment) की जानकारी भरता है।

दोस्तों, इन सभी स्थितियों में HTML Form बहुत महत्वपूर्ण भूमिका निभाता है, क्योंकि इसी के माध्यम से उपयोगकर्ता का इनपुट वेबसाइट तक पहुँचता है।
और इस प्रकार का हर फ़ॉर्म हम HTML Form का उपयोग करके ही बनाते हैं।

---

Html Form Basic Structure In Hindi – HTML Form का बेसिक स्ट्रक्चर

दोस्तों, HTML Form बनाने के लिए सबसे पहले हमें HTML का <form> टैग उपयोग करना होता है।
यह टैग फ़ॉर्म का शुरुआती और अंतिम बिंदु (Starting & Ending Point) तय करता है, जिसमें हम Input Fields, Buttons, और Labels जैसे एलिमेंट्स जोड़ते हैं।

HTML Form का बेसिक सिंटैक्स:

<form>
    <!-- यहाँ फ़ॉर्म की सामग्री लिखी जाती है -->
</form>

दोस्तों, यह स्ट्रक्चर एक खाली (Blank) फ़ॉर्म बनाता है, जिसमें आप अलग-अलग एलिमेंट्स जोड़कर इसे एक पूर्ण (Complete) फ़ॉर्म में बदल सकते हैं — जैसे नाम (Name) इनपुट, सबमिट बटन (Submit Button) आदि।

---

Form टैग और उसके महत्वपूर्ण (Important) Attributes –Form Tag Important Attributes In Hindi

1. action attribute

दोस्तों, <form> टैग को डिक्लेयर करने के बाद हमें सबसे पहले action Attribute देना होता है।

<form action="Aditya.html">

Action Attribute क्या करता है?

Action Attribute यह बताता है कि जब यूज़र फ़ॉर्म सबमिट करेगा, तो फ़ॉर्म का डेटा कहाँ भेजा जाएगा — यानी किस फ़ाइल या URL पर।

इसमें आप किसी HTML पेज, PHP फ़ाइल या बैकएंड स्क्रिप्ट का पाथ दे सकते हैं।

उदाहरण से समझिए:
दोस्तों मान लीजिए आपने एक फ़ॉर्म बनाया है जिसमें यूज़र अपना नाम, ईमेल और फ़ोन नंबर भरता है।
जब यूज़र Submit बटन पर क्लिक करेगा, तो सारा डेटा उसी फ़ाइल में भेजा जाएगा जो action Attribute में लिखी है (जैसे Aditya.html)।

यह फ़ाइल हो सकती है:

• कोई PHP फ़ाइल (जैसे submit.php)
• कोई Database-connected script
• या कोई Email service

दोस्तो इशिलिया फ़ॉर्म के अंदर action Attribute देना ज़रूरी होता है नहीं तो बिना इसके, फ़ॉर्म का डेटा किसी को नहीं मिलेगा।

2. method Attribute (GET या POST)

दोस्तों, फ़ॉर्म बनाते समय action के साथ-साथ हमें method Attribute भी देना ज़रूरी होता है।

<form action="submit.php" method="post">

Method Attribute क्या करता है?

Method Attribute यह तय करता है कि फ़ॉर्म का डेटा सर्वर पर किस तरीके से भेजा जाएगा — यानी किस method से।

HTML फ़ॉर्म में दो मुख्य Method होते हैं:

1. GET
2. POST

1. GET Method:

• दोस्तो GET method में फ़ॉर्म का डेटा URL के माध्यम से भेजा जाता है।
• उदाहरण:
  submit.php?name=Aditya&email=abc@gmail.com
• डेटा सभी को दिखाई देता है, इसलिए यह सुरक्षित (secure) नहीं होता।
• आमतौर पर search forms या ऐसे फ़ॉर्म में उपयोग किया जाता है जहाँ डेटा संवेदनशील (sensitive) न हो।

POST Method:

• दोस्तो POST method में फ़ॉर्म का डेटा पृष्ठभूमि (background) में सुरक्षित तरीके से भेजा जाता है।
• डेटा URL में दिखाई नहीं देता।
• इसका उपयोग Login forms, Sign-up forms, Payment forms और अन्य संवेदनशील जानकारी वाले फ़ॉर्म में किया जाता है।
• यह तरीका ज्यादा सुरक्षित और पेशेवर (professional) माना जाता है।

दोस्तो जब भी आपको यूज़र से व्यक्तिगत या संवेदनशील डेटा लेना हो, हमेशा: method=”post” का ही उपयोग करें।

3. autocomplete attribute

दोस्तों, अब बात करते हैं autocomplete Attribute की।

<form action="submit.php" method="post" autocomplete="on">

autocomplete Attribute क्या करता है?

दोस्तों यह attribute ब्राउज़र को बताता है कि यूज़र द्वारा पहले भरा गया डेटा याद रखा जाए या नहीं।

इसकी दो संभावित values होती हैं:

1. on — ब्राउज़र यूज़र के नाम, ईमेल, पता आदि को याद रखेगा और सुझाव देगा।
2. off — ब्राउज़र कोई भी डेटा सेव नहीं करेगा।

उदाहरण से समझें:
दोस्तों अगर आप किसी login form में autocomplete="on" रखते हैं, तो जब यूज़र पहले लॉगिन कर चुका हो, तो ब्राउज़र उसे उसका ईमेल या पासवर्ड सुझाव के रूप में दिखाएगा।

लेकिन अगर आप कोई सेंसिटिव फॉर्म (जैसे payment form) बना रहे हैं, तो वहाँ autocomplete="off" का उपयोग करें ताकि ब्राउज़र कोई भी डेटा सेव न करे और सुरक्षा बनी रहे।

4. target attribute

दोस्तों, ये attribute बताता है कि form submit होने के बाद नया पेज कहाँ खुलेगा — यानी नई टैब में या मौजूदा टैब में।

• “_self” – फॉर्म वहीँ वाली टैब में खुलेगा (यह डिफॉल्ट (default) होता है)
• “_blank” – फॉर्म नए टैब में खुलेगा

उदाहरण:

<form action="submit.php" target="_blank">

दोस्तों इस example में, जब user फॉर्म सबमिट करेगा, तो फॉर्म का रिजल्ट एक नई टैब में खुलेगा।

---

HTML Form Imporatnt Elements In hindi – HTML फॉर्म के Important Elements कौन-कौन से हैं?

तत्व (Element)	विवरण (Description)	उदाहरण (Example Syntax)	उपयोग (Real-life Use)
<form>	पूरा form बनाने के लिए container होता है।	<form action="submit.html">	यूज़र से डेटा इकट्ठा करना।
<input>	टेक्स्ट, ईमेल, पासवर्ड जैसे फ़ील्ड्स के लिए।	<input type="text">	नाम, ईमेल, पासवर्ड लेना।
<label>	किसी input फ़ील्ड का नाम दिखाने के लिए।	<label for="name">Name:</label>	फील्ड को पहचानना आसान बनाना।
<textarea>	मल्टी-लाइन टेक्स्ट इनपुट के लिए।	<textarea rows="4" cols="50"></textarea>	फीडबैक या कमेंट्स लेना।
<select>	ड्रॉपडाउन मेन्यू दिखाने के लिए।	<select><option>HTML</option></select>	विकल्प देना जैसे कोर्स, देश।
<option>	<select> के अंदर विकल्प निर्धारित करता है।	<option value="html">HTML</option>	ड्रॉपडाउन के विकल्प बनाना।
<button>	फॉर्म सबमिट करने या कोई एक्शन करने के लिए।	<button type="submit">Submit</button>	फॉर्म सबमिट करना।
<fieldset>	फॉर्म के एलिमेंट्स को ग्रुप करने के लिए।	<fieldset>...</fieldset>	संबंधित फील्ड्स को एक साथ रखना।
<legend>	<fieldset> का शीर्षक बताने के लिए।	<legend>Personal Info</legend>	फॉर्म सेक्शन का शीर्षक देना।

---

Contact Form का उदाहरण — कोड और आउटपुट के साथ

<h2>Contact Form</h2>
<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" placeholder="Apka Naam"><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="Apka Email"><br><br>

  <label for="reason">Reason for Contact:</label><br>
  <select id="reason" name="reason">
    <option value="">Select an option</option>
    <option value="feedback">Feedback</option>
    <option value="support">Support</option>
    <option value="other">Other</option>
  </select><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="5" placeholder="Apka message likhiye..."></textarea><br><br>

  <button type="submit">Submit</button>
</form>

Form Output Preview:

FAQs (अक्सर पूछे जाने वाले प्रश्न)

---

इसे भी पढ़े –

• HTML Kya Hai? HTML क्या है? 2025 Ki Complete Beginner Guide (With Examples)
• HTML Editor क्या है? – HTML Editor in Hindi
• HTML Attributes In Hindi
• C Operators in Hindi – C ऑपरेटर्स क्या हैं?
• HTML Heading Tags for Beginners with Examples (Avoid These Common Mistakes!)

---

निष्कर्ष (Conclusion)

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

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

दोस्तों, अगर आपको ये आर्टिकल हेल्पफुल लगा हो तो इसे जरूर शेयर करें, कमेंट करें, और अपने दोस्तों को भी रिकमेंड करें।
अगला आर्टिकल किस टॉपिक पर चाहिए? कमेंट करके जरूर बताना।

Written by: Aditya (Programming Sikho)