फॉर्म-संबंधित टैग

यह लेख फॉर्म-संबंधित टैग की व्याख्या करता है।

यह टेक्स्ट इनपुट्स और ड्रॉपडाउन मेनू जैसे विभिन्न फॉर्म फील्ड्स को समझाता है।

YouTube Video

फॉर्म-संबंधित टैग

<form> टैग

1<form action="/submit" method="post">...</form>

• टैग का उपयोग पूरे फॉर्म को परिभाषित करने के लिए किया जाता है।
• action एट्रिब्यूट गंतव्य को निर्दिष्ट करता है, और method एट्रिब्यूट विधि (GET या POST) को निर्दिष्ट करता है।
• आप <a> टैग की तरह ही target गुण को भी निर्दिष्ट कर सकते हैं।

<input> टैग (पाठ इनपुट फ़ील्ड)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> एक सिंगल लाइन टेक्स्ट इनपुट फील्ड बनाता है। उपयोगकर्ता कोई भी टेक्स्ट दर्ज कर सकते हैं।

• प्लेसहोल्डर गुणात्मकता वह वर्णनात्मक पाठ निर्दिष्ट करती है जो इनपुट फ़ील्ड खाली होने पर दिखाई देता है। यह उपयोगकर्ताओं को अपेक्षित इनपुट को आसानी से समझने में मदद करता है। इनपुट शुरू होते ही यह पाठ अपने आप गायब हो जाता है।

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

<input> टैग (पासवर्ड इनपुट फ़ील्ड)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> एक पासवर्ड इनपुट के लिए फील्ड बनाता है। दर्ज किए गए अक्षर छिपे और मास्क किए जाते हैं ताकि सुरक्षा सुनिश्चित हो सके।

<input> टैग (ईमेल पता इनपुट फ़ील्ड)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> ईमेल पता दर्ज करने के लिए एक फील्ड बनाता है और सही ईमेल प्रारूप सुनिश्चित करने के लिए सत्यापन शामिल करता है।

<input> टैग (चेकबॉक्स)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> एक चेकबॉक्स बनाता है। जब कई विकल्प उपलब्ध होते हैं, तो उपयोगकर्ता एक से अधिक आइटम चुन सकते हैं।

<input> टैग (रेडियो बटन)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> एक रेडियो बटन बनाता है जो उपयोगकर्ताओं को केवल एक विकल्प चुनने की अनुमति देता है।

<input> टैग (सबमिट बटन)

1<input type="submit" value="Submit">

• <input type="submit"> डेटा को सबमिट करने के लिए बटन बनाता है।
• value एट्रिब्यूट का मान सबमिट होने पर फॉर्म डेटा में शामिल किया जाता है।

<input> टैग (रीसेट बटन)

1<input type="reset" value="Reset">

• <input type="reset"> एक बटन बनाता है जो फ़ॉर्म में सभी इनपुट मानों को रीसेट कर देता है।

<input> टैग (छिपा हुआ फ़ील्ड)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> एक छिपे हुए फील्ड बनाता है जो स्क्रीन पर प्रदर्शित नहीं होता और फॉर्म सबमिट होने पर बैकएंड को डेटा भेजने के लिए उपयोग होता है।

<input> टैग (रंग चयनकर्ता)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> एक रंग पिकर दिखाता है और उपयोगकर्ताओं को रंग चुनने के लिए एक इनपुट फील्ड बनाता है।

<input> टैग (तिथि इनपुट फ़ील्ड)

1<input type="date" name="birthday">

• <input type="date"> एक दिनांक इनपुट फील्ड बनाता है जो एक दिनांक चुनने के लिए कैलेंडर प्रदर्शित करता है।

<input> टैग (समय इनपुट फ़ील्ड)

1<input type="time" name="appointment_time">

• <input type="time"> समय दर्ज करने के लिए फील्ड बनाता है और एक समय पिकर प्रदर्शित होता है।

<input> टैग (फाइल इनपुट फ़ील्ड)

1<input type="file" name="resume">

• <input type="file"> उपयोगकर्ताओं को फाइलें चुनने और अपलोड करने के लिए एक इनपुट फील्ड बनाता है।
• form टैग का enctype गुण multipart/form-data पर सेट होना चाहिए।

<input> टैग (संख्या)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> एक संख्या इनपुट फ़ील्ड बनाता है जो न्यूनतम मान, अधिकतम मान और चरण (वृद्धि/कमी मात्रा) निर्धारित करने की अनुमति देता है।

<input> टैग (संख्याओं के लिए श्रेणी चयन फ़ील्ड)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> एक इनपुट फ़ील्ड बनाता है जहां उपयोगकर्ता स्लाइडर का उपयोग करके एक सीमा के भीतर एक मूल्य चुन सकते हैं।

<textarea> टैग

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• <textarea> टैग एक बहु-रेखीय टेक्स्ट इनपुट फ़ील्ड बनाता है। यह लंबे टेक्स्ट या टिप्पणियां दर्ज करने के लिए उपयुक्त है।

<select> टैग

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• <select> टैग एक ड्रॉपडाउन मेनू बनाता है, और विकल्प <option> टैग के साथ परिभाषित किए जाते हैं। उपयोगकर्ता एक या एकाधिक आइटम चुन सकते हैं।

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• एक से अधिक चयन को सक्षम करने के लिए, multiple विशेषता जोड़ें। इस विशेषता को निर्दिष्ट करने से विकल्पों को सूची बॉक्स के रूप में प्रदर्शित किया जाता है।

<optgroup> टैग

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• <optgroup> टैग का उपयोग संबंधित वस्तुओं को एक साथ समूहित करने के लिए किया जाता है। label विशेषता आपको एक समूह नाम सेट करने की अनुमति देती है, जिससे उपयोगकर्ताओं को स्पष्ट विकल्प मिलते हैं, भले ही सूची लंबी हो।

<label> टैग

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• <label> टैग इनपुट फ़ील्ड, चेकबॉक्स और रेडियो बटन के लिए लेबल परिभाषित करता है, जिससे उपयोगिता और पहुँच में सुधार होता है।
• उदाहरण के लिए, किसी लेबल पर क्लिक करने से एक इनपुट फ़ील्ड पर ध्यान केंद्रित किया जा सकता है या चेकबॉक्स को ऑन या ऑफ किया जा सकता है।

<fieldset> टैग

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• <fieldset> टैग संबंधित फ़ॉर्म नियंत्रणों को समूहित करता है, और <legend> टैग समूह के लिए एक शीर्षक प्रदान करता है।

<button> टैग

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• <button> टैग एक क्लिक करने योग्य बटन परिभाषित करता है जो फ़ॉर्म सबमिशन या अन्य क्रियाओं को ट्रिगर करता है।

  जब type="button" निर्दिष्ट होता है, तो यह एक सामान्य बटन के रूप में कार्य करता है। इसे क्लिक करने से फ़ॉर्म सबमिट नहीं होता है या कोई अन्य डिफ़ॉल्ट कार्य नहीं होता है। जब आप जावास्क्रिप्ट के साथ कस्टम क्रियाओं को सेट करना चाहते हैं, तो इसका उपयोग किया जाता है।

  जब type="submit" निर्दिष्ट होता है, तो यह फ़ॉर्म के लिए एक सबमिट बटन के रूप में कार्य करता है। जब इस बटन को क्लिक किया जाता है, तो इसे समाहित करने वाला फ़ॉर्म सबमिट हो जाएगा।

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

  यदि type विशेषता निर्दिष्ट नहीं है, तो कुछ ब्राउज़र इसे type="submit" के रूप में मान सकते हैं, इसलिए आशयित व्यवहार सुनिश्चित करने के लिए type को स्पष्ट रूप से निर्दिष्ट करने की सिफारिश की जाती है।

• टैग के उद्घाटन और समापन टैग के बीच अन्य HTML सामग्री शामिल की जा सकती है, जिससे आइकन या जटिल टेक्स्ट वाले बटन बनाना संभव हो जाता है।

• टैग का उपयोग करके एक सबमिट बटन के लिए, value एट्रिब्यूट का मूल्य फॉर्म डेटा में शामिल होता है, लेकिन टैग के साथ, यह डिफ़ॉल्ट रूप से नहीं भेजा जाता है।

  टैग के लिए name और value एट्रिब्यूट निर्दिष्ट करके, इसका मूल्य फॉर्म डेटा के रूप में भेजा जा सकता है।

<datalist> टैग

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• <datalist> टैग <input> तत्व के लिए चयन करने योग्य विकल्पों की सूची प्रदान करता है। उपयोगकर्ता सूची में से चयन कर सकते हैं या अपनी खुद की मान दर्ज कर सकते हैं।

<output> टैग

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• <output> टैग गणनाओं या उपयोगकर्ता इंटरैक्शन के परिणाम दिखाता है। यह रूपों या स्क्रिप्ट्स के भीतर गणना परिणामों को गतिशील रूप से दिखाने के लिए उपयोग होता है।
• for गुण के लिए, उन फॉर्म तत्वों के IDs को निर्दिष्ट करें जिन्हें आप जोड़ना चाहते हैं, स्पेस से अलग करें।

<progress> टैग

1<progress value="70" max="100">70%</progress>

• <progress> टैग उपयोगकर्ताओं को कार्य की प्रगति दिखाता है। उदाहरण के लिए, यह किसी फ़ाइल डाउनलोड या स्थापना की प्रगति को दृश्य रूप में संकेत कर सकता है।

<meter> टैग

1<meter value="0.6">60%</meter>

• <meter> टैग एक ज्ञात सीमा के भीतर एक संख्यात्मक माप का प्रतिनिधित्व करता है। यह डिस्क उपयोग या ईंधन गेज जैसी माप को एक विशिष्ट सीमा के भीतर दिखाने के लिए उपयोग होता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video