HTML फॉर्म कैसे बनाएं (उदाहरण समझाया गया)

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

एक HTML फॉर्म की संरचना

टैग का उपयोग करके एक HTML फॉर्म बनाया जाता है. इस टैग के भीतर, आपके पास विभिन्न प्रकार के विभिन्न इनपुट तत्व हो सकते हैं, जैसे टेक्स्ट फ़ील्ड, बटन, चेकबॉक्स, रेडियो बटन, और बहुत कुछ।

इनपुट तत्व यहां जाते हैं

इनपुट तत्व

पाठ क्षेत्र

टेक्स्ट फ़ील्ड टैग का उपयोग करके बनाए जाते हैं विशेषता के साथ प्रकार लिटाया मूलपाठ. उदाहरण के लिए:

नाम:




फ़ोन

तत्व फ़ोन नंबर इनपुट फ़ील्ड के लिए उपयोग किया जाता है।

फ़ोन:


तारीख

तत्व दिनांक का चयन करने के लिए उपयोग किया जाता है।

जन्म तिथि:


पासवर्ड

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

पासवर्ड:


पुरालेख

तत्व उपयोगकर्ता को अपने स्थानीय फ़ाइल सिस्टम से फ़ाइल का चयन करने की अनुमति देने के लिए उपयोग किया जाता है।

फ़ाइल अपलोड करें:


चेक बॉक्स

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

मुझे नियम और शर्तें स्वीकार हैं

रेडियो

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

लिंग:

आदमी

औरत

संख्या

तत्व संख्यात्मक इनपुट फ़ील्ड के लिए उपयोग किया जाता है।

मात्रा:


श्रेणी

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

आयतन:




बटन

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

नाम:




फॉर्म इनपुट को संभालना

जब सबमिट बटन दबाया जाता है, तो फॉर्म डेटा प्रोसेसिंग के लिए सबमिट हो जाता है। यह दो तरीकों में से एक के माध्यम से किया जाता है: GET या POST, जो विशेषता का उपयोग करके निर्दिष्ट किया गया है तरीका लेबल में .

विधि प्राप्त करें

GET विधि URL के भाग के रूप में प्रपत्र डेटा सबमिट करती है। यह खोज जैसी चीज़ों के लिए उपयोगी है, जहाँ प्रपत्र डेटा संवेदनशील नहीं है। हालाँकि, इस विधि में भेजे जा सकने वाले डेटा की लंबाई के संदर्भ में सीमाएँ हैं।

इनपुट तत्व यहां जाते हैं

पोस्ट विधि

POST विधि फॉर्म डेटा को URL से अलग जमा करती है। यह अधिक सुरक्षित है और बहुत बड़ी मात्रा में डेटा को संभाल सकता है, इसलिए इसका उपयोग संपर्क या लॉगिन फॉर्म सबमिशन जैसी चीजों के लिए किया जाता है।

इनपुट तत्व यहां जाते हैं

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

HTML प्रपत्र उदाहरण सभी तत्वों के साथ 

यहां एक ऐसा फ़ॉर्म दिया गया है जो इस लेख में हमारे द्वारा समीक्षा किए गए सभी तत्वों का उपयोग करता है:

पंजीकरण फॉर्म

नाम:



उपनाम:



ईमेल:



फ़ोन:



जन्म तिथि:



पासवर्ड:



फ़ाइल अपलोड करें:



मुझे नियम और शर्तें स्वीकार हैं


लिंग:

आदमी

औरत

मात्रा:



आयतन:




इस फॉर्म में प्रथम नाम, अंतिम नाम, ईमेल, फोन, जन्म तिथि, पासवर्ड, अपलोड करने के लिए एक फ़ील्ड है फ़ाइल, नियमों और शर्तों के लिए एक चेकबॉक्स, लिंग चुनने के लिए रेडियो, और मात्रा और मात्रा के लिए संख्या और श्रेणी फ़ील्ड, क्रमश।

अंत में "सबमिट" बटन वह है जो विशेषता में निर्दिष्ट यूआरएल को फॉर्म जमा करने का प्रभारी होगा कार्य लेबल का आकार (इस मामले में, "/submit_form")। इस फॉर्म को वास्तविक वेबसाइट पर काम करने के लिए, आपको "/submit_form" पथ में इस फॉर्म से जानकारी प्राप्त करने और संसाधित करने के लिए एक सर्वर को कॉन्फ़िगर करने की आवश्यकता होगी।