 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आप का स्वागत है। आज हम लेसन १८ सीखेंगे।
पिछले लेसन में हम ने iframe के बारे में सीखा।
आज हम forms के बारे में सीखेंगे।
HTML forms in Hindi
हम वेब पेज में फॉर्म डिस्प्ले कर सकते हैं। इस फॉर्म में हम कुछ इंफॉर्मेशन दे सकते हैं। हम एक उदाहरण लेंगे। हम ऐसी वेब साइट्स देखते हैं जहाँ log in करना पडता है। यहाँ पर पहले register करना पडता है। रजिस्टर करते समय एक फॉर्म डिस्प्ले होता है। इस में हम अपना नाम, e-mail address, पासवर्ड जैसा इंफॉर्मेशन देते हैं। यह इंफॉर्मेशन एक database में save की जाती है। इसके बाद हमें log-in करने के लिए यह इंफॉर्मेशन देनी पडती है। इस इंफॉर्मेशन को verify किया जाता है और हम उस वेब साइट में जाते हैं।यहाँ दो बाते होती है। पहली बात वेब पेज में फॉर्म डिस्प्ले करना और end-user ने enter किया हुआ इंफॉर्मेशन capture करना। इसके लिए HTML, CSS जैसी languages होती है। इन को client-side या front-end programming languages कहते हैं। इन languages से ऐसे interfaces बना सकते हैं जो clients के साथ interact कर सकते हैं।
एक बार data capture हो गया तो डाटा को database में save करना पडता है और फिर request करने पर retrieve करना पडता है। यह सब करने के लिए special programming languages होती है। इनको back-end या server-side languages कहते हैं। PHP, ASP server-side languages हैं।
तो HTML में हम ऐसे फॉर्म्स बनाते हैं जिन में end-users डाटा टाइप कर सकते हैं और फॉर्म्स वह डाटा capture करते हैं। Back-end programs डाटा को save करते हैं, process करते हैं, और जब जरूरत पडती है, उसे retrieve कर सकते हैं।
अब एक महत्वपूर्ण बात: किसी भी वेब पेज में right-click -> inspect करने पर हम HTML कोड देख सकते हैं। लेकिन back-end programs hidden होते हैं। यह end-users को नहीं दिखते।
अब हम हमारे वेब पेज में फॉर्म डिस्प्ले करने के लिए कोडिंग देखते हैं।
इस के लिए <form> tag होता है। इस फॉर्म में हम text boxes बनाते हैं जिसमें users information टाइप कर सकते हैं।
यह कोडिंग ऐसा होता है।
<form action="savedata.php" id="form1">
<h3>Not a member? Fill in only name and email and become a member.</h3>
<br />
First Name:
<br />
<input type="text" name="fname"><br />
Last Name:
<br />
<input type="text" name="lname"><br />
Email:
<br />
<input type="text" name="lname"><br />
</form>
<br /><br />
<button type="submit" form="form1" value="Submit">Submit</button>
इस कोडिंग को समझ लेंगे।
सब से पहला tag है <form>। इस का एक attribute होता है "action"। फॉर्म भरने के बाद "Submit" button क्लिक करने पर आगे का प्रोसेसिंग "savedata.php" नाम का प्रोग्राम करेगा। यह एक back-end प्रोग्राम है।
इस tag का और एक attribute है -id। यह फॉर्म को एक नाम देता है - "form1"।
इस के नीचे हम ने <h3> element दिया है। यह हेडिंग वेब पेज में फॉर्म के ऊपर आयेगा।
इस के नीचे हम ने लिखा है -First Name:। यह टेक्सट वेब पेज में डिस्प्ले होता है और user को बताता है की बॉक्स में फर्स्ट नेम लिखना है।
इस के नीचे <input> tag है। इसका attribute है "type"। हम ने input type text दिया है। इसलिए एक टेक्सट बॉक्स डिस्प्ले होगा। User इस बॉक्स में अपना first name टाइप कर सकता है। <input> का और एक attribute है "name"। हमने name दिया है fname। इसलिए user ने जो नाम टाइप किया है वह fname नाम के फील्ड में capture होगा।
हमने ऐसेही तीन फील्ड्स लिखे हैं।
इस के बाद <button> element आता है। <button> tag का attribute है "type"। हम ने इस attribute का type दिया है "submit"। इस का मतलब यह बटन एक submit बटन है। दूसरा attribute है form। यह बताता है की यह submit बटन form1 का है। तीसरा attribute है value। इस tag के बाद हम ने टेक्सट लिखा है - "Submit"। यह टेक्सट बटन पर डिस्प्ले होगा।
अब तीनों बॉक्स में डाटा टाइप करने के बाद और "Submit" बटन पर क्लिक करने के बाद डाटा capture हो जाता है और यहां से back-end प्रोग्राम आता है।
याद रखिये: फॉर्म में अलग अलग प्रकार के input elements होते हैं, जैसे text fields, radio buttons, check boxes वगैरह।
हमारे फॉर्म में submit बटन पर क्लिक करने के बाद message आयेगा "Your file was not found" क्यों की ऐसे नाम की कोई फाइल नहीं है, हम ने केवल उदाहरण के लिए यह नाम दिया है।
याद रखिये: <button> tag Internet Explorer में काम नहीं करता है। इसके लिए CSS का उपयोग करके कोडिंग करना पडता है।
आइये, अब फॉर्म डिस्प्ले करने के लिए प्रोग्राम लिखेंगे।
एक नयी Notepad फाइल ओपन कीजिये। इस में lesson-17 का <!doctype> से <body> तक कोड कॉपी कीजिये। <body> के नीचे ऊपर दिया हुआ कोड कॉपी कीजिये। </body और </html> लिखिये। Source कोड की PDF फाइल देखने के लिए आकृति १८-१. पर क्लिक कीजिये।
 |
| आकृति १८-१. HTML form - text box |
इस फाइल को "Lesson-18" और "Lesson-18.html" नाम से save कीजिये। Windows Explorer में जाइये और आउटपुट देखिये।
 |
| आकृति १८-२ Display form in a web page, HTML form |
हमारा फॉर्म डिस्प्ले हुआ है। इस में तीन टेक्सट फील्ड आये है जिनमें हम अपना डाटा टाइप कर सकते हैं। Text boxes को वेब पेज में देखने के लिए आकृति १९-४ पर क्लिक कीजिये। उस वेब पेज में सभी तरह के input elements डिस्प्ले किये हैं। "Submit" बटन पर क्लिक करने पर मेसेज आयेगा "Your file was not found" क्योंकि हमने "savedata. php" नाम का फाइल नहीं बनाया है।
Important Points:
१. HTML के <form> tag का उपयोग फॉर्म्स बनाने के लिए होता है। Users इस में डाटा दे सकते हैं और फॉर्म यह डाटा capture करता है। इस के बाद back-end प्रोग्राम इस डाटा को save करता है।२. Form tag के अंदर "input" tag देते हैं। इस tag में input की सारी इनफार्मेशन होती है। "type" attribute एक इनपुट element का टाइप बताता है, जैसे text box, radio button, checkbox वगैरह।
३. <input> का और एक attribute होता है - "name"। यह "field name" होता है जिसमें user ने दिया हुआ डाटा capture किया जाता है।
४. <button> वेब पेज में एक बटन डिस्प्ले करता है। अलग अलग तरह के बटन होते हैं। हम फॉर्म के लिए "submit" बटन बनाते हैं। इस लिए इस का type attribute होता है - submit। इस बटन को क्लिक करने पर फॉर्म डाटा capture करता है।
लेसन १७ लेसन १९
