close

HTML में परिचय Form: संरचना, इनपुट प्रकार और उदाहरण

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

इनपुट फ़ील्ड

  • <input type="text">: एक टेक्स्ट इनपुट फ़ील्ड बनाता है जहां उपयोगकर्ता अल्फ़ान्यूमेरिक वर्ण दर्ज कर सकते हैं।
  • <input type="password">: एक पासवर्ड इनपुट फ़ील्ड प्रदर्शित करता है जो दर्ज किए गए वर्णों को छुपाता है।
  • <input type="email">: उन इनपुट फ़ील्ड के लिए ईमेल सत्यापन प्रदान करता है जिनके लिए वैध ईमेल पते की आवश्यकता होती है।
  • <input type="number">: इनपुट को केवल संख्यात्मक मानों तक सीमित करता है।
  • <input type="checkbox">: एक चेकबॉक्स का प्रतिनिधित्व करता है जिसे उपयोगकर्ता चुन सकते हैं या अचयनित कर सकते हैं।
  • <input type="radio">: एक रेडियो बटन का प्रतिनिधित्व करता है जो उपयोगकर्ताओं को विकल्पों के समूह में से एक विकल्प चुनने की अनुमति देता है।
  • <input type="file">: उपयोगकर्ताओं को फ़ाइलें चुनने और अपलोड करने में सक्षम बनाता है।
  • <input type="submit">: एक बटन प्रदर्शित करता है जो form क्लिक करने पर सबमिट हो जाता है।
  • <input type="reset">: एक बटन प्रदर्शित करता है जो इसे form इसकी प्रारंभिक स्थिति में रीसेट करता है।
  • <input type="date">: तिथियों का चयन करने के लिए एक तिथि पिकर प्रदान करता है।
  • <input type="time">: उपयोगकर्ताओं को समय मान इनपुट करने की अनुमति देता है।

तत्वों का चयन करें

  • <select>: चयन योग्य विकल्पों के साथ एक ड्रॉपडाउन मेनू बनाता है।
  • <option> <select>: टैग के अंदर रखे गए ड्रॉपडाउन मेनू में एक विकल्प को परिभाषित करता है ।
  • <optgroup>: ड्रॉपडाउन मेनू में संबंधित विकल्पों को एक साथ समूहित करें।
  • <select multiple>: उपयोगकर्ताओं को क्लिक करते समय Ctrl कुंजी(या मैक पर कमांड कुंजी) दबाकर एक साथ कई विकल्प चुनने की अनुमति देता है।

पाठक्षेत्र

<textarea>: एक मल्टीलाइन टेक्स्ट इनपुट फ़ील्ड बनाता है जहां उपयोगकर्ता टेक्स्ट के लंबे ब्लॉक दर्ज कर सकते हैं और संपादित कर सकते हैं। rows इसका आकार बदला जा सकता है और cols इसके आयामों को परिभाषित करने जैसी विशेषताओं के साथ कॉन्फ़िगर किया जा सकता है ।

बटन

<button>: एक बटन का प्रतिनिधित्व करता है जो एक के भीतर विभिन्न क्रियाओं को ट्रिगर कर सकता है form । इसका उपयोग जावास्क्रिप्ट फ़ंक्शन के form अनुसार सबमिट करने या किसी भिन्न पृष्ठ पर नेविगेट करने के लिए किया जा सकता है । form

उदाहरण उपयोग:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

यह उदाहरण फ़ील्ड,, और एक बटन form सहित विभिन्न तत्वों के उपयोग को दर्शाता है । अपनी विशिष्ट आवश्यकताओं के आधार पर तत्वों और विशेषताओं को अनुकूलित करने के लिए स्वतंत्र महसूस करें । input textarea checkbox select dropdown submit form