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

एचटीएमएल 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 की(किंवा Mac वर कमांड की) दाबून ठेवून एकाच वेळी अनेक पर्याय निवडण्याची परवानगी देते.

मजकूर

<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