HTML in Hindi - How to Use Form Elements
एचटीएमएल में फॉर्म एलिमेंट्स का प्रयोग कैसे करें?

एचटीएमएल फॉर्म क्या हैं?
What is Form in HTML?

एचटीएमएल फॉर्म का प्रयोग यूजर द्वारा दिए जाने वाले इनपुट के लिए किया जाता है। एचटीएमएल फॉर्म के द्वारा विभिन्न जानकारी जैसे नाम, ईमेल आई डी, एड्रैस, फोन नंबर, पासवर्ड आदि की जानकारी विभिन्न फॉर्म एलीमेंट जैसे इनपुट टेक्स्ट, टेक्स्ट फील्ड, चेकबॉक्स, रेडियो बटन, सबमिट बटन आदि के द्वारा प्राप्त की जा सकती है। एचटीएमएल फॉर्म द्वारा यह सभी जानकारियाँ आसानी से प्राप्त की जा सकती हैं।
HTML मे फॉर्म (Form) को <form> ........... </form> टैग से डिफाइन करते है।
HTML फॉर्म को विभिन्न प्रकार के यूजर से डाटा को इकट्ठा करने के लिए प्रयोग किया जाता है जैसे : Name, Email Address, Phone Numbers की जानकारी आदि।
HTML form द्वारा विभिन्न प्रकार के फॉर्म तैयार कर यूजर से डाटा प्राप्त किया जा सकता है। इसमें विभिन्न फील्ड्स जैसे सामान्य जानकारी हेतु टेक्स्ट बॉक्स, चेक बॉक्स, रेडियो बटन, ड्रॉप डाउन लिस्ट, पैराग्राफ टेक्स्ट आदि के फॉर्म में जानकारी प्राप्त की जा सकती है।

एचटीएमएल फॉर्म एलीमेंट का प्रयोग
Using Form Elements in HTML

Form Element : HTML फॉर्म में फॉर्म एलिमेंट्स होते हैं, जैसे: टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन, ड्रॉप डाउन लिस्ट, सबमिट बटन आदि
एचटीएमएल में प्रयोग की जाने वाले विभिन्न फॉर्म एलीमेंट निम्न हैं:

<label> :

यह फॉर्म एलीमेंट फॉर्म के किसी भी एलीमेंट जैसे टेक्स्ट बॉक्स, टेक्स्ट फील्ड आदि के लिए लेबल डिफाइन करने के लिए प्रयोग किया जाता है।

<input> :

यह फॉर्म एलीमेंट फॉर्म में इनपुट जैसे नाम, ईमेल, पासवर्ड, आदि प्राप्त करने के लिए प्रयोग किया जाता है।

<button> :

यह फॉर्म एलीमेंट कंट्रोल बटन जिसके द्वारा किसी फ़ंक्शन जैसे सबमिट आदि के लिए प्रयोग किया जाता है।

<select> :

यह फॉर्म एलीमेंट ड्रॉप डाउन लिस्ट डिफाइन करने के लिए प्रयोग किया जाता है।

<textarea> :

यह फॉर्म एलीमेंट फॉर्म में लॉंग टेक्स्ट एरिया जैसे पैराग्राफ टेक्स्ट आदि को डिफाइन करने के लिए प्रयोग किया जाता है।

<fieldset> :

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

<legend> :

यह फॉर्म एलीमेंट फील्ड सेट के लिए लेबल डिफाइन करने के लिए प्रयोग किया जाता है।

<datalist> :

यह फॉर्म एलीमेंट फॉर्म के प्रीडिफाइन लिस्ट ऑप्शन के लिए प्रयोग किया जाता है।

<output> :

यह फॉर्म एलीमेंट केलकुलेशन के लिए प्रयोग किया जाता है।

एचटीएमएल फॉर्म इनपुट एलीमेंट्स
HTML Form Input Element

एचटीएमएल (HTML) फॉर्म का प्रयोग यूजर द्वारा दिए जाने वाले इनपुट के लिए किया जाता है, HTML फॉर्म को डिफाइन करने के लिए <form> ........... </form> टैग का प्रयोग किया जाता है। इसके बाद इनपुट एलीमेंट का प्रयोग करते हैं। <input> एलिमेंट फॉर्म का सबसे महत्वपूर्ण एलिमेंट है, इसका प्रयोग टाइप एट्रिब्यूट के साथ किया जाता है। जैसे <input type="text" > यह सिंगल लाइन टेक्स्ट इनपुट फ़ील्ड के लिए प्रयोग किया जाता है। <input> एलिमेंट में विभिन्न टाइप एट्रीब्यूट जैसे text, password, submit, reset, radio, checkbox, button, file, image आदि का प्रयोग किया जा सकता है। प्रमुख type एट्रीब्यूट निम्न हैं:

<type="text"> :

यह सिंगल लाइन टेक्स्ट इनपुट फ़ील्ड के लिए प्रयोग किया जाता है।

<type="password"> :

यह सिंगल लाइन पासवर्ड फ़ील्ड के लिए प्रयोग किया जाता है।

<type="radio"> :

यह रेडियो बटन के लिए प्रयोग किया जाता है।

<type="submit"> :

यह सबमिट बटन के लिए प्रयोग किया जाता है।

<type="checkbox"> :

यह चेकबॉक्स के लिए प्रयोग किया जाता है, इसके द्वारा एक से अधिक ऑप्शन का प्रयोग सिलेक्शन के लिए किया जा सकता है।

<type="reset"> :

यह रीसेट बटन के लिए प्रयोग किया जाता है, इसके प्रयोग से फॉर्म में फिल की गई वैल्यू रीसेट हो जाती हैं।

<type="button"> :

यह बटन के लिए प्रयोग किया जाता है, जिसे किसी टास्क को पूरा करने के लिए प्रयोग किया जाता है।

<type="file"> :

यह फाइल को सिलेक्ट करने के लिए प्रयोग किया जाता है।।

एचटीएमएल इनपुट एलीमेंट्स का उदाहरण (HTML Input Element with Type Attribute Program Example):

<form>
Username : <input type="text"> <br>
Password : <input type="password"> <br>
<input type="submit">
</form>

एचटीएमएल इनपुट एलीमेंट्स प्रोग्राम आउटपुट (HTML Input Element with Type Attribute Program Output) :

Username:

Password:

एचटीएमएल फॉर्म लेबल एलीमेंट्स
HTML Form Label Element

HTML फॉर्म में इनपुट को डिफाइन करने के लिए <label> टैग का प्रयोग किया जाता है। label टैग फ़ॉर्म एलीमेंट्स के लिए एक लेबल को परिभाषित करता है।
label टैग के for एट्रिब्यूट को हमेशा input एलिमेंट की id के अनुसार ही रखा जाना चाहिए जिससे दोनों आपस में कनेक्ट किया जा सके।

एचटीएमएल इनपुट एलीमेंट्स के साथ लेबल टैग का उदाहरण (HTML Using Label Tag with Input Element Program Example):

<form>
<label for="fname">First Name : </label>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last Name : </label>
<input type="text" id="lname" name="lname"> <br>

<input type="submit" value="Submit">
</form>

उपरोक्त उदाहरण में label for="fname" के साथ input id="fname" दोनों को एक ही वैल्यू दी गई है, जिससे दोनों को इन्टर कनेक्ट किया जा सके।

एचटीएमएल इनपुट एलीमेंट्स के साथ लेबल टैग का प्रोग्राम कोड आउटपुट (HTML Using Label Tag with Input Element Program Code Output)

First Name:

Last Name:

एचटीएमएल फॉर्म सिलेक्ट एलीमेंट्स
HTML Form Select Element

HTML फॉर्म में ड्रॉप डाउन लिस्ट के लिए <select> एलीमेंट का प्रयोग किया जाता है। select फ़ॉर्म एलीमेंट्स के option एट्रीब्यूट के द्वारा सिलेक्शन लिस्ट की वैल्यू को डिफाइन किया जाता है।

एचटीएमएल सिलेक्ट एलीमेंट्स के साथ ऑप्शन टैग का उदाहरण (Using option Tag with Select Element in HTML):

<form>
Select your Car Manufacturer
<select id="cars" name="cars">
<option value="Volvo"> VOLVO<br>
<option value="BMW"> BMW<br>
<option value="Fiat"> FIAT<br>
<option value="Audi"> AUDI<br>
</select>
</form>

एचटीएमएल सिलेक्ट एलीमेंट्स के साथ ऑप्शन टैग प्रोग्राम कोड आउटपुट (Using option Tag with Select Element in HTML Program Code Output)

Select your Car Manufacturer

VOLVO BMW FIAT AUDI

एचटीएमएल फॉर्म टेक्स्ट एरिया एलीमेंट्स
HTML Form Text Area Element

HTML फॉर्म में एक से अधिक लाइन के input के लिए टेक्स्ट एरिया (Textarea) एलीमेंट का प्रयोग किया जाता है। यह सामान्यतः एड्रैस ब्लॉक अथवा मल्टीलाइन फॉर्म इनपुट के लिए उपयोग होता है। इसके rows एट्रिब्यूट का उपयोग लाइन्स की संख्या के लिए उपयोग किया जाता है। जबकि cols एट्रिब्यूट विड्थ के लिए उपयोग किया जाता है। यह एक टेक्स्ट एरिया ब्लॉक एचटीएमएल फॉर्म में इन्सर्ट करने के लिए प्रयोग किया जाता है।

एचटीएमएल टेक्स्ट एरिया एलीमेंट्स के साथ रो एवं कॉलम एट्रीब्यूट उदाहरण (Using rows and cols with Textarea Element in HTML):

<form>
Enter your Address
<textarea name="address" rows="5" cols="30">
</textarea>
<input type="submit" value="Submit"> </form>

एचटीएमएल टेक्स्ट एरिया एलीमेंट्स के साथ रो एवं कॉलम एट्रीब्यूट प्रोग्राम कोड आउटपुट (Using rows and cols with Textarea Element in HTML Program Code Output)

Enter your Address

एचटीएमएल फॉर्म फील्ड सेट एवं लेजेंड एलीमेंट्स
HTML Form Fieldset & Legend Element

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

एचटीएमएल फील्ड सेट एवं लेजेंड एलीमेंट्स का उदाहरण (Using Fieldset & Legend in HTML):

<form>
<fieldset>
<legend> Personal Info</legend>
<label for="fname">First Name : </label>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last Name : </label>
<input type="text" id="lname" name="lname"> <br>
<input type="submit" value="Submit">
</fieldset>
</form>

एचटीएमएल फील्ड सेट एवं लेजेंड एलीमेंट्स प्रोग्राम कोड आउटपुट (Using Fieldset & Legend Element in HTML Program Code Output)

Personal Info

First Name:

Last Name:

Qualification Details

Select Qualification:
10th
12th
Graduation

एचटीएमएल फॉर्म बटन एलीमेंट्स
HTML Form Button Element

HTML फॉर्म में बटन <button> एलिमेंट किसी भी एक्शन बटन के लिए उपयोग किया जाता है। यह एक क्लिक करने वाला बटन होता है, इसके साथ type एट्रीब्यूट में button, reset अथवा submit का उपयोग किया जाता है। बटन को क्लिक करने यह किस एक्शन को कम्प्लीट करेगा यह भी डिफाइन किया जाता है।

एचटीएमएल फील्ड सेट एवं लेजेंड एलीमेंट्स का उदाहरण (Using Fieldset & Legend in HTML):

<form>
<button type="button" onclick="alert('Hello Welcome to COPA-Guide!')">
Please Click Here!
</button </form>

एचटीएमएल फील्ड सेट एवं लेजेंड एलीमेंट्स प्रोग्राम कोड आउटपुट (Using Fieldset & Legend Element in HTML Program Code Output)

Please Click Here!

उपरोक्त बटन पर क्लिक करने पर अलर्ट के अंदर दिया गया मैसेज स्क्रीन पर डिस्प्ले होगा।

Computer Practical | Learn and Practice HTML Program Code | HTML Form Elements

Computer Hindi Notes | Web Page Design with HTML

copaguide.com

---

---

Web Page Design HTML | Practical Exercise

copaguide.com

---

---

Online MCQ Test Series | Internet & HTML

copaguide.com

Tags - What is HTML forms Hindi Explanation. Learn to Use forms elements Tag, Use of forms in HTML. Using forms elements Text box, Check box, Radio button, Combo Box, Text Field in HTML. Using form Elements in HTML Programming. HTML Hindi Notes Using forms. How to use forms elements in HTML. HTML forms Tags Practical Example. HTML form element program code. HTML Programming Creating forms with Text box, Check box, Radio button, Combo Box, Text Field Exercise, How to Create forms in HTML. HTML Hindi Notes। How to Create forms in HTML | In Hindi How to Create forms in HTML. HTML Tutorial in Hindi HTML tutorial for beginners in Hindi.

HTML फॉर्म क्या हैं? एचटीएमएल में फॉर्म का कैसे प्रयोग करें? एचटीएमएल में फॉर्म टैग्स एवं उनके उपयोग। फॉर्म एलीमेंट प्रैक्टिकल उदाहरण सहित। एचटीएमएल फॉर्म टैग की जानकारी, एचटीएमएल प्रोग्रामिंग फॉर्म एलीमेंट के उदाहरण सहित प्रोग्रामिंग कोड, HTML फॉर्म एलीमेंट टैग का परिचय, HTML फॉर्म एलीमेंट बनाने के लिए Use होने वाले HTML Elements, HTML फॉर्म एलीमेंट ऐट्ट्रीब्यूट के प्रकार, HTML में फॉर्म एलीमेंट क्या है? HTML पेज में फॉर्म एलीमेंट बनाने के लिए फॉर्म स्ट्रक्चर कौन सा है? वेब पेज पर फॉर्म बनाने के लिए HTML में सिंटैक्स क्या है? HTML में फॉर्म एलीमेंट का प्रयोग कैसे करें? फॉर्म एलीमेंट उदाहरण सहित समझाइए? फॉर्म कैसे क्रिएट करें.फॉर्म एलीमेंट क्या होते है? विभिन्न फॉर्म एलीमेंट जैसे टेक्स्ट बॉक्स, चेक बॉक्स, रेडियो बटन, ड्रॉप डाउन लिस्ट, पैराग्राफ की जानकारी दीजिए।