HTML Forms
वेब एप्लिकेशन की नींव होते हैं। चाहे आप यूज़र से लॉगिन डेटा, फीडबैक, या फाइल अपलोड करवा रहे हों — इसके लिए HTML form की ज़रूरत पड़ती है।
इस ब्लॉग में हम सीखेंगे कि HTML forms कैसे काम करते हैं, उनके बेसिक tags क्या होते हैं, और कैसे एक simple form बनाया जा सकता है।
📄 HTML Form क्या होता है?
HTML में <form> टैग एक इंटरफेस बनाता है जिसमें यूज़र input दे सकता है। जब आप "Submit" बटन दबाते हैं, डेटा action URL पर method (GET या POST) के ज़रिए भेजा जाता है।
<form action="/submit" method="POST">
<!-- inputs here -->
</form>
🔠 Common Input Types
| Input Type | उपयोग |
|---|---|
<input type="text"> |
सामान्य टेक्स्ट |
<input type="email"> |
ईमेल वैलिडेशन |
<input type="number"> |
नंबर इनपुट |
<input type="password"> |
पासवर्ड फील्ड |
<input type="checkbox"> |
मल्टी चॉइस |
<input type="radio"> |
सिंगल चॉइस |
<input type="date"> |
दिनांक चुनना |
<input type="range"> |
स्लाइडर वैल्यू |
<input type="file"> |
फाइल अपलोड |
🏷️ महत्वपूर्ण टैग्स
<label for="id">: एक्सेसिबिलिटी बढ़ाता है<fieldset>: संबंधित inputs को ग्रुप करता है<legend>: ग्रुप को शीर्षक देता है<select>और<option>: Dropdown मेनू<textarea>: लंबा टेक्स्ट इनपुट
🧠 Input Attributes
| Attribute | मतलब |
|---|---|
required |
भरना ज़रूरी है |
placeholder |
डिफ़ॉल्ट निर्देश |
readonly |
सिर्फ़ पढ़ा जा सकता है |
disabled |
यूज़र इसे बदल नहीं सकता |
✍️ उदाहरण: एक Signup फॉर्म
<form action="/submit" method="POST">
<label for="name">नाम:</label>
<input
type="text"
id="name"
name="name"
required
placeholder="अपना नाम दर्ज करें"
/>
<label for="email">ईमेल:</label>
<input type="email" id="email" name="email" required />
<label for="gender">लिंग:</label>
<input type="radio" name="gender" value="male" /> पुरुष
<input type="radio" name="gender" value="female" /> महिला
<label for="resume">रिज़्यूमे अपलोड करें:</label>
<input type="file" id="resume" name="resume" />
<button type="submit">सबमिट करें</button>
</form>
🧠 टीचिंग टिप
शुरुआती छात्रों को एक सिंपल Signup या Feedback Form बनवाइए।
इसके बाद उन्हें required, placeholder, और disabled जैसे attributes समझाइए।
Form Validation (जैसे ईमेल सही होना, फील्ड खाली न होना) दिखाकर real-world उपयोग भी बताइए।
🔚 निष्कर्ष
HTML forms एक ज़रूरी कौशल है जो हर फ्रंटएंड डेवलपर को आना चाहिए। इनसे आप वेबसाइट को इंटरएक्टिव बना सकते हैं और यूज़र का डेटा सुरक्षित तरीके से प्रोसेस कर सकते हैं।
अगली बार जब आप लॉगिन पेज देखें, सोचिए — उसके पीछे HTML form ही है जो सब कुछ संभाल रहा है!