HTML Forms: input, label, select हिंदी में सीखें
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Form से website जानकारी लेती है: login, signup, contact message, search box, payment। <form> tag सभी fields को लपेटता है, और जब visitor submit दबाता है, तो browser data को उस server address पर भेजता है जो form के action attribute में लिखा होता है।
सबसे ज़्यादा इस्तेमाल होने वाले input type
text— text की एक line (नाम, शहर)।email— email address; browser खुद उसका format जाँचता है।password— टाइप करते समय characters छिपे रहते हैं।number— सिर्फ number, ऊपर-नीचे वाले arrows के साथ।tel— phone number; mobile पर number keyboard खुलता है।date— date picker।radio— समूह से एक option चुनें।checkbox— जितने चाहें उतने option चुनें।
Label — कभी न छोड़ें
हर input को <label> चाहिए, जो for attribute से input के id से जुड़ा हो: <label for="email">Email</label> <input type="email" id="email" name="email">। Label दो काम करता है: वह visitor को बताता है कि क्या टाइप करना है, और उस पर click करने से field focus हो जाती है। Label के बिना form समझने में मुश्किल होती है — और screen reader उसे बिल्कुल नहीं समझा सकते।
दूसरे form element
<textarea> कई lines वाले text (message) के लिए है। <select> अपने <option> children के साथ dropdown होता है। <button type="submit"> form भेजता है। required attribute किसी field को ज़रूरी बना देता है — browser उसे भरे बिना submit नहीं होने देता।
name attribute ही वह है जो server देखता है। एक ही नाम वाले दो fields एक-दूसरे को overwrite कर देंगे। हर input को हमेशा एक name दें — बिना name वाला input कुछ नहीं भेजता।Form क्या है
Form से visitor website को जानकारी भेजता है — नाम, email address, message, search word। <form> tag fields को लपेटता है। जब visitor submit button दबाता है, तो browser values इकट्ठा करके उन्हें उस address पर भेजता है जो form के action attribute में है, और उस method से जो उसके method attribute में है।
याद रखने की तरकीब: Label बिना form अधूरा, name बिना data गुम।
Form के attributes
| एट्रिब्यूट | मान | विवरण |
|---|---|---|
action | एक web address | Form data कहाँ भेजा जाता है। काम करने वाले form के लिए ज़रूरी है। |
method | get या post | get data को address bar में डालता है; post उसे छिपाता है। निजी चीज़ों के लिए post इस्तेमाल करें। |
name | text | Form का अपना नाम, JavaScript इस्तेमाल करता है। |
Input के प्रकार
| प्रकार | मान | विवरण |
|---|---|---|
text | कोई भी text | Text की एक line — नाम, शहर, विषय। |
password | कोई भी text | Text dots के रूप में दिखता है, password के लिए। |
email | email address | Browser जाँचता है कि वह email जैसा दिखता है। |
number | एक number | सिर्फ number, ऊपर और नीचे वाले arrows के साथ। |
date | एक तारीख | Date picker दिखाता है। |
checkbox | on / off | Tick box — एक साथ कई tick हो सकते हैं। |
radio | एक चुनाव | गोल button — समूह में सिर्फ एक चुना जा सकता है। |
submit | — | वह button जो form भेजता है। |
Label अपने input से for attribute के ज़रिए जुड़ता है, जो input के id से मेल खाना चाहिए। Label पर click करने से input focus हो जाता है — एक छोटी चीज़ जो forms को इस्तेमाल करने में बहुत आसान बना देती है:
<label for="email">Email:</label> <input type="email" id="email" name="email" required>
name attribute ही वह है जो server को भेजा जाता है। बिना name वाला input server के लिए अदृश्य होता है — visitor ने उसमें कुछ टाइप किया हो तब भी उसका value कभी नहीं भेजा जाता। हर input जिसे data भेजना है, उसे name चाहिए।required जोड़ें। Browser तब form रोक देता है और खाली रहने पर message दिखाता है — JavaScript की ज़रूरत नहीं।आम गलतियाँ
<label>छोड़ देना — बिना label वाला form इस्तेमाल करने में मुश्किल होता है, और screen reader fields को समझा नहीं सकते।- Inputs पर
nameattribute भूल जाना — server को उन fields से कुछ नहीं मिलता। - Password form के लिए
method="get"इस्तेमाल करना — password address bar में दिख जाएगा।postइस्तेमाल करें। type="submit"के बजाय सादा button इस्तेमाल करना — form भेजी ही नहीं जाएगी।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action="/submit.php" method="post">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="course">Course:</label><br>
<select id="course" name="course">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. फ़ॉर्म का क्या काम होता है?
फ़ॉर्म से विज़िटर की जानकारी ली जाती है, जैसे नाम, ईमेल या संदेश, और सबमिट करने पर यह एक्शन में दिए पते पर भेजी जाती है।
2. हर इनपुट के साथ लेबल क्यों ज़रूरी है?
लेबल बताता है कि क्या लिखना है, और उस पर क्लिक करने से फ़ील्ड फ़ोकस हो जाती है; बिना लेबल के स्क्रीन रीडर फ़ॉर्म समझा नहीं सकता।
3. इनपुट में नेम न हो तो क्या होगा?
तो सर्वर को उस फ़ील्ड से कुछ नहीं मिलेगा, क्योंकि नेम ही वह जानकारी है जो सर्वर तक भेजी जाती है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
