HTML प्रेक्टिकल - एचटीएमएल फॉर्म एलीमेंट का प्रयोग
HTML Practical - Using HTML Form Elements
वेब डिजाईन विद एचटीएमएल प्रेक्टिकल - एचटीएमएल फॉर्म एलीमेंट का प्रयोग
Web Design with HTML Practical - Using Form Elements
एचटीएमएल फॉर्म का प्रयोग यूजर द्वारा दिए जाने वाले इनपुट के लिए किया जाता है। एचटीएमएल फॉर्म के द्वारा विभिन्न जानकारी जैसे नाम, ईमेल आई डी, एड्रैस, फोन नंबर, पासवर्ड आदि की जानकारी विभिन्न फॉर्म एलीमेंट जैसे इनपुट टेक्स्ट, टेक्स्ट फील्ड, चेकबॉक्स, रेडियो बटन, सबमिट बटन आदि के द्वारा प्राप्त की जा सकती है। एचटीएमएल फॉर्म द्वारा यह सभी जानकारियाँ आसानी से प्राप्त की जा सकती हैं।
HTML मे फॉर्म (Form) को <form> ........... </form> टैग से डिफाइन करते है।
HTML फॉर्म को विभिन्न प्रकार के यूजर से डाटा को इकट्ठा करने के लिए प्रयोग किया जाता है जैसे : Name, Email Address, Phone Numbers की जानकारी आदि।
एचटीएमएल में प्रयोग की जाने वाले विभिन्न फॉर्म एलीमेंट निम्न हैं:
Requirements : (Tools / Equipments / Instruments)
पर्सनल कंप्यूटर / माइक्रोसॉफ्ट विंडोज / नोटपैड / वेब ब्राउज़र
एचटीएमएल फॉर्म एलीमेंट का प्रयोग | Using Form Elements in HTML
HTML में फॉर्म का प्रयोग करने के लिए निम्नानुसार स्टेप्स प्रयोग कीजिए।
विंडोज के नोटेपेड प्रोग्राम को ओपन कीजिए
START > ALL PROGRAMS > ACCESSORIES > NOTEPAD
नोटपैड में निम्नानुसार कोड टाइप कीजिए।
फाइल को सेव कीजिए। HTML File को सेव करने के लिए की-बोर्ड से Ctrl + S दबाएं। SaveAs डायलॉग बॉक्स में फाईल के नाम के साथ एक्सटेंशन के रूप में HTML अवश्य लिखें. जैसे form.html और Save as type : आप्शन पर निम्नानुसार All Files सेलेक्ट कर Save बटन पर क्लिक कीजिए।
फाईल को खोलने के लिए माऊस से डबल क्लिक कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। यह इस प्रकार दिखाई देगी।
एचटीएमएल ऑनलाइन प्रेक्टिस – एचटीएमएल फॉर्म इनपुट एलीमेंट का प्रयोग
Online HTML Practice - Using Input Element in HTML Form Program Code
HTML प्रोग्राम की ऑनलाइन प्रैक्टिस नीचे दिए गए कोड विंडो में एचटीएमएल फॉर्म इनपुट एलीमेंट का प्रोग्राम कोड लिख कर फॉर्म बना सकते हैं। प्रोग्राम कोड का आउटपुट, रिजल्ट विंडो में प्रदर्शित होगा।
See the Pen HTML Form - Using Text Field, Password Field, Radio Button by ITI COPA (@copaguide) on CodePen.
➥ <input> एलीमेंट का प्रयोग कर एचटीएमएल में स्कूल एडमिशन फॉर्म का कोड लिखकर आउटपुट रिजल्ट विंडो में चेक कीजिए।
एचटीएमएल ऑनलाइन प्रेक्टिस – एचटीएमएल फॉर्म लेबल एलीमेंट का प्रयोग
Online HTML Practice - Using Label Element in HTML Form Program Code
See the Pen HTML Form Input Element with Type Attribute by ITI COPA (@copaguide) on CodePen.
एचटीएमएल ऑनलाइन प्रेक्टिस – एचटीएमएल फॉर्म सिलेक्ट एलीमेंट का प्रयोग
Online HTML Practice - Using Select Element in HTML Form Program Code
HTML फॉर्म में ड्रॉप डाउन लिस्ट के लिए <select> एलीमेंट का प्रयोग किया जाता है। select फ़ॉर्म एलीमेंट्स के option एट्रीब्यूट के द्वारा सिलेक्शन लिस्ट की वैल्यू को डिफाइन किया जाता है।
See the Pen HTML Form Select Element with Option Tag by ITI COPA (@copaguide) on CodePen.
एचटीएमएल ऑनलाइन प्रेक्टिस – एचटीएमएल फॉर्म फील्ड सेट एवं लेजेंड एलीमेंट का प्रयोग
Online HTML Practice - Using Fieldset & Legend Element in HTML Form Program Code
HTML फॉर्म में फील्डसेट <fieldset> एलिमेंट फॉर्म में एक ही प्रकार के डाटा की ग्रुपिंग के लिए उपयोग किया जाता है। जैसे रेजिस्ट्रैशन फॉर्म में पर्सनल इनफार्मेशन, क्वालिफिकेशन, आदि को अलग अलग ग्रुप में बांटना है तो fieldset एलीमेंट का प्रयोग करते हैं। इसी प्रकार <legend> का प्रयोग इसके कैप्शन के लिए किया जाता है।
See the Pen Field Set and Legend in HTML Form by ITI COPA (@copaguide) on CodePen.