▷html form with code in हिंदी- explain [ 9 type ] form

दोस्तों आज से पहले हमने कुछ Tutorial में HTML, CSS और कॉडिंग भाषा से जुडी कुछ मत्वपूर्ण जानकारी आपके साथ साँझा की है। इसी प्रकार आज हम आपके साथ html form with code in hindi के बारे में जानकारी साँझा कर्नेगे। यानिकि HTML FORM के बारे में बात करेंगे। की कितने प्रकार से फॉर्म बनाये जाते है। और किस प्रकार बनाये जाते है। तो चलिए जानते है।

html form with code in hindi steps

1. Introduction to HTML Form in Hindi एक परिचय।

किसी भी व्यक्ति से किसी प्रकार की जानकारी लेने के लिए हम HTML Forms का इस्तेमाल करते है। यह जानकारी विशेष प्रकार की हो सकती है। जैसे – फीडबैक लेना , निजि जानकारी प्राप्त करना , संदेश या कोई शिकायत या अन्य कुछ सुझाव आदि के बारे में जानकारी हो सकती है।

हमे अलग अलग Websites में अलग अलग प्रकार के HTML Forms दिखाई दे जाऐंगे। इनमे Sign Up Forms, Log in Forms, Payment के बारे में Details प्राप्त करने का Forms या किसी प्रकार की Survey Forms देखने देखने को मिलते है। आज हम इनके बारे में आपको बताएंगे की आप इन फॉर्म को कैसे बना सकते है। यह सभी FORM जरूरत के अनुसार बनाये जाते है।

इसे पढ़े : ▷Html In Hindi Complete Information-Introduction हिंदी में। 

जैसा की हमने ऊपर जाना। और इनको बनाने का भी थोड़ा थोड़ा भिन्न मेंथोड होता है। लेकिन हम आपको सभी प्रकार के FORM के बारे में आसानी से समझने की कोशिश करेंगे। जब फॉर्म को पूरा भरा जाता है। और SUMBIT किया जाता है। तो वो जानकरी उस सर्वर में जाती है। जिसका पता फॉर्म में दिया जाता है। जैसा की आप ऊपर इस इमेज में देख सकते है।

2. Form tag की जानकारी

हम HTML Forms को Form Element द्वारा Define करते है। इस टैग को कुछ इस प्रकार <form> लिखा जाता है। इसको सबसे पहले लिखा जाता है। इसके बाद अन्य Elemen का उपयोग किया जाता है।

क्योकी Form एक Container की तरह काम करता है। मुख्य टैग तो हमे जान लिया लेकिन कुछ और भी टैग होते है। जिनका उपयोग एक HTML FORM तैयार करने के लिए किया जाता है। तो चलिए इनके बारे में जानकारी लेते है। ताकि बाद में हम जब फॉर्म बनाएंगे तो समझने में कोई परेशानी न रहे।

• input

Input Element HTML Form .इस एलीमेटंट उपयोग इसलिए किया जाता है। की जब भी किसी से कोई जानकारी लिखित रूप में प्राप्त करनी होती है। तो उसके लिए लिखित स्थान प्रदान किया जाता है। ताकि उसमे जानकारी लिखी जा सके। जिनका निर्धारण type Attribute करता हैं।

• enctype

server पर data को send करने से पहले उसे data को encode करने की अनुमति प्रदान करने के लिए इसका उपयोग की जाता है।

• autocomplete

यह टैग डाटा को स्टोर करने या डिलीट करने के लिए उपयोग किया जाता है। यानिक अगर आप इस autocomplete=”on” प्रकार लिखते है। तो अगर कोई अपनी जानकारी दूसरी बार फॉर्म में जोड़ता है। तो उसे लिखने की आवश्कता नहीं रहती। ब्रौज़र अपने आप पुराने डाटा को दिखता है। अगर इसे autocomplete=”off ” लिखते है। तो डाटा शो नहीं करता और डाटा को दूसरी बार भी लिखना होता है।

• novalidate target

इस से हम ब्रौज़र को समझते है। की इस फॉर्म का डाटा अब वेलिड नहीं है। इस का उपयोग तब किया जाता है। जब किसी निश्चित तारीख तक कोई जानकारी प्राप्त करनी होती है। जैसे कोई सर्वे फॉर्म होता है। वह निश्चित समय के लिए होता है।

• name

इसका उपयोग किसी फॉर्म को कोई निश्चित नाम प्रदान करने के लिए किया जाता है।

3. Html Form Attributes

html form को बनाते समय हमें कुछ Attributes का उपयोग भी करना होता है। जो की form डाटा को निर्देशित करने के लिए उपयोग किया जाता है। तो चलिए जानते है।

• Action Attribute

इस attribute की मदद से हम form submit होने के बाद कोई भी संदेश या कोई भी अन्य डाटा यूजर को दिखा सकते है। इसका उपयोग करना अनिवार्य नहीं होता है। इस को कुछ इस प्रकार लिखा जाता है। <form action=”url” >

इसे पढ़े : ▷How To Create Table In Html In Hindi

4. html input type

इसके प्रकार कुछ इस प्रकार है।

5. html Form Elements

• textarea Element

इसका उपयोग किसी single line; input लेने के लिए किया जाता है | लेकिन multiple lines में input लेने के लिए इसका उपयोग किया जाता है। इसका कोड कुछ इस प्रकार से लिखा जाता है।

• select Element

यह element <option> element का parent element टैग होता है। जब भी हम कोई drop-dow list वाला फॉर्म बनाते है। तो इसका उपयोग करना आवश्क होता है। क्योंकि इसके बिना drop -dow form create नहीं किया जा सकता है। इसको कुछ इस प्रकार लिखा जाता है।

• option Element

option element को हम selectऔर datalist element का child element भी कह सकते है। select लिस्ट के हर item को option से define करता है।

select element में दिए हुआ <option> element close किया जाता है, लेकिन <datalist> में दिए हुए <option> element को अलग से close नहीं किया जाता बल्कि datalist element को ही close किया जाता है। ऐसे कुछ इस प्रकार से लिखा जाता है।

• optgroup Element

optgroup एलिमेंट select एलिमेंट का बेटा है। लेकिन option एलिमेंट का बाप है। क्योंकि optgroup element से option एलिमेंट का एक group बनाकर पेश किया जाता है। इसको कुछ इस प्रकार से लिखा जाता है।

• fieldset Element

इसका उपयोग form elements का group तैयार करने के लिए किया जाता है | यह elements के चारों ओर से box को draw करता है | इसे कुछ इस प्रकार लिखा जाता है।

• legend Element

legend एलिमेंट से fieldset एलिमेंट को caption देने के लिए उपयोग किया जाता है। इसे कुछ इस प्रकार लिखा जाता है।

• datalist Element

यह एलिमेंट select एलिमेंट के समान ही होता है। लेकिन datalist एलिमेंट के id attribute के साथ input एलिमेंट के list attribute के संबंध को लिखा जाता है |
datalist एलिमेंट से user option को select करने के साथ अपना इनपुट भी दे सकता है। इसे कुछ इस प्रकार लिखा जाता है।

• button Element

button को create करने के लिए <button> एलिमेंट का इस्तेमाल किया जाता है। इस कुछ प्रकार लिखा जाता है।

7. HTML Form का निर्माण

जैसा की हमने जाना की फॉर्म के प्रकार भिन्न भिन्न होते है। जो आवश्कता के अनुसार निर्माण किये जाते है। हम उन सभी फॉर्म का निर्माण करना जानेगे। जिनका उपयोग अधिक होता है। सभी को एक एक करके बनाना सिख्नेगे। सबसे पहले हम फॉर्म की शुरुआत Syntax से करते है। तो चलिए जानते है।

इसमें हमे केवल फॉर्म का मैं टैग उपयोग किया है। जैसा की आप देख सकते है। की हमे सबसे <form> टैग का उपयोग किया है। क्योंकि सबसे पहले इस टैग का उपयोग किया जाता है। उसके बाद जितने भी एलिमेंट होते है। वह ऐसी टैग के भीतर लिखे जाते है।

8. HTML Form last name-first name को लिखना।

try this code

<!DOCTYPE html> <html> <head><title>HTML Form Example</title></head> <body> <form>First Name: <input type=”text” name=”firstname”> Last Name: <input type=”text” name=”lastname”> <input type="submit" value="Submit"></form> </body> </html>

जैसे ही आप इस code को save करके किसी भी ब्रौज़र में खोलते है। तो आपके सामने कुछ इस प्रकार का फॉर्म खुल जायेगा। निचे इस इमेज में देख सकते है।

 

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

9. User ID और Password Input करवाना।

अगर हम किसी व्यति से किसी डॉक्यूमेंट और पासवर्ड जैसी जानकारी प्राप्त करना चाहते हो तो हमें html form कोड को कुछ इस प्रकार लिखते है।

try this code

<!DOCTYPE html> <html> <head>     <title> Single-line Text Input Control Example</title> </head> <body>     <form>User ID: <input type="text" name="id"> Password: <input type="password" name="password"> <input type="submit">     </form> </body> </html>

आप निचे इस इमेज में देख सकते है। की जब हम code इस प्रकार लिखते है। तो हमें आउटपुट किस प्रकार देखने को मिलता है।

10. Multi-line Text Input लेना।

अगर हम किस व्यक्ति से किसी प्रकार का मेसेज के द्वारा इनपुट प्राप्त करना चाहते है। तो हमें form कोड कुछ इस प्रकार लिखना होता है।

try this code

<!DOCTYPE html> <html> <head><title> Multi-line Text Input Control Example</title></head> <body> <form>Message: <textarea rows=”5″ cols=”30″ name=”message”> Write your message here… </textarea></form> </body> </html>

इसमें आप देख सकते है। हमने इसकी लंबाई और चौडाई को क्रमश: rows और cols Attribute द्वारा Define कर सकते हैं। आप इसकी row और cols की संख्या को बढ़ा या घटा सकते है। इसका आउटपुट हमें कुछ इस प्रकार देखने को मिलता है।

 

 

11. HTML Form में Check Box इनपुट लेना।

अगर किसी व्यक्ति से उसकी इच्छा के मुताबिक इनपुट लेना चाहे तो हमें html form code को कुछ इस प्रकार लिखना होगा। इसमें हमें color का उदाहरण लिया है। आप अपनी आवश्कता के अनुशार इनपुट form बना सकते है।

try this code

<!doctype html> <html> <head><meta charset="utf-8"> </head> <body "> <form> color :<br> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1">black<br>         <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup2">white<br>         <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup3">blue<br>         <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup4">red<br>         <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup5">pink<br>         <br>         <input type="submit">         </form>     </div> </body> </html>

इसे पढ़े : ▷Introduction of CSS in Hindi

 

आप इस इमेज में देख सकते है। की हमारे कोड का इनपुट हमें कुछ इस प्रकार से देखने को मिलता है।

12. Radio Buttons form बनाना।

हम आपको बता दे Radio Buttons फॉर्म का मतलब होता है। की हम user को एक से अधिक विकल्प देते है। जिनमे से user को किसी एक का चयन करवाना होता है। Radio Buttons को Define के लिए <input> Tag की type Attribute में Value के आगे radio लिखा जाता हैं। इस html form कोड को कुछ इस प्रकार लिखा जाता है।

try this code

<!doctype html> <html> <head><meta charset="utf-8"> </head> <body >     <div><form >         Gender: <input type="radio" name="radiogroup1" value="radio" id="radiogroup1"> Male         <input type="radio" name="radiogroup1" value="radio" id="radiogroup2"> Female         <input type="radio" name="radiogroup1" value="radio" id="radiogroup3"> custom<br><br>           <input type="submit">     </div> </body> </body> </html>

आप इस इमेज में देख सकते है। की हमें इसका आउटपुट हमें कुछ इस प्रकार दिखाई देगा।

 

13. Drop-down List form बनाना।

इस form का निर्माण करने के लिए हमें <select> element का उपयोग करना होता है। और<select> element में नाम वेल्यू dropdown लिखना होता है। इस form code को कुछ इस प्रकार लिखा जाता है।

try this code

<!DOCTYPE html> <html> <head></head> <body style="background-color: blue;color: cornsilk;"> <form>Select Your State: <select name=”dropdown”> <option value=”delhi”> Delhi&lt/option>     <option value=”rajasthan”> rajasthani     <option value=”haryana”> Urdu     <option value=”marathi”> marathi     <option value=”bangali”> bangali </select></form> </body> </html>

इस form का आउटपुट इस इमेज में सकते है।

 

 

14. File Upload Box Html Form बनाना।

इस फॉर्म की मदद से हम किसी भी user से कोई डॉउमेंट लेने के लिए उपयोग करते है। इसमें input type=”file” लिखा जाता है। और पूरा code कुछ इस प्रकार लिखा जाता है।

try this code

<!DOCTYPE html> <html> <head><title> File Upload Box Example</title></head> <body style="background-color: blue; color: white;"> Upload Your Resume:<br><br> <input name="resume" type="file"> </form> </body> </html>

इस इमेज में आप देख सकते है। की हमारे कोड का आउटपुट हमें किस प्रकार दिखाई देता है।

 

इसे पढ़े : ▷What Is Web Page In Hindi

15. mobail no: (send,sumbit button) html फॉर्म

इस फॉर्म कोड में आप मोबाईल नंबर प्राप्त करने वाले फॉर्म को बनाना सीख जायेंगे। साथ ही आपको send or sumbit बटन code के बारे में भी जानकारी मिल जाएगी।

try this code

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Form Example</title> </head>  <body> mobail no: <input type="text" name="mobile" id="mobile"> <input type="button" name="send" value="Send"> <input type="submit">  </form></body> </body> </html>

इस code का इनपुट देख सकते है। इस इमेज में आपको send button और sumit button भी दिखाई दे रहा है। इसी प्रकार आप इन button का निर्माण कर सकते है।

 

 

16. image एंड reset button form

अगर आप किसी फॉर्म में किसी प्रकार की फोटो को दिखना चाहते है। और साथ ही आप एक reset डाटा बटन भी लगाना चाहते है। ताकि अगर कोई डाटा को मिटाना चाहे और दोबारा से डाटा को लिखना चाहे हो केवल एक बटन से सारा data clear कर पाए। उसके लिए आप इस प्रकार से कोड लिख सकते है।

try this code

<!doctype html> <html> <head>     <meta charset="utf-8">     <title>Form Example</title> </head> <body style="background-color: aqua;">     <div>         <form align="center" action="" autocomplete="on" method="POST" name="loging" novalidate target="_blank">             <h3 style="color:#F00">your Details</h3>             name:             <input type="text" name="Name" id="name"><br><br>             Password:             <input type="password" name="password" id="password"><br><br>             E-mail id: <input type="text" name="name" id="name"><br><br>             Gender: <input type="radio" name="radiogroup1" value="radio" id="radiogroup1"> Male             <input type="radio" name="radiogroup1" value="radio" id="radiogroup2"> Female<br><br>             <input type="image"                 src="https://i1.wp.com/www.kgrnews.com/wp-content/uploads/2020/08/Create-Table-In-Html-compressed.jpg?w=1480&ssl=1"                 style="width: 300px;height: 300px;"><br><br>             <input type="reset" name="reset" value="Reset">         </form>     </div> </body> </body> </html>

एक आउटपुट हम इस image में देख सकते है। आप इस सभी कोड को कॉपी पेस्ट कर के उपयोग में लेकर देख सकते है। ताकि आप को अनुभव हो पाए।

 

एक आउटपुट हम इस image में देख सकते है। आप इस सभी कोड को कॉपी पेस्ट कर के उपयोग में लेकर देख सकते है। ताकि आप को अनुभव हो पाए।

इसे पढ़े : ▷Blogger Me Whatsapp Share Button Kaise Lagaye

about this post: 

दोस्तों आज हमने आपको html form in hindi में जानकारी प्रदान की है। हमारी कोशिश यही रहती है। की आपको जानकारी आसान भाषा में प्रदान कर पाए। अगर आपका कोई सवाल या सुझाव है। तो आप कमेंन्ट में पूछ सकते है। आपका दिन शुभ रहे। धन्यवाद।

Form tag – html 5 tutorial in hindi video 

information source : w3schools