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 कुञ्जी(वा म्याकमा कमाण्ड कुञ्जी) होल्ड गरेर एकै साथ धेरै विकल्पहरू चयन गर्न अनुमति दिन्छ।

Textareas

<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