HTML for Kids · पाठ

फ़ॉर्म: उपयोगकर्ता से जानकारी लेना

टेक्स्ट बॉक्स, बटन और अन्य चीज़ों वाले सरल फ़ॉर्म बनाएँ

पाठ 2, कुल 4 में से10 चरण

फ़ॉर्म: उपयोगकर्ता से जानकारी लेना, CoddyKit पर HTML for Kids का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह HTML for Kids सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

फ़ॉर्म: उपयोगकर्ता से इनपुट लेना

अगले पाठ में आपका स्वागत है! आज हम HTML में फ़ॉर्म बनाना सीखेंगे। फ़ॉर्म उपयोगकर्ताओं को आपके वेब पेज पर अपना नाम या ईमेल पता जैसी जानकारी दर्ज करने की सुविधा देते हैं।

फ़ॉर्म: उपयोगकर्ता से जानकारी लेना — चित्र 1

फ़ॉर्म क्या होते हैं?

फ़ॉर्म का उपयोग उपयोगकर्ताओं से जानकारी एकत्र करने के लिए किया जाता है। उदाहरण के लिए, किसी खाते के लिए साइन अप करते समय आप अपने नाम और ईमेल पते जैसे फ़ील्ड वाला फ़ॉर्म भरते हैं।

HTML में फ़ॉर्म <form> टैग का उपयोग करके बनाए जाते हैं।

मूल फ़ॉर्म बनाना

फ़ॉर्म <form> टैग का उपयोग करके बनाया जाता है। इस टैग के भीतर आप इनपुट फ़ील्ड, बटन और अन्य चीज़ें जोड़ते हैं।

उदाहरण:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">Submit</button>
</form>

फ़ॉर्म इनपुट के प्रकार

HTML फ़ॉर्म विभिन्न प्रकार के इनपुट फ़ील्ड का समर्थन करते हैं। इनमें से कुछ सामान्य प्रकार ये हैं:

text: छोटे पाठ के इनपुट के लिए
email: ईमेल पतों के लिए
password: पासवर्ड के लिए
number: संख्याओं के लिए

उदाहरण:

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" />
</form>

रेडियो बटन और चेकबॉक्स जोड़ना

एक विकल्प चुनने के लिए रेडियो बटन और कई विकल्प चुनने के लिए चेकबॉक्स का उपयोग कर सकते हैं।

उदाहरण:

<form>
  <p>Favorite Color:</p>
  <input type="radio" id="red" name="color" value="red" />
  <label for="red">Red</label>
  <br />
  <input type="radio" id="blue" name="color" value="blue" />
  <label for="blue">Blue</label>
  <br />

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <br />
  <input type="checkbox" id="sports" name="hobby" value="sports" />
  <label for="sports">Sports</label>
</form>

ड्रॉपडाउन मेनू जोड़ना

विकल्पों की सूची में से उपयोगकर्ताओं को चुनने की सुविधा देने वाले ड्रॉपडाउन मेनू बनाने के लिए <select> टैग का उपयोग कर सकते हैं।

उदाहरण:

<form>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
  </select>
</form>

फ़ॉर्म बटन

बटन उपयोगकर्ताओं को फ़ॉर्म सबमिट या रीसेट करने की सुविधा देते हैं। आमतौर पर <button> टैग का उपयोग किया जाता है।

उदाहरण:

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

अपने फ़ॉर्म को शैली देना

आप अपने फ़ॉर्म को अधिक आकर्षक बनाने के लिए CSS का उपयोग करके उसकी शैली बदल सकते हैं। उदाहरण के लिए, आप फ़ील्ड का आकार बदल सकते हैं या उनके रंग बदल सकते हैं।

उदाहरण:

<style>
  form {
    width: 300px;
    margin: 20px auto;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

बहुत बढ़िया!

बधाई हो! आपने फ़ॉर्म बनाना, अलग-अलग इनपुट प्रकारों का उपयोग करना और उन्हें शैली देना सीख लिया है। उपयोगकर्ता का डेटा एकत्र करने और अपने वेब पेजों को इंटरैक्टिव बनाने के लिए फ़ॉर्म आवश्यक होते हैं। अगले पाठ में हम अपने पेजों को अधिक गतिशील बनाने के लिए वीडियो और ऑडियो जैसे मल्टीमीडिया का उपयोग करना सीखेंगे। और अधिक रचनात्मकता के लिए तैयार हो जाइए!

फ़ॉर्म: उपयोगकर्ता से जानकारी लेना — चित्र 10

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 16
पाठ: 35

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “फ़ॉर्म: उपयोगकर्ता से जानकारी लेना” पाठ निःशुल्क है?

हाँ—“फ़ॉर्म: उपयोगकर्ता से जानकारी लेना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और HTML for Kids पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। HTML for Kids पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ़ॉर्म: उपयोगकर्ता से जानकारी लेना” में मैं क्या सीखूँगा?

टेक्स्ट बॉक्स, बटन और अन्य चीज़ों वाले सरल फ़ॉर्म बनाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML for Kids का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML for Kids शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML for Kids शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“फ़ॉर्म: उपयोगकर्ता से जानकारी लेना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML for Kids पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML for Kids पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML for Kids पर वापस जाएँ