HTML फॉर्म्स डिज़ाइन

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

1. <input> टैग - टेक्स्ट इनपुट

<input> टैग का उपयोग किसी भी प्रकार के यूज़र इनपुट लेने के लिए किया जाता है, जैसे कि टेक्स्ट, पासवर्ड, ईमेल, आदि।

<input type="text" name="name" placeholder="अपना नाम दर्ज करें" required />

• type: input के प्रकार को निर्धारित करता है (text, password, email, etc.)
• name: फॉर्म के डेटा को पहचानने के लिए उपयोग किया जाता है
• placeholder: उपयोगकर्ता को इनपुट के लिए सुझाव प्रदान करता है
• required: यह फ़ील्ड अनिवार्य बनाता है

2. <input type="password"> - पासवर्ड इनपुट

पासवर्ड फील्ड के लिए <input type="password"> टैग का उपयोग किया जाता है। यह यूज़र द्वारा डाले गए डेटा को छुपा देता है।

<input type="password" name="password" placeholder="पासवर्ड दर्ज करें" required />

3. <input type="email"> - ईमेल इनपुट

<input type="email"> टैग का प्रयोग ईमेल एड्रेस प्राप्त करने के लिए किया जाता है। यह स्वचालित रूप से ईमेल की वैधता की जाँच करता है।

<input type="email" name="email" placeholder="अपना ईमेल दर्ज करें" required />

4. <textarea> - टेक्स्ट एरिया

<textarea>

<textarea name="message" placeholder="अपना संदेश लिखें" rows="4" cols="50" required></textarea>

5. <select> - ड्रॉपडाउन लिस्ट

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

<select name="country">
  <option value="india">भारत</option>
  <option value="usa">अमेरिका</option>
  <option value="uk">यूके</option>
</select>

6. <input type="radio"> - रेडियो बटन

रेडियो बटन का उपयोग एकाधिक विकल्पों में से केवल एक विकल्प को चुनने के लिए किया जाता है।

<input type="radio" name="gender" value="male"> पुरुष</input>
<input type="radio" name="gender" value="female"> महिला</input>

7. <input type="checkbox"> - चेकबॉक्स

<input type="checkbox"> टैग का उपयोग यूज़र से विकल्पों को चयनित करने के लिए किया जाता है।

<input type="checkbox" name="subscribe"> न्यूज़लेटर प्राप्त करें</input>

8. <button> - बटन

<button> टैग का उपयोग किसी कार्य को निष्पादित करने के लिए बटन बनाने के लिए किया जाता है।

<button type="submit">सबमिट करें</button>

9. <form> - फॉर्म का पूरा संरचना

फॉर्म बनाने के लिए <form> टैग का उपयोग किया जाता है। यह यूज़र द्वारा भरे गए सभी डेटा को सर्वर पर भेजने का काम करता है।

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="यूज़रनेम" required />
  <input type="password" name="password" placeholder="पासवर्ड" required />
  <button type="submit">सबमिट करें</button>
</form>

निष्कर्ष

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