एचटीएमएल फॉर्म
उपयोगकर्ता इनपुट एकत्र करने के लिए एक HTML फॉर्म का उपयोग किया जाता है। उपयोगकर्ता इनपुट को अक्सर प्रसंस्करण के लिए सर्वर पर भेजा जाता है।
उदाहरण
<रूप> तत्व
उपयोगकर्ता इनपुट के लिए HTML फॉर्म बनाने के लिए HTML <form>तत्व का उपयोग किया जाता है:
<form>
.
form elements
.
</form>
तत्व विभिन्न प्रकार के इनपुट तत्वों के <form>लिए एक कंटेनर है, जैसे: टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन, सबमिट बटन इत्यादि।
इस अध्याय में सभी विभिन्न रूप तत्वों को शामिल किया गया है: HTML प्रपत्र तत्व ।
<इनपुट> तत्व
HTML <input>एलिमेंट सबसे ज्यादा इस्तेमाल किया जाने वाला फॉर्म एलिमेंट है।
विशेषता के आधार पर एक <input>तत्व को कई तरह से प्रदर्शित किया जा सकता है ।type
यहां कुछ उदाहरण दिए गए हैं:
| प्रकार | विवरण |
|---|---|
| <इनपुट प्रकार = "पाठ"> | एकल-पंक्ति पाठ इनपुट फ़ील्ड प्रदर्शित करता है |
| <इनपुट प्रकार = "रेडियो"> | एक रेडियो बटन प्रदर्शित करता है (कई विकल्पों में से किसी एक को चुनने के लिए) |
| <इनपुट प्रकार = "चेकबॉक्स"> | एक चेकबॉक्स प्रदर्शित करता है (शून्य या कई विकल्पों में से अधिक का चयन करने के लिए) |
| <इनपुट प्रकार = "सबमिट करें"> | सबमिट बटन प्रदर्शित करता है (फॉर्म जमा करने के लिए) |
| <इनपुट प्रकार = "बटन"> | एक क्लिक करने योग्य बटन प्रदर्शित करता है |
इस अध्याय में सभी विभिन्न इनपुट प्रकारों को शामिल किया गया है: HTML इनपुट प्रकार ।
टेक्स्ट फ़ील्ड
टेक्स्ट इनपुट के <input type="text">लिए सिंगल-लाइन इनपुट फ़ील्ड को परिभाषित करता है।
उदाहरण
टेक्स्ट के लिए इनपुट फ़ील्ड वाला एक फॉर्म:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
नोट: प्रपत्र स्वयं दिखाई नहीं दे रहा है। यह भी ध्यान दें कि इनपुट फ़ील्ड की डिफ़ॉल्ट चौड़ाई 20 वर्ण है।
<लेबल> तत्व
<label>उपरोक्त उदाहरण में तत्व के उपयोग पर ध्यान दें ।
<label>टैग कई प्रपत्र तत्वों के लिए एक लेबल को परिभाषित करता है ।
तत्व स्क्रीन-रीडर उपयोगकर्ताओं के <label>लिए उपयोगी है, क्योंकि जब उपयोगकर्ता इनपुट तत्व पर ध्यान केंद्रित करता है तो स्क्रीन-रीडर लेबल को जोर से पढ़ेगा।
तत्व उन उपयोगकर्ताओं की <label>भी मदद करता है जिन्हें बहुत छोटे क्षेत्रों (जैसे रेडियो बटन या चेकबॉक्स) पर क्लिक करने में कठिनाई होती है - क्योंकि जब उपयोगकर्ता <label>तत्व के भीतर टेक्स्ट पर क्लिक करता है, तो यह रेडियो बटन/चेकबॉक्स को टॉगल करता है।
टैग की forविशेषता
उन्हें एक साथ बाँधने के लिए तत्व की विशेषता के <label>बराबर होनी चाहिए ।id<input>
रेडियो के बटन
<input type="radio">एक रेडियो बटन को परिभाषित करता है ।
रेडियो बटन उपयोगकर्ता को सीमित संख्या में विकल्पों में से एक का चयन करने देते हैं।
उदाहरण
रेडियो बटन के साथ एक फॉर्म:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
अपनी पसंदीदा वेब भाषा चुनें:
चेक बॉक्स
चेकबॉक्स को <input type="checkbox">परिभाषित करता है ।
चेकबॉक्स उपयोगकर्ता को सीमित संख्या में विकल्पों में से शून्य या अधिक विकल्प चुनने देता है।
उदाहरण
चेकबॉक्स के साथ एक फॉर्म:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
सबमिट बटन
<input type="submit">प्रपत्र डेटा को प्रपत्र-हैंडलर को सबमिट करने के लिए एक बटन को परिभाषित करता है ।
फॉर्म-हैंडलर आमतौर पर सर्वर पर एक फाइल होती है जिसमें इनपुट डेटा को प्रोसेस करने के लिए एक स्क्रिप्ट होती है।
फॉर्म-हैंडलर फॉर्म की action
विशेषता में निर्दिष्ट है।
उदाहरण
सबमिट बटन वाला एक फॉर्म:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
<इनपुट> . के लिए नाम विशेषता
ध्यान दें कि प्रत्येक इनपुट फ़ील्ड nameमें सबमिट करने के लिए एक विशेषता होनी चाहिए।
यदि nameविशेषता को छोड़ दिया जाता है, तो इनपुट फ़ील्ड का मान बिल्कुल भी नहीं भेजा जाएगा।
उदाहरण
यह उदाहरण "प्रथम नाम" इनपुट फ़ील्ड का मान सबमिट नहीं करेगा:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>