HTML फॉर्म्स कैसे बनाएं: एक गाइड

HTML फॉर्म्स टेक्स्ट फील्ड्स, ड्रॉपडाउन्स, चेकबॉक्स, और अधिक के साथ यूजर्स से डेटा एकत्र करते हैं। HTML में फॉर्म्स <form> टैग के भीतर संलग्न होते हैं और एलिमेंट्स बनाने के लिए <input> टैग का उपयोग करते हैं।

HTML फॉर्म्स यूजर्स के लिए वेबसाइट या वेब एप्लिकेशन के साथ इंटरैक्ट करने का एक तरीका प्रदान करते हैं। वेब फॉर्म्स यूजर्स को डेटा सबमिट करने की अनुमति देते हैं जिसे एक वेबसाइट या सर्वर तब प्रोसेस और स्टोर कर सकता है।

HTML में फॉर्म कैसे बनाते हैं? यही वह सवाल है जिसका जवाब हम इस ट्यूटोरियल में देंगे।

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

HTML फॉर्म्स

HTML में, फॉर्म्स एक या अधिक एलिमेंट्स से बने होते हैं। HTML फॉर्म्स में निम्नलिखित एलिमेंट्स शामिल हो सकते हैं:

• सिंगल-लाइन टेक्स्ट फील्ड्स
• टेक्स्ट बॉक्सेस
• ड्रॉपडाउन बॉक्सेस
• चेकबॉक्सेस
• बटन्स
• रेडियो बटन्स

ये एलिमेंट्स, बटन्स और टेक्स्ट बॉक्सेस को छोड़कर, HTML कोड में <input> टैग का उपयोग करते हैं।

एक यूजर द्वारा फॉर्म सबमिट करने के बाद, फॉर्म की सामग्री:

• आगे की प्रोसेसिंग के लिए सर्वर को भेजी जा सकती है या
• वेब ब्राउज़र द्वारा प्रोसेस की जा सकती है।

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।

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

हमें चार जानकारी स्वीकार करने वाला एक फॉर्म बनाने का काम सौंपा गया है। ये हैं:

• यूजर का नाम।
• यूजर का ईमेल पता।
• क्या यूजर ने कभी कॉफी हाउस का दौरा किया है।
• वह संदेश जो यूजर कॉफी हाउस को भेजना चाहता है।

इसका मतलब है कि हमारे फॉर्म में चार एलिमेंट्स शामिल होने होंगे। हमारे फॉर्म में एक बटन भी होना चाहिए ताकि यूजर अपना फॉर्म सबमिट कर सके।

HTML <form> टैग

HTML में फॉर्म्स <form> टैग के भीतर संलग्न होते हैं। यहां HTML में फॉर्म का एक उदाहरण है:

<form> // एलिमेंट्स </form>

<form> टैग का उपयोग HTML में फॉर्म को परिभाषित करने के लिए किया जाता है। एक बार परिभाषित होने के बाद, <form> टैग में फॉर्म एलिमेंट्स शामिल हो सकते हैं, जैसे चेकबॉक्सेस और सिंगल-लाइन टेक्स्ट फील्ड्स।

फॉर्म एलिमेंट दो विशेषताओं को स्वीकार करता है: action और method। हम इस ट्यूटोरियल में बाद में इन विशेषताओं पर चर्चा करेंगे।

HTML फॉर्म्स के लिए <input> एलिमेंट्स

अधिकांश HTML फॉर्म कंट्रोल्स में इनपुट एलिमेंट्स शामिल होते हैं। इनका उपयोग यूजर से विभिन्न प्रकार के डेटा एकत्र करने के लिए किया जाता है। इनपुट एलिमेंट्स को <input> टैग का उपयोग करके परिभाषित किया जाता है।

<input> एलिमेंट वेबसाइट पर कैसे दिखाई देता है यह निर्दिष्ट type विशेषता पर निर्भर करता है। उदाहरण के लिए, यदि एक इनपुट फील्ड एक टेक्स्ट बॉक्स है, तो यह रेडियो बटन होने की तुलना में अलग दिखाई देगा।

<input> एलिमेंट का सिंटैक्स इस प्रकार है:

<input type="type" id="elementId">

इस उदाहरण में, <input> दो विशेषताओं को स्वीकार करता है। पहली विशेषता, जिसे type कहा जाता है, वह इनपुट का प्रकार है जिसे फॉर्म फील्ड स्वीकार करेगा। type विशेषता के कई मान हो सकते हैं, लेकिन कुछ सबसे आम हैं:

• button
• checkbox
• email
• text
• number
• radio

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

आइए थ्री ब्रदर्स कॉफी हाउस पर वापस चलते हैं। हम जो फॉर्म बना रहे हैं उसे यूजर के बारे में चार जानकारी स्वीकार करने की आवश्यकता है। पहली दो जानकारी जो हम एकत्र करना चाहते हैं वे हैं यूजर का नाम और ईमेल पता।

हम इन दो जानकारियों को दो <input> टैग्स का उपयोग करके एकत्र कर सकते हैं:

<form> <label for="name">नाम:</label><br/> <input type="text" id="name" name="name"><br /><br /> <label for="email">ईमेल:</label><br/> <input type="email" id="email" name="email"> </form>

ऊपर एडिटर में बटन पर क्लिक करके कोड चलाएं।

जैसा कि आप देख सकते हैं, हमने एक फॉर्म बनाया जो दो मान स्वीकार करता है: यूजर का नाम और यूजर का ईमेल पता। इस उदाहरण में, हमने <label> एलिमेंट का भी उपयोग किया। हम इस एलिमेंट पर जल्द ही चर्चा करेंगे।

HTML फॉर्म्स में name विशेषता

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

उपरोक्त उदाहरण में, हमारे "नाम" फील्ड में name विशेषता है जिसका मान name है, और हमारे "ईमेल" फील्ड में name विशेषता है जिसका मान email है।

HTML <label> एलिमेंट

हमारे ऊपर के उदाहरण में, हमने अपने फॉर्म में प्रत्येक आइटम पर HTML लेबल जोड़ने के लिए <label> एलिमेंट का उपयोग किया। <label> टैग हमें फॉर्म एलिमेंट के उद्देश्य और यह किस डेटा को स्वीकार करता है, को स्पष्ट रूप से बताने देता है।

एक <label> टैग हमें उस टेक्स्ट को भी परिभाषित करने की अनुमति देता है जिसे कंप्यूटर उन यूजर्स को पढ़कर सुनाएगा जो स्क्रीन रीडर्स का उपयोग करते हैं। ऐसा इसलिए है क्योंकि जब स्क्रीन रीडर वेब पेज पर इनपुट फील्ड का सामना करता है तो वह लेबल को पढ़ेगा।

यहां HTML लेबल का सिंटैक्स है:

<form> <label for="name">नाम:</label><br/> <input type="text" id="name" name="name"> </form>

उपरोक्त उदाहरण में, हमने एक फॉर्म बनाया जो यूजर का नाम एकत्र करता है। हमने फॉर्म पर नाम: लेबल जोड़ने के लिए <label> टैग का उपयोग किया। ध्यान दें कि हमने अपने <label> एलिमेंट में for नामक एक विशेषता भी निर्दिष्ट की। यह विशेषता input एलिमेंट द्वारा उपयोग की जाने वाली id विशेषता के बराबर होनी चाहिए जिससे लेबल जुड़ा हुआ है, क्योंकि यह एक फॉर्म को उसके संबंधित लेबल से बांधता है।

HTML फॉर्म एलिमेंट्स

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

अब तक, हमने दो फॉर्म फील्ड्स बनाए हैं: नाम फील्ड और ईमेल फील्ड। आइए चर्चा करें कि हम अपने फॉर्म के बाकी हिस्से कैसे बना सकते हैं।

रेडियो बटन्स

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

रेडियो बटन के लिए निम्नलिखित सिंटैक्स है:

<input type="radio" name="radio_button">

हमारे फॉर्म पर, हम यूजर से पूछना चाहते हैं कि क्या वे थ्री ब्रदर्स कॉफी हाउस के ग्राहक हैं। हम इस कार्य को पूरा करने के लिए रेडियो बटन का उपयोग कर सकते हैं। यहां वह कोड है जिसका उपयोग हम ऐसा करने के लिए करेंगे:

<form> <p>क्या आप थ्री ब्रदर्स कॉफी हाउस के ग्राहक हैं?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">हाँ</label><br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">नहीं</label><br /> </form>

ऊपर एडिटर में बटन पर क्लिक करके कोड चलाएं।

हमारा यूजर तब दो मानों में से एक सबमिट कर सकता है: yes या no।

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

अगली पंक्ति पर, हम एक रेडियो बटन बनाते हैं जिसका मान yes है। फिर हम इस बटन के लिए एक लेबल बनाते हैं, जो "हाँ" टेक्स्ट प्रदर्शित करता है। अगला, हम no मान के साथ एक रेडियो बटन बनाते हैं और उस बटन के लिए एक लेबल बनाते हैं, जो "नहीं" टेक्स्ट प्रदर्शित करता है।

ध्यान दें कि हमारे कोड में हमारे रेडियो बटन्स में एक value विशेषता निर्दिष्ट है। यह मान वह डेटा है जिसे सर्वर को भेजा जाएगा जब यूजर फॉर्म सबमिट करेगा। इसलिए, यदि यूजर "हाँ" रेडियो बटन पर क्लिक करता है, तो मान yes सर्वर को भेजा जाएगा।

HTML <textarea> एलिमेंट

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

हम <textarea> एलिमेंट का उपयोग करके ऐसा कर सकते हैं, जैसे:

<form> <label for="message">संदेश:</label><br /> <textarea id="message" name="message"> आप थ्री ब्रदर्स कॉफी हाउस को क्या संदेश भेजना चाहते हैं? </textarea> </form>

हमारे कोड में, हम एक label को परिभाषित करके शुरू करते हैं जो "संदेश:" मान प्रदर्शित करता है।

हम फिर <textarea> टैग का उपयोग करके एक टेक्स्ट एरिया परिभाषित करते हैं। हम इस टेक्स्ट एरिया के लिए दो विशेषताएँ निर्दिष्ट करते हैं:

1. id. इसका उपयोग यूजर द्वारा अपनी प्रतिक्रिया सबमिट करने के बाद हमारे फॉर्म की सामग्री को संदर्भित करने के लिए किया जाता है।
2.  name. यदि हम अपने फॉर्म को वेब सर्वर पर सबमिट करना चाहते हैं तो यह आवश्यक है।

अंत में, हम अपने शुरुआती और समापन <textarea> टैग्स के बीच आप थ्री ब्रदर्स कॉफी हाउस को क्या संदेश भेजना चाहते हैं? संदेश जोड़ते हैं। यह डिफ़ॉल्ट संदेश है जो यूजर को दिखाई देगा।

हमारे कोड का परिणाम इस प्रकार है:

ऊपर एडिटर में बटन पर क्लिक करके कोड चलाएं।

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

HTML submit बटन

अब जब हमने अपने फॉर्म की सामग्री को परिभाषित कर लिया है, तो हम एक सबमिट बटन जोड़ने के लिए तैयार हैं। यहां सबमिट बटन का सिंटैक्स है:

<input type="submit" value="सबमिट">

सबमिट बटन्स का उपयोग फॉर्म की सामग्री को फॉर्म हैंडलर को सबमिट करने के लिए किया जाता है। (एक फॉर्म हैंडलर आमतौर पर वेब सर्वर पर एक पेज होता है जो फॉर्म की सामग्री को प्रोसेस कर सकता है।) सबमिट बटन फॉर्म हैंडलर से लिंक होता है। आपको <form> टैग की action विशेषता का उपयोग करके फॉर्म हैंडलर निर्दिष्ट करने की आवश्यकता है।

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

<form action="/post.php"> <label for="name">नाम:</label> <br/> <input type="text" id="name" name="name"> <br /> <br /> <label for="email">ईमेल:</label> <br /> <input type="email" id="email" name="email"> <br /> <p>क्या आप थ्री ब्रदर्स कॉफी हाउस के ग्राहक हैं?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">हाँ</label> <br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">नहीं</label> <br /><br /> <label for="message">संदेश:</label><br /> <textarea id="message" name="message"> आप थ्री ब्रदर्स कॉफी हाउस को क्या संदेश भेजना चाहते हैं? </textarea> <input type="submit" value="सबमिट"> </form>

जैसा कि आप देख सकते हैं, हमने अपने फॉर्म में एक सबमिट बटन जोड़ा। हमने <form> टैग में एक action पैरामीटर भी निर्दिष्ट किया। यह पैरामीटर फॉर्म को उस फाइल से लिंक करता है जो इसकी सामग्री को संभालेगी।

वेब फॉर्म सबमिट करना

HTML फॉर्म बनाने के बाद, आपको एक हैंडलर बनाने की आवश्यकता होती है जो यूजर्स द्वारा आपके फॉर्म के माध्यम से सबमिट किए गए डेटा को प्रोसेस करेगा। <form> एलिमेंट दो विशेषताएँ प्रदान करता है जिनका उपयोग फॉर्म डेटा को सर्वर पर भेजने के लिए किया जाता है: action और method।

फॉर्म action विशेषता

action विशेषता फॉर्म हैंडलर कोड के स्थान को परिभाषित करती है। जब आपका फॉर्म सबमिट होता है—जब यूजर सबमिट बटन पर क्लिक करता है—तो फॉर्म द्वारा एकत्र किया गया डेटा फॉर्म हैंडलर को भेजा जाएगा।

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

<form action="/post.php"> </form>

यदि कोई action विशेषता निर्दिष्ट नहीं है, तो फॉर्म वर्तमान पेज पर सबमिट हो जाता है।

फॉर्म method विशेषता

method विशेषता बताती है कि फॉर्म सबमिट होने पर किस HTTP मेथड का उपयोग किया जाना चाहिए। डिफ़ॉल्ट रूप से, फॉर्म्स GET मेथड का उपयोग करते हैं, लेकिन आप किसी अन्य HTTP मेथड का भी उपयोग कर सकते हैं, जैसे POST।

यहां फॉर्म method विशेषता का एक उदाहरण है:

<form action="/post.php" method="POST"> </form>

जब यह फॉर्म सबमिट होता है, तो इसके द्वारा एकत्र किया गया डेटा HTTP POST मेथड का उपयोग करके सर्वर को भेजा जाएगा। (वैकल्पिक रूप से, यदि हम GET रिक्वेस्ट भेजना चाहते थे, तो हम "GET" निर्दिष्ट कर सकते थे, या बस इसे खाली छोड़ सकते थे क्योंकि GET डिफ़ॉल्ट मेथड है।)

अधिकांश मामलों में, आपको डेटा सबमिट करने के लिए HTTP POST मेथड का उपयोग करना चाहिए। ऐसा इसलिए है क्योंकि GET मेथड फॉर्म डेटा को पेज के एड्रेस फील्ड में दृश्यमान बना देता है। इसलिए, यदि हमने "नाम" नामक फील्ड वाला एक फॉर्म post.php पर सबमिट किया जिसमें मान "पॉलिन" था, तो निम्नलिखित वेबसाइट पर सबमिट किया गया होगा:

/post.php?name=Pauline

यह डेटा भेजने का एक असुरक्षित तरीका है। यदि आप संवेदनशील जानकारी संभाल रहे हैं तो GET मेथड का कभी उपयोग नहीं किया जाना चाहिए।

निष्कर्ष

फॉर्म्स HTML की एक महत्वपूर्ण विशेषता हैं जो आपको यूजर डेटा एकत्र करने और प्रोसेस करने की अनुमति देती हैं।

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