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

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

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

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

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

एचटीएमएल फॉर्म

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

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

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

उपयोगकर्ता द्वारा फ़ॉर्म सबमिट करने के बाद, फ़ॉर्म की सामग्री निम्न कर सकती है:

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

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

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

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

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

हमें एक ऐसा फ़ॉर्म बनाने का काम सौंपा गया है जो चार सूचनाओं को स्वीकार करता है। ये हैं:

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

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

एचटीएमएल <form> टैग

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

 // एलीमेंट

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

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

<input> HTML प्रपत्रों के लिए तत्व

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

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

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

<इनपुट प्रकार="प्रकार" id="elementId">

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

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

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

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

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

 <लेबल for="name">Name:
 

 <लेबल फॉर ="ईमेल">ईमेल: 
 <इनपुट प्रकार ="ईमेल" आईडी ="ईमेल" नाम ="ईमेल">  

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

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

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

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

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

एचटीएमएल <label> तत्व

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

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

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

 <लेबल for="name">Name:
 

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

HTML प्रपत्र तत्व

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

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

रेडियो बटन

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

रेडियो बटन का सिंटैक्स निम्न है:

<इनपुट प्रकार="रेडियो" नाम="radio_button">

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

 

क्या आप थ्री ब्रदर्स कॉफ़ी हाउस के ग्राहक हैं?
 <इनपुट प्रकार="रेडियो" id="yes" name="customer" value="yes"> <लेबल के लिए ="हां">हां
 <इनपुट प्रकार ="रेडियो" आईडी ="नहीं" नाम ="ग्राहक" मान ="नहीं"> <लेबल के लिए ="नहीं"> नहीं 

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

हमारा उपयोगकर्ता तब दो में से एक मान सबमिट कर सकता है:yes या no .

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

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

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

एचटीएमएल <textarea> तत्व

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

हम <textarea> . का उपयोग करके ऐसा कर सकते हैं तत्व, इस तरह:

 Message:
  आप थ्री ब्रदर्स कॉफ़ी हाउस को क्या संदेश देना चाहते हैं ? 

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

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

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

अंत में, हम संदेश जोड़ते हैं What message do you want to send to the Three Brothers Coffee House? हमारे उद्घाटन और समापन के बीच <textarea> टैग। यह डिफ़ॉल्ट संदेश है जिसे उपयोगकर्ता देखेगा।

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

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

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

एचटीएमएल submit बटन

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

 <इनपुट प्रकार ="सबमिट करें" मूल्य ="सबमिट करें">  

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

 मान लीजिए कि हम एक submit जोड़ना चाहते हैं कॉफी हाउस के लिए हमारे वेब फॉर्म का बटन। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 Name: 
  
 
 <लेबल के लिए ="ईमेल">ईमेल: 
 <इनपुट प्रकार ="ईमेल" आईडी ="ईमेल" नाम ="ईमेल"> 
 

क्या आप थ्री ब्रदर्स कॉफ़ी हाउस के ग्राहक हैं?
 <इनपुट प्रकार ="रेडियो" आईडी ="हाँ" नाम ="ग्राहक" मूल्य ="हाँ"> <लेबल के लिए ="हाँ"> हाँ

 लेबल> 
  No 

 Message:
  आप थ्री ब्रदर्स कॉफ़ी हाउस को क्या संदेश देना चाहते हैं?  
 

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

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

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

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

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

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

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

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

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

 /post.php?name=Pauline 
 

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

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

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