HTML में फॉर्म कैसे बनाएं

वेबसाइट उपयोगकर्ता से डेटा एकत्र करना कई अलग-अलग तरीकों से किया जा सकता है। वेबसाइटों पर फ़ॉर्म का एक सरल कार्य हो सकता है जैसे किसी उपयोगकर्ता को न्यूज़लेटर की सदस्यता लेना, या एक अधिक जटिल उद्देश्य जैसे नौकरी के लिए आवेदन पत्र के रूप में कार्य करना।

हालाँकि, एक बात जो इन सभी सरल से जटिल रूपों में समान है, वह है HTML और अधिक विशेष रूप से HTML उपनाम।

---

---

फॉर्म टैग का उपयोग करना

NS टैग एक HTML तत्व है जिसका उपयोग कंटेनर के रूप में अन्य तत्वों को संलग्न करने के लिए किया जाता है जिन्हें रूपों के लिए बिल्डिंग ब्लॉक्स के रूप में माना जा सकता है। इनमें से कुछ मूलभूत तत्वों में शामिल हैं: टैग, द टैग, और उपनाम।

NS टैग में एक महत्वपूर्ण विशेषता है जो इसकी कार्यक्षमता में योगदान करती है। इस विशेषता को क्रिया कहा जाता है और इसका उपयोग उस फ़ाइल की पहचान करने के लिए किया जाता है जिसे प्रपत्र में दर्ज किया गया डेटा पास किया जाएगा।

टैग उदाहरण का उपयोग करना







ऊपर दिया गया उदाहरण दिखाता है कि अपनी परियोजनाओं में फ़ॉर्म टैग का उपयोग कैसे करें। मुख्य टेकअवे में से एक यह है कि यदि आप एक फॉर्म टैग खोलते हैं तो आपको इसे बंद करना याद रखना चाहिए। यह एक प्रपत्र संरचना बनाएगा और यह भी सुनिश्चित करेगा कि प्रपत्र में दर्ज किया गया डेटा सही ढंग से संसाधित किया गया है।

टैग का उपयोग करना

NS प्रत्येक इनपुट फ़ील्ड में डेटा को एक रूप में वर्णित करने के लिए टैग का उपयोग किया जाता है। इस टैग में एक है के लिये विशेषता, जिसका उपयोग किसी प्रपत्र की कार्यक्षमता को बढ़ाने के लिए किया जाता है।

सम्बंधित: आपके कोड का परीक्षण करने के लिए सर्वश्रेष्ठ नि:शुल्क ऑनलाइन HTML संपादक

---

---

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

टैग उदाहरण का उपयोग करना


First Name:


ऊपर के उदाहरण में आप देख सकते हैं कि के लिये विशेषता को मान दिया गया है fname . इसलिए, यदि आप के साथ एक इनपुट फ़ील्ड बनाते हैं fname आईडी, यह फ़ील्ड हर बार आपके द्वारा क्लिक किए जाने पर हाइलाइट हो जाएगी प्रथम नाम लेबल।

---

---

टैग का उपयोग करना

अपने सबसे बुनियादी रूप में, टैग को टेक्स्ट बॉक्स के रूप में देखा जा सकता है। NS टैग उपयोगकर्ता से डेटा कैप्चर करता है और इसकी अधिक महत्वपूर्ण विशेषताओं में से एक है प्रकार गुण। NS प्रकार विशेषता डेटा के प्रकार को इंगित करती है जिसे यह टेक्स्ट बॉक्स एकत्र कर सकता है।

सम्बंधित: CSS में स्टैक्ड फॉर्म कैसे बनाएं

कई अलग-अलग मान हैं जिन्हें आप असाइन कर सकते हैं प्रकार विशेषता, लेकिन कुछ अधिक लोकप्रिय इस प्रकार हैं।

• मूलपाठ
• संख्या
• ईमेल
• छवि
• दिनांक
• चेक बॉक्स
• रेडियो
• पासवर्ड

टैग उदाहरण का उपयोग करना


First Name:



NS उपरोक्त कोड में टैग में तीन अलग-अलग विशेषताएं हैं जिनमें से प्रत्येक का एक अद्वितीय कार्य है। NS प्रकार विशेषता को एक टेक्स्ट मान असाइन किया गया है जिसका अर्थ है कि टेक्स्ट बॉक्स केवल वर्णों को स्वीकार करेगा।

NS पहचान विशेषता टेक्स्ट बॉक्स के लिए एक विशिष्ट पहचानकर्ता है, और यह महत्वपूर्ण है क्योंकि यह सीएसएस फ़ाइल से इस तत्व तक पहुंच प्रदान करता है। NS नाम विशेषता भी एक विशिष्ट पहचानकर्ता है; हालांकि, नाम विशेषता का उपयोग विकास के सर्वर-साइड से किसी तत्व के साथ बातचीत करने के लिए किया जाता है।

NS पहचान तथा नाम विशेषताएँ आमतौर पर उसी मान को निर्दिष्ट की जाती हैं जैसे एक क्लाइंट-साइड से किसी तत्व तक पहुँच प्रदान करता है और दूसरा सर्वर-साइड से।

चेकबॉक्स तत्व का उपयोग करना

अन्य तत्वों की तुलना में चेकबॉक्स तत्व बहुत ही अद्वितीय है जिसका आप उपयोग कर सकते हैं उपनाम। यह उपयोगकर्ता को संबंधित विकल्पों की सूची से एक या अधिक विकल्पों का चयन करने की अनुमति देता है। चेकबॉक्स आसानी से पहचाने जाते हैं क्योंकि वे छोटे वर्ग बॉक्स द्वारा दर्शाए जाते हैं जिनमें चयनित होने पर चेक होता है।

चेकबॉक्स तत्व उदाहरण का उपयोग करना


Programming Languages:
Java
JavaScript
Python


उपरोक्त उदाहरण में, प्रत्येक चेकबॉक्स तत्व में एक मान विशेषता होती है, और यह महत्वपूर्ण है क्योंकि यह संग्रह से प्रत्येक चेकबॉक्स विकल्प को अलग करने में मदद करता है। इसलिए, यदि कोई उपयोगकर्ता उपरोक्त विकल्पों में से 'जावा' का चयन करता है, तो डेटा उसे प्रतिबिंबित करेगा।

टैग और रेडियो तत्वों का उपयोग करना

NS टैग और रेडियो तत्व इस अर्थ में समान हैं कि वे उपयोगकर्ता को एक समय में केवल एक मान का चयन करने की अनुमति देते हैं; इसलिए, कोई कह सकता है कि उनका एक ही कार्य है। हालाँकि, वे दिखने में बहुत अलग हैं।

रेडियो तत्व दिखने में चेकबॉक्स तत्व के करीब है, हालांकि, रेडियो तत्व के साथ आपके पास वर्गों के बजाय मंडलियां हैं।

NS टैग अनिवार्य रूप से एक ड्रॉप-डाउन बॉक्स उत्पन्न करता है, जो उपयोगकर्ता को एकल मान का चयन करने की अनुमति देता है।

टैग और रेडियो तत्व उदाहरण का उपयोग करना


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer


दिनांक तत्व का उपयोग करना

दिनांक तत्व एक छोटा टेक्स्ट बॉक्स बनाता है जो क्लिक करने पर कैलेंडर उत्पन्न करता है। का उपयोग करते हुए दिनांक आपके प्रपत्रों में एक इनपुट प्रकार के रूप में संभावित रूप से गलत तिथि दर्ज करने वाले उपयोगकर्ता के खिलाफ सुरक्षा करता है, जिससे संभावित रूप से गलत डेटा का संग्रह हो सकता है।

दिनांक तत्व उदाहरण का उपयोग करना




ईमेल और पासवर्ड तत्व का उपयोग करना

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

ईमेल तत्व टेक्स्ट बॉक्स में दर्ज डेटा की निगरानी करता है और यह सुनिश्चित करता है कि प्रत्येक सबमिशन ईमेल पते की मानक आवश्यकता को पूरा करता है; जिसका अर्थ है एक स्थानीय भाग, उसके बाद @ चिह्न, और एक डोमेन के साथ समाप्त होना।

ईमेल तत्व उदाहरण का उपयोग करना




ऊपर दिए गए उदाहरण में आपको एक नई विशेषता से परिचित कराया जाता है जिसे कहा जाता है प्लेसहोल्डर , और यह विशेषता एक टेक्स्ट मान लेती है जो टेक्स्ट बॉक्स में फीका ग्रे में प्रदर्शित होता है। इस टेक्स्ट का उपयोग उस डेटा को इंगित करने के लिए किया जाता है जिसे टेक्स्ट बॉक्स में रखा जाना है जैसा कि ऊपर के उदाहरण में देखा गया है।

पासवर्ड तत्व वर्णों को तारांकन में बदल देता है क्योंकि उन्हें टेक्स्टबॉक्स में दर्ज किया जा रहा है। इसलिए, यदि आपकी कंप्यूटर स्क्रीन अन्य लोगों को दिखाई देती है, तो वे आपके द्वारा दर्ज किया गया पासवर्ड नहीं देखेंगे।

पासवर्ड तत्व उदाहरण का उपयोग करना




बटन टैग का उपयोग करना

एक रूप में, आमतौर पर दो अलग-अलग प्रकार के बटन होते हैं। पहला सबमिट बटन है, जो फॉर्म में दर्ज किए गए डेटा को एक्शन एट्रिब्यूट को सौंपे गए मान पर सबमिट करता है (जो इसमें स्थित है < फॉर्म> उपनाम)।

सबमिट बटन उदाहरण

Submit


दूसरे प्रकार का बटन जो आमतौर पर किसी प्रपत्र में उपयोग किया जाता है, एक रीसेट बटन होता है, जो डेटा को किसी प्रपत्र में साफ़ करता है ताकि उपयोगकर्ता ताज़ा डेटा दर्ज कर सके। NS टैग में एक है प्रकार विशेषता, जिसका उपयोग बटन के कार्य को इंगित करने के लिए किया जाता है। ऊपर के उदाहरण में प्रकार विशेषता मान निर्दिष्ट है प्रस्तुत , इसलिए, एक बटन जिसमें a . है प्रकार का मूल्य रीसेट फॉर्म को रीसेट करने के लिए उपयोग किया जाता है।

रीसेट बटन उदाहरण

Reset


एक फॉर्म बनाना

HTML में एक सरल फ़ॉर्म बनाने के लिए आपको ऊपर बताए गए सभी तत्वों को a . में संलग्न करना होगा उपनाम।

एक फॉर्म उदाहरण बनाना






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset






उपरोक्त कोड निम्नलिखित फॉर्म का उत्पादन करेगा:

windows.com/stopcode महत्वपूर्ण प्रक्रिया मर गई

अब आप HTML में एक साधारण फॉर्म बना सकते हैं

यह आलेख आपको कार्यात्मक HTML प्रपत्र बनाने के लिए सभी उपकरण प्रदान करता है। यह विभिन्न HTML टैग्स की पहचान करता है जिनका उपयोग प्रपत्र निर्माण में किया जाता है और उन विभिन्न विशेषताओं की खोज करता है जिनका उपयोग इन टैग्स के साथ किया जा सकता है।

हालाँकि, अधिकांश प्रपत्र जो आप वेबसाइटों पर देखते हैं उनमें एक अतिरिक्त घटक होता है; CSS, जिसका उपयोग फॉर्म को जीवंत बनाने और इसे अधिक सौंदर्यपूर्ण रूप से मनभावन बनाने के लिए किया जाता है।

साझा करना साझा करना कलरव ईमेल आवश्यक CSS3 गुण पत्रक धोखा

हमारे CSS3 गुण चीट शीट के साथ मास्टर आवश्यक CSS सिंटैक्स।

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• एचटीएमएल
• वेब विकास
• कोडिंग ट्यूटोरियल

लेखक के बारे में कदीशा कीन(21 लेख प्रकाशित)

कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीकी नौसिखिए द्वारा आसानी से समझा जा सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।

कदीशा कीन . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें