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

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

हालाँकि, एक चीज जो इन सभी सरल से जटिल रूपों में समान है, वह है HTML और विशेष रूप से HTML <form> टैग।

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

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

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

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

 <!-– A form that will pass its data to a javascript document called process.js-->
<form action="process.js">
<!--close form tag-->
</form>

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

<लेबल> टैग का उपयोग करना

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

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

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

<लेबल> टैग उदाहरण का उपयोग करना

 <!—using the label tag-->
<label for="fname">First Name:</label>

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

<इनपुट> टैग का उपयोग करना

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

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

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

  • टेक्स्ट
  • संख्या
  • ईमेल
  • छवि
  • तारीख
  • चेक बॉक्स
  • रेडियो
  • कुंजिका

<इनपुट> टैग उदाहरण का उपयोग करना

 <!—using the label and input tags-->
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">

ऊपर दिए गए कोड में <इनपुट> टैग में तीन अलग-अलग विशेषताएं हैं, जिनमें से प्रत्येक का एक अनूठा कार्य है। प्रकार विशेषता को एक टेक्स्ट मान असाइन किया गया है जिसका अर्थ है कि टेक्स्ट बॉक्स केवल वर्णों को स्वीकार करेगा।

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

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

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

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

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

 <!-using the checkbox value-->
<label for="Languages">Programming Languages:</label>
<input type="checkbox" name="languages" id="languages" value="Java"> Java
<input type="checkbox" name="languages" id="languages" value="JavaScript"> JavaScript
<input type="checkbox" name="languages" id="languages" value="Python"> Python

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

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

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

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

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

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

 <!-using the select tag-->
<label for="sex">Sex:</label>
<select name= "sex" id="sex">
<option value="male" selected>Male</option>
<option value="fmale">Female</option>
<option value="other">Other</option>
</select>
<!-using the radio element-->
<label for="positions">Positions Available:</label>
<input type="radio" name="positions" id="positions"
value="Junior Developer"> Junior Developer
<input type="radio" name="positions" id="positions"
value="Mid-level Developer"> Mid-level Developer
<input type="radio" name="positions" id="positions"
value="Senior Developer"> Senior Developer

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

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

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

 <input type="date" name="dob" id="dob">

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

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

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

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

 <input type="email" name="email" id="email" placeholder= "Enter email address" >

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

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

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

 <input type="password" name="pword" id="pword">

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

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

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

 <button class="btn" type="submit">Submit</button>

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

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

 <button class="btn" type="reset">Reset</button>

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

HTML में एक साधारण फ़ॉर्म बनाने के लिए आपको ऊपर बताए गए सभी तत्वों को <form> टैग में संलग्न करना होगा

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

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<div id="container">
<h1>Application Form</h1>
<br>
<form action="process.js">
<div>
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">
<label for="lname" >Last Name:</label>
<input type="text" name="lname" id="lname">
</div> <br>
<div>
<label for="dob">Date of birth:</label>
<input type="date" name="dob" id="dob">
<label for="age">Age:</label>
<input type="number" name="age" id="age">
</div> <br>
<div>
<label for="gender">Gender:</label>
<select name= "gender" id="gender">
<option value="male" selected>Male</option>
<option value="fmale">Female</option>
<option value="other">Other</option>
</select>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" placeholder= "Enter email address" >
</div> <br>
<div>
<label for="positions">Positions Available:</label>
<input type="radio" name="positions" id="positions"
value="Junior Developer"> Junior Developer
<input type="radio" name="positions" id="positions"
value="Mid-level Developer"> Mid-level Developer
<input type="radio" name="positions" id="positions"
value="Senior Developer"> Senior Developer
</div> <br>
<div>
<label for="Languages">Programming Languages:</label>
<input type="checkbox" name="languages" id="languages" value="Java"> Java
<input type="checkbox" name="languages" id="languages" value="JavaScript"> JavaScript
<input type="checkbox" name="languages" id="languages" value="Python"> Python
</div> <br>
<div>
<label for="pword">Password:</label>
<input type="password" name="pword" id="pword">
<label for="cpword">Confirm Password:</label>
<input type="password" name="cpword" id="cpword">
</div> <br>
<button class="btn" type="submit">Submit</button>
<button class="btn" type="reset">Reset</button>
</form>
</div>
</body>
</html>

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

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

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

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