tech help
▷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” >
-
Method Attribute
इस attribute के द्वारा data को सर्वर में स्टोर किया जाता है। इसकी कुल 2 प्रकार की वेल्यू होती है। 1 .(get ) व 2. (post ) get वेल्यू अपने आप डिफाइन रहती है। लेकिन post वेल्यू को डिफाइन करना होता है। इसे इस प्रकार लिखा जाता है।
<form action=”send-data.php” method=”post”> व <form action=”send-data.php” method=”get”> |
इसे पढ़े : ▷How To Create Table In Html In Hindi
get | post |
---|---|
गेट मेथड में डाटा url के साथ सर्वर में उपलोड होता है। | पोस्ट मेथड में डाटा url के बिना सर्वर में अपलोड होता है। |
गेट मेथड में डाटा लिमिट में यानिकि 2048 क्रेक्टर से अधिक नहीं भेज सकते है। | post मेथड में अनलिमिटेड डाटा को सेंड कर सकते है। |
गेट मेथड अधिक सुरक्षित नहीं होता है। | post मेथड डाटा १००% सुरक्षित होता है। |
साधरण डाटा प्राप्त करने के लिए get मेथड का उपयोग किया जाता है। | निजी जानकारी जैसा डाटा प्राप्त करने के लिए post मेथड का उपयोग किया जाता है। |
-
Target Attribute
इस टैग से हम ये difaine करते है। की जब फॉर्म को फूल फील किया जाये और फिर sumbit किया जाये तो उसे उसी पेज में खुला जाये या एक अलग पेज में खोला जाये। अगर दूसरे पेज में open करना हो तो कोड कुछ इस प्रकार लिखा जाता है।<form target=”_blank”>
4. html input type
इसके प्रकार कुछ इस प्रकार है।
<input type=”button”> | <input type=”checkbox”> | <input type=”color”> |
<input type=”date”> | <input type=”datetime-local”> | <input type=”email”> |
<input type=”file”> | <input type=”hidden”> | <input type=”image”> |
<input type=”month”> | <input type=”number”> | <input type=”password”> |
<input type=”radio”> | <input type=”range”> | <input type=”reset”> |
<input type=”search”> | <input type=”submit”> | <input type=”tel”> |
<input type=”text”> | <input type=”time”> | <input type=”url”> |
<input type=”week”> |
5. html Form Elements
-
textarea Element
इसका उपयोग किसी single line; input लेने के लिए किया जाता है | लेकिन multiple lines में input लेने के लिए इसका उपयोग किया जाता है। इसका कोड कुछ इस प्रकार से लिखा जाता है।
<textarea rows="4" cols="20"> halo dear halo dear halo dear halo dear halo dear halo dear halo dear halo dear halo dear </textarea> |
-
select Element
यह element <option> element का parent element टैग होता है। जब भी हम कोई drop-dow list वाला फॉर्म बनाते है। तो इसका उपयोग करना आवश्क होता है। क्योंकि इसके बिना drop -dow form create नहीं किया जा सकता है। इसको कुछ इस प्रकार लिखा जाता है।
<select> <option value="C">C Programming</option> |
-
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 किया जाता है। ऐसे कुछ इस प्रकार से लिखा जाता है।
<input list="languages"> Select Language <br /> <datalist id="languages"> <option value="hindi"> <option value="english"> <option value="gujrati"> <option value="marathi"> </datalist> |
-
optgroup Element
optgroup एलिमेंट select एलिमेंट का बेटा है। लेकिन option एलिमेंट का बाप है। क्योंकि optgroup element से option एलिमेंट का एक group बनाकर पेश किया जाता है। इसको कुछ इस प्रकार से लिखा जाता है।
<select> <optgroup label="Programming"> <option value="h">hindi</option> <option value="e">english</option> <option value="m">marathi</option> <option value="g">gujrati</option> </optgroup> <optgroup label="Web Development"> <option value="H">HTML5</option> <option value="C">CSS3</option> <option value="J">Java</option> <option value="P">jqueri</option> </optgroup> </select> |
-
fieldset Element
इसका उपयोग form elements का group तैयार करने के लिए किया जाता है | यह elements के चारों ओर से box को draw करता है | इसे कुछ इस प्रकार लिखा जाता है।
<fieldset> <legend>Student Info</legend> Student Name : <input type="text" name="name"><br /> class : <input type="text" name="class"><br /> age : <input type="text" name="age"><br /> </fieldset> <input type="submit" name="sumbit"> |
-
legend Element
legend एलिमेंट से fieldset एलिमेंट को caption देने के लिए उपयोग किया जाता है। इसे कुछ इस प्रकार लिखा जाता है।
<fieldset> <legend>Student Info</legend> Student Name : <input type="text" name="name"><br /> Roll No : <input type="text" name="rollno"><br /> Address : <input type="text" name="address"><br /> </fieldset> <input type="submit" name="sumbit"> |
-
datalist Element
यह एलिमेंट select एलिमेंट के समान ही होता है। लेकिन datalist एलिमेंट के id attribute के साथ input एलिमेंट के list attribute के संबंध को लिखा जाता है |
datalist एलिमेंट से user option को select करने के साथ अपना इनपुट भी दे सकता है। इसे कुछ इस प्रकार लिखा जाता है।
<input list="languages">
|
-
button Element
button को create करने के लिए <button> एलिमेंट का इस्तेमाल किया जाता है। इस कुछ प्रकार लिखा जाता है।
<button onclick="alert('Button Clicked')">Click Me</button> |
6. html form में ध्यान देने योग्य।
जब भी हम किसी Users से केवल एक Line में ही Data लेने की जरूरत होती हैं। तब Single-line Text Input का उपयोग किया जाता है। इसके लिए <input> Tag के बहतर type Attribute में लिखी जाने वाली Value को text लिखा जाता हैं। |
जब हम यूजर से उसके पासवर्ड के बारे में जानकारी मांगते है। तब भी single -line का ही उपयोग होता है। लेकिन Data, characters में लिखा जाता है। इसलिए <input> Tag के आगे type Attribute के भीतर Value को password लिखा जाता हैं। |
जब हम किसी यूजर से एक से ज्यादा Lines में Data Input करवाते हैं। तब Multi-line Text Input Controls को HTML Forms में Define किया जाता करना होता है। इसके लिए <textarea> Tag का इस्तेमाल किया करना होता है। जिसमे हम Rows और Columns Define कर सकते हैं। कुछ इस प्रकार –<textarea name=”textarea” cols=”35″ rows=”5″ id=”textarea”></textarea> |
7. HTML Form का निर्माण
जैसा की हमने जाना की फॉर्म के प्रकार भिन्न भिन्न होते है। जो आवश्कता के अनुसार निर्माण किये जाते है। हम उन सभी फॉर्म का निर्माण करना जानेगे। जिनका उपयोग अधिक होता है। सभी को एक एक करके बनाना सिख्नेगे। सबसे पहले हम फॉर्म की शुरुआत Syntax से करते है। तो चलिए जानते है।
<head> all element here </form> |
इसमें हमे केवल फॉर्म का मैं टैग उपयोग किया है। जैसा की आप देख सकते है। की हमे सबसे <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> |