अध्याय 8: HTML फॉर्म्स

HTML फॉर्म्स का उपयोग उपयोगकर्ताओं से डेटा एकत्र करने और इसे सर्वर पर भेजने के लिए किया जाता है। फॉर्म्स विभिन्न प्रकार के इनपुट एलिमेंट्स, जैसे कि टेक्स्ट इनपुट, बटन, चेकबॉक्स, रेडियो बटन, और ड्रॉपडाउन लिस्ट को शामिल करके डेटा को संग्रहित करने में मदद करते हैं। इस अध्याय में हम HTML फॉर्म्स के विभिन्न पहलुओं पर चर्चा करेंगे।

फॉर्म्स का परिचय (<form>)

<form> टैग का उपयोग एक HTML फॉर्म को परिभाषित करने के लिए किया जाता है। फॉर्म का उपयोग डेटा को एकत्रित करने और इसे सर्वर पर भेजने के लिए किया जाता है।

उदाहरण:

<form action="/submit" method="post">
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</form>

HTML का <input> एलिमेंट और इसके विभिन्न प्रकार

HTML का <input> एलिमेंट फॉर्म्स में विभिन्न प्रकार के इनपुट्स को एकत्रित करने के लिए उपयोग किया जाता है। <input> एलिमेंट के कई प्रकार होते हैं, जो विभिन्न प्रकार के डेटा को इनपुट करने की अनुमति देते हैं। आइए, विभिन्न प्रकार के <input> एलिमेंट्स और उनके उपयोग के बारे में उदाहरणों के साथ जानें।

1. <input type="text">

• विवरण: सिंगल-लाइन टेक्स्ट इनपुट के लिए उपयोग किया जाता है।
• उदाहरण:
  <label for="name">नाम:</label>
<input type="text" id="name" name="name">


2. <input type="password">

• विवरण: पासवर्ड इनपुट के लिए उपयोग किया जाता है, जिसमें टेक्स्ट छिपा रहता है।
• उदाहरण:
  <label for="password">पासवर्ड:</label>
<input type="password" id="password" name="password">


3. <input type="email">

• विवरण: ईमेल इनपुट के लिए उपयोग किया जाता है और ईमेल फॉर्मेट की वैधता की जांच करता है।
• उदाहरण:
  <label for="email">ईमेल:</label>
<input type="email" id="email" name="email">


4. <input type="number">

• विवरण: नंबर इनपुट के लिए उपयोग किया जाता है, जिसमें आप केवल संख्याएं दर्ज कर सकते हैं।
• उदाहरण:
  <label for="age">आयु:</label>
<input type="number" id="age" name="age" min="1" max="100">


5. <input type="tel">

• विवरण: टेलीफोन नंबर इनपुट के लिए उपयोग किया जाता है।
• उदाहरण:
  <label for="phone">फोन नंबर:</label>
<input type="tel" id="phone" name="phone">


6. <input type="url">

• विवरण: URL इनपुट के लिए उपयोग किया जाता है और वैध URL फॉर्मेट की जांच करता है।
• उदाहरण:
  <label for="website">वेबसाइट:</label>
<input type="url" id="website" name="website">


7. <input type="date">

• विवरण: दिनांक इनपुट के लिए उपयोग किया जाता है, जिसमें एक कैलेंडर पिकर होता है।
• उदाहरण:
  <label for="dob">जन्म तिथि:</label>
<input type="date" id="dob" name="dob">


8. <input type="checkbox">

• विवरण: चेकबॉक्स इनपुट के लिए उपयोग किया जाता है, जिसमें एक या अधिक विकल्पों को चयनित किया जा सकता है।
• उदाहरण:
  <label for="subscribe">सदस्यता लें:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">


9. <input type="radio">

• विवरण: रेडियो बटन इनपुट के लिए उपयोग किया जाता है, जिसमें केवल एक विकल्प चयनित किया जा सकता है।
• उदाहरण:
  <label>लिंग:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">पुरुष</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">महिला</label>


10. <input type="submit">

• विवरण: फॉर्म सबमिट करने के लिए एक सबमिट बटन।
• उदाहरण:
  <input type="submit" value="सबमिट करें">


11. <input type="reset">

• विवरण: फॉर्म इनपुट्स को रीसेट करने के लिए एक रीसेट बटन।
• उदाहरण:
  <input type="reset" value="रीसेट करें">


12. <input type="file">

• विवरण: फाइल अपलोड करने के लिए इनपुट।
• उदाहरण:
  <label for="file">फाइल अपलोड करें:</label>
<input type="file" id="file" name="file">


13. <input type="hidden">

• विवरण: फॉर्म में छिपा हुआ डेटा।
• उदाहरण:
  <input type="hidden" id="userId" name="userId" value="12345">


14. <input type="color">

• विवरण: रंग चुनने के लिए इनपुट।
• उदाहरण:
  <label for="favcolor">पसंदीदा रंग:</label>
<input type="color" id="favcolor" name="favcolor">


15. <input type="range">

• विवरण: एक स्लाइडर नियंत्रण के साथ एक सीमा का चयन करने के लिए इनपुट।
• उदाहरण:
  <label for="volume">वॉल्यूम:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

ड्रॉपडाउन लिस्ट (<select>, <option>)

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

उदाहरण:

HTML Form Attributes

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

1. action

• विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि फॉर्म का डेटा किस URL पर भेजा जाएगा।
• उदाहरण:
  <form action="/submit-form" method="post">
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</form>


2. method

• विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि फॉर्म का डेटा कैसे भेजा जाएगा। इसके दो मान होते हैं: get और post।
• उदाहरण:
  <form action="/submit-form" method="post">
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</form>


3. enctype

• विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि फॉर्म डेटा को कैसे एन्कोड किया जाएगा। इसका उपयोग तब किया जाता है जब फॉर्म में फाइल अपलोड किया जा रहा हो।
• उदाहरण:
  <form action="/submit-form" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="सबमिट करें">
</form>


4. target

• विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि फॉर्म सबमिट करने के बाद परिणाम किस विंडो या फ्रेम में दिखाया जाएगा।
• उदाहरण:
  <form action="/submit-form" method="post" target="_blank">
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</form>


5. autocomplete

• विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि फॉर्म ऑटोफिल सुविधा सक्षम है या नहीं। इसके मान होते हैं: on और off।
• उदाहरण:
  <form action="/submit-form" method="post" autocomplete="off">
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</form>


6. novalidate

• विवरण: यह एट्रिब्यूट फॉर्म सबमिट करने से पहले ब्राउज़र द्वारा फॉर्म डेटा की वैधता की जांच को अक्षम कर देता है।
• उदाहरण:
  <form action="/submit-form" method="post" novalidate>
<input type="email" name="email">
<input type="submit" value="सबमिट करें">
</form>


7. name

• विवरण: यह एट्रिब्यूट फॉर्म का नाम निर्दिष्ट करता है। यह जावास्क्रिप्ट के माध्यम से फॉर्म को संदर्भित करने के लिए उपयोगी होता है।
• उदाहरण:
  <form action="/submit-form" method="post" name="myForm">
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</form>

HTML <form> एलिमेंट्स

HTML <form> एलिमेंट विभिन्न प्रकार के इनपुट एलिमेंट्स को समाहित कर सकता है। ये इनपुट एलिमेंट्स उपयोगकर्ताओं से डेटा एकत्र करने और इसे सर्वर पर भेजने के लिए उपयोग किए जाते हैं। नीचे दिए गए हैं कुछ सामान्य फॉर्म एलिमेंट्स और उनके उपयोग:

1. <input>

• विवरण: <input> टैग का उपयोग विभिन्न प्रकार के इनपुट्स, जैसे कि टेक्स्ट, पासवर्ड, ईमेल, नंबर, और अन्य डेटा एकत्र करने के लिए किया जाता है।
• उदाहरण:
  <label for="name">नाम:</label>
<input type="text" id="name" name="name">


2. <label>

• विवरण: <label> टैग का उपयोग इनपुट एलिमेंट्स के लिए लेबल प्रदान करने के लिए किया जाता है। यह उपयोगकर्ताओं को यह समझने में मदद करता है कि प्रत्येक इनपुट फील्ड का उद्देश्य क्या है।
• उदाहरण:
  <label for="email">ईमेल:</label>
<input type="email" id="email" name="email">


3. <select>

• विवरण: <select> टैग का उपयोग ड्रॉपडाउन लिस्ट बनाने के लिए किया जाता है, जिसमें उपयोगकर्ता एक विकल्प चुन सकते हैं।
• उदाहरण:
  <label for="country">देश:</label>
<select id="country" name="country">
<option value="india">भारत</option>
<option value="usa">अमेरिका</option>
<option value="uk">यूके</option>
</select>


4. <textarea>

• विवरण: <textarea> टैग का उपयोग मल्टी-लाइन टेक्स्ट इनपुट के लिए किया जाता है।
• उदाहरण:
  <label for="message">संदेश:</label>
<textarea id="message" name="message"></textarea>


5. <button>

• विवरण: <button> टैग का उपयोग फॉर्म में एक बटन जोड़ने के लिए किया जाता है, जिसे उपयोगकर्ता क्लिक करके फॉर्म सबमिट कर सकते हैं।
• उदाहरण:
  <button type="submit">सबमिट करें</button>


6. <fieldset>

• विवरण: <fieldset> टैग का उपयोग फॉर्म में संबंधित इनपुट एलिमेंट्स के समूह को व्यवस्थित करने के लिए किया जाता है।
• उदाहरण:
  <fieldset>
<legend>व्यक्तिगत जानकारी</legend>
<label for="fname">पहला नाम:</label>
<input type="text" id="fname" name="fname">
<label for="lname">अंतिम नाम:</label>
<input type="text" id="lname" name="lname">
</fieldset>


7. <legend>

• विवरण: <legend> टैग का उपयोग <fieldset> के शीर्षक के रूप में किया जाता है।
• उदाहरण:
  <fieldset>
<legend>संपर्क जानकारी</legend>
<!-- इनपुट एलिमेंट्स यहाँ जोड़ें -->
</fieldset>


8. <datalist>

• विवरण: <datalist> टैग का उपयोग इनपुट एलिमेंट्स के लिए पूर्वनिर्धारित विकल्पों की लिस्ट प्रदान करने के लिए किया जाता है।
• उदाहरण:
  <label for="browsers">ब्राउज़र:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>


9. <output>

• विवरण: <output> टैग का उपयोग फॉर्म का परिणाम प्रदर्शित करने के लिए किया जाता है।
• उदाहरण:
  <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" name="a" value="50"> +
<input type="range" id="b" name="b" value="50"> =
<output name="result" for="a b">100</output>
</form>


10. <option>

• विवरण: <option> टैग का उपयोग <select> एलिमेंट के अंदर विकल्पों को परिभाषित करने के लिए किया जाता है।
• उदाहरण:
  <select id="car" name="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>


11. <optgroup>

• विवरण: <optgroup> टैग का उपयोग <select> एलिमेंट के अंदर विकल्पों को समूहित करने के लिए किया जाता है।
• उदाहरण:
  <label for="cars">कारें:</label>
<select id="cars" name="cars">
<optgroup label="स्वीडिश कारें">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="जर्मन कारें">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>