Form elements: form, input, textarea, button, select, label html in Hindi
मल्टीप्ल फॉर्म इनपुट कंट्रोल्स एचटीएमएल5 वेब डेवलपर को कई प्रकर के डिफरेंट फ़ॉर्म कण्ट्रोल एलिमेंट प्रोवाइड करता है, जो एचटीएमएल वेब डेवलपर को इंटरनेट यूजर के लिए मल्टीप्ल फॉर्म कण्ट्रोल इनपुट कण्ट्रोल चॉइस बनाने में सहायता प्रदान करते हैं. यहाँ बेसिक फॉर्म इनपुट एलिमेंट कण्ट्रोल में आप <form> स्टार्ट टैग, <input> मल्टीप्ल इनपुट टाइप सलेक्शन, <textarea> यूजर टेक्स्ट एरिया, <button> मल्टीप्ल बटन क्रिएशन चॉइस, <select> मल्टीप्ल आइटम में सिंगल आइटम सिलेक्शन चॉइस इनपुट कण्ट्रोल और फॉर्म में उपयोग होने वाले हर इनपुट कण्ट्रोल के लिए <label> प्रदान करना आदि फॉर्म इनपुट कण्ट्रोल हैं. एचटीएमएल वेब पेज में हर डिज़ाइन फॉर्म इनपुट कण्ट्रोल में यूनिक फीचर्स और ऐट्रिब्यूट्स होते हैं, इन फॉर्म कंट्रोल्स और ऐट्रिब्यूट्स का उपयोग कर डिजायर एचटीएमएल वेब पेज में डिज़ाइन किया जा सकते है.
So, let’s analyze the multiple form input controls in HTML5 web page.
HTML5 <form> tag.
एचटीएमएल5 वेब पेज में <form> टैग एक फॉर्म क्रिएशन फ़ॉर्म डिज़ाइन इनपुट कण्ट्रोल प्रदान कर मल्टीप्ल फॉर्म एलिमेंट चॉइस प्रदान करता है. फॉर्म एक ऑनलाइन वेब साइट के माध्यम से डाटा कलेक्शन टूल या रिसोर्सेज है, जो वेब डेवलपर द्वारा डिज़ाइन फॉर्म में मांगी गई डिजिटल इनफार्मेशन को डेडिकेटेड वेब सर्वर में स्टोर करता है.
Form Attributes.
- Form action – यहाँ यह फॉर्म में कलेक्ट डिजिटल इनफार्मेशन को डेडिकेटेड वेब सर्वर यूआरएल लोकेशन में सबमिट करता है.
- <form action=”submit.php” method=”post”>
- Form method – यह फॉर्म में ऑनलाइन यूजर फॉर्म को सबमिट होने वाले लोकेशन को http प्रोटोकॉल लोकशन मेथड को इंडीकेट करता है.
- Form GET method – फॉर्म गेट मेथड यूजर क्वेरी इनफार्मेशन डाटा को डेडिकेटेड वेब यूआरएल एड्रेस लोकेशन में ऐड या स्टोर करता है.
- Form POST method – फॉर्म पोस्ट मेथड क्लाइंट रिक्वेस्ट आर्डर में डाटा को डेडिक्टेड वेब सर्वर को सेंड या अपलोड करता है.
- <form action=”submit.php” method=”post”>
- Form enctype – यह इंडीकेट करता है की यूजर फील डाटा को कैसे रीड या एनकोड किया जायेगा।
- application/x-www-form-urlencoded (डिफ़ॉल्ट) – यूजर फील फ़ॉर्म डेटा को के वैल्यू आर्डर में रीड करने के लिए एनकोड करता है।
- multipart/form-data – यहाँ आप फॉर्म में फाइल डाटा को डिजायर सर्वर लोकशन में अपलोड किया जाता है।
- form text/plain – यह यूजर इनपुट फ़ॉर्म डिजिटल डेटा इनफार्मेशन को प्लैन टेक्स्ट के रूप में एनकोड करता है।
- <form action=”submit.php” method=”post” enctype=”multipart/form-data”>
Example of a form in an HTML5 web page.
<form action=”/submit” method=”post”>
<! — Write desire form control here –>
</form>
HTML5 <input> tag.
एचटीएमएल5 वेब पेज में फॉर्म <input> टैग का उपयोग मल्टीप्ल टाइप के फ़ॉर्म इनपुट कण्ट्रोल को इनपुट या ऐड कर डिस्प्ले करने में किया जाता है, जैसे, इंटरनेट यूजर के लिए टेक्स्ट इनपुट फ़ील्ड टाइप, यूजर चेकबॉक्स सलेक्शन, मल्टीप्ल रेडियो बटन सिलेक्शन चॉइस, और कई अन्य प्रकार के अन्य फॉर्म यूजर इनपुट कण्ट्रोल चॉइस अवेलबल है।
HTML5 Input Attributes.
- Form input type – यहाँ आप फॉर्म में इनपुट फॉर्म कण्ट्रोल के डिफ़ॉल्ट टाइप को डिफाइन करते हैं.
- Input text type – फॉर्म में एक सिंगल-लाइन टेक्स्ट बेस्ड इनपुट फॉर्म फ़ील्ड को क्रिएट करता है।
- Input password type – मौजूदा फॉर्म एक पासवर्ड फील्ड को इनपुट के रूप इनपुट कर यूजर से इनपुट पासवर्ड टेक्स्ट को यूनिक फॉर्मेट में इनपुट करता है।
- Input email type – एचटीएमएल5 वेब पेज में ईमेल एड्रेस होल्डर इनपुट फॉर्म कण्ट्रोल को क्रिएट करता है।
- Input checkbox type – एचटीएमएल5 वेब पेज में एक चेकबॉक्स इनपुट फॉर्म कण्ट्रोल को क्रिएट करता है।
- Input radio type – एचटीएमएल5 वेब पेज में एक रेडियो बटन फॉर्म कण्ट्रोल को क्रिएट करता है।
- Input submit button – एचटीएमएल5 वेब पेज में एक सबमिट फॉर्म बटन को क्रिएट करता है।
- Input file dialog – मौजूदा एचटीएमएल5 वेब पेज में यूजर फाइल सिलेक्शन डायलॉग प्रोवाइड करता है।
- <input type=”text” name=”Visitorname” placeholder=”Put Your Name”>
- Input name – फ़ॉर्म कण्ट्रोल नाम को डिफाइन करता है, इसे फॉर्म सबमिट के समय उपयोग किया जाता है।
- Input value – यूजर फील फॉर्म इनपुट फ़ील्ड वैल्यू को डिफाइन करते है।
- Input placeholder – मौजूदा एचटीएमएल5 वेब पेज में इनपुट फ़ील्ड के साथ एक डिस्क्रिप्शन प्रोवाइड करता है।
- <input type=”text” name=”Visitorname” placeholder=”Put Your Name”>
Form input control example in HTML5.
<input type=”text” name=”Visitorname” placeholder=”Put Your Name”>
<input type=”submit” value=”Submit”>
HTML5 <textarea> tag.
एचटीएमएल5 वेब पेज में <textarea> टैग इंटरनेट यूजर से सिंगल लाइन से मल्टीलाइन टेक्स्ट वैल्यू इनपुट को एंटर या इनपुट के रूप में उपयोग करते है, इसे ऑनलाइन फॉर्म में यूजर डिटेल मैसेज डिस्क्रिप्शन, यूजर फीडबैक, या यूजर कमेंट के रूप में उपयोग किया जा सकता है।
HTML5 <textarea> tag attributes.
- TextArea rows attributes – मौजूदा एचटीएमएल5 फॉर्म में विज़िबल फॉर्म रौस नंबर को इंडीकेट करता हैं।
- TextArea columns attributes – मौजूदा एचटीएमएल5 फॉर्म में विज़िबल फॉर्म टेक्स्ट एरिया की करैक्टर विड्थ लिमिट को इंडीकेट करता है।
- TextArea placeholder attributes – मौजूदा एचटीएमएल5 फॉर्म में विज़िबल टेक्स्ट एरिया फॉर्म इनपुट कण्ट्रोल के साथ एक कण्ट्रोल डिस्क्रिप्शन के रूप में ऐड किया जाता है।
Example of <textarea> tag in HTML5.
<textarea name=”Description” rows=”7″ cols=”70″ placeholder=”Put Description Your Here “></textarea>
HTML5 <button> tag.
एचटीएमएल5 वेब पेज में <button> टैग एलिमेंट का उपयोग मौजूदा फॉर्म में यूजर फील डिजिटल इनफार्मेशन को डेडिकेटेड वेब सर्वर लोकेशन पर सेंड या अपलोड करने, किसी यूजर एक्शन को परफॉर्म करने में, जैसे ओके बटन, कैंसिल बटन, सबमिट बटन, या रिसेट बटन, आदि है, एचटीएमएल5 फॉर्म में बटन क्रिएट करने पर ये आपको एक क्लिक करने योग्य फॉर्म बटन क्रिएट कर देता है, इस फॉर्म बटन को एक्टिव करने के लिए आपको जावास्क्रिप्ट प्रोग्रामिंग फ़ंक्शन कोड को ट्रिगर करना होगा।
HTML5 <button> tag attributes.
- Button type – एचटीएमएल5 वेब पेज में मौजूदा फॉर्म बटन के बिहैवियर को इंडीकेट करते है।
- Submit button – एचटीएमएल5 वेब पेज में फ़ॉर्म में इनपुट यूजर डाटा को ऑनलाइन डेडिकेटेड वेब सर्वर स्टोरेज लोकेशन पर सबमिट करता है।
- Reset button – मौजूदा एचटीएमएल5 वेब पेज में फ़ॉर्म फ़ील्ड को उनके डिफ़ॉल्ट वैल्यूज पर रीसेट करता है, और यूजर फील वैल्यू को डिस्कार्ड कर देता है।
- Button – मौजूदा एचटीएमएल5 वेब पेज में बटन एक ऑर्डिनरी फॉर्म एक्शन बटन कण्ट्रोल है, जिसे जावास्क्रिप्ट प्रोग्रामिंग का उपयोग कर ट्रिगर किया जाता है।
- Button name – एचटीएमएल5 वेब पेज में उपयोग बटन फॉर्म कण्ट्रोल का नाम डिफाइन करता है।
- Button value – एचटीएमएल5 वेब पेज में मौजूदा बटन वैल्यूज को इंडीकेट करता है।
HTML5 <button> tag example.
<button type=”submit”>Submit</button>
<button type=”button” onclick=”alert (‘Button clicked!’)”>Let Click</button>
HTML5 <select> tag.
एचटीएमएल5 वेब पेज में <select> इनपुट टैग वेब पेज फॉर्म में यूजर मल्टीप्ल ड्रापडाउन आइटम लिस्ट आइटम सिलेक्शन क्रिएट और सलेक्शन में उपयोग किया जाता है, जिसे एचटीएमएल5 फॉर्म यूजर मैन्युअल सलेक्ट और अप्लाई कर सकता है।
HTML5 <select> tag attributes.
- Select tag name attributes – मौजूदा फॉर्म में सिलेक्शन कण्ट्रोल नाम को डिफाइन करता है।
- select size attributes – मौजूदा फॉर्म में विज़िबल सलेक्ट ड्रापडाउन लिस्ट आइटम विज़िबल ऑप्शन नंबर्स को डिफाइन करता है। इसे जरूर डिफाइन करे, फिर ये आपको ड्रापडाउन लिस्ट सिलेक्शन प्रोवाइड करेगा।
- select multiple attributes – मौजूदा फॉर्म सलेक्ट लिस्ट आइटम में इंटरनेट यूजर को कई ऑप्शन सिलेक्शन फीचर्स प्रोवाइड करता है।
Example of HTML5 <select> tag.
<select name=”language” size=”6″>
<option value=”html”>Html</option>
<option value=”css”>Css</option>
<option value=”javascript”>Javascript</option>
<option value=”python”>Python</option>
<option value=”ruby”>Ruby</option>
<option value=”kotlin”>Kotlin</option>
</select>
HTML5 <label> tag.
एचटीएमएल5 वेब पेज में फॉर्म <label> टैग एलिमेंट का उपयोग फ़ॉर्म में उपयोग होने वाले मल्टीप्ल फॉर्म इनपुट और अन्य फॉर्म कण्ट्रोल को एक टेक्स्ट लेबल या नाम प्रदान करने में होता है, जिससे फॉर्म में प्लेस्ड फॉर्म कण्ट्रोल सुलभ और बेहतर रूप से समझे और उपयोग किये जाते है।
HTML5 <label> tag attributes.
- Label for attributes – फॉर्म में उपयोग लबले id ऐट्रिब्यूट्स को ऐड कर फॉर्म को पार्टिकल लेबल कण्ट्रोल से रीलेट करता है। फॉर्म में लबले फॉर ऐट्रिब्यूट्स फॉर्म को एक्सेक्यूटेशन में यूनिक आर्डर में प्रोसेस करता है।
Example of HTML5 <label> tag.
<label for=”visitorname”>
Enter name – </label><input type=”text” id=”visitorname” name=”visitorname”>
