एचटीएमएल फॉर्म एलिमेंट्स
यह अध्याय सभी विभिन्न HTML फॉर्म तत्वों का वर्णन करता है।
HTML <form> Elements
HTML <form>तत्व में निम्न में से एक या अधिक प्रपत्र तत्व हो सकते हैं:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
<इनपुट> तत्व
सबसे अधिक उपयोग किए जाने वाले फॉर्म तत्व में से एक <input>तत्व है।
विशेषता के <input>आधार पर तत्व को कई तरीकों से प्रदर्शित किया जा सकता है ।type
उदाहरण
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
विशेषता के सभी अलग-अलग मान type
अगले अध्याय में शामिल हैं:
HTML इनपुट प्रकार ।
<लेबल> तत्व
<label>तत्व कई प्रपत्र तत्वों के लिए एक लेबल को परिभाषित करता है ।
तत्व स्क्रीन-रीडर उपयोगकर्ताओं के <label>लिए उपयोगी है, क्योंकि जब उपयोगकर्ता इनपुट तत्व पर ध्यान केंद्रित करता है तो स्क्रीन-रीडर लेबल को जोर से पढ़ेगा।
तत्व उन उपयोगकर्ताओं की <label>भी मदद करता है जिन्हें बहुत छोटे क्षेत्रों (जैसे रेडियो बटन या चेकबॉक्स) पर क्लिक करने में कठिनाई होती है - क्योंकि जब उपयोगकर्ता <label>तत्व के भीतर टेक्स्ट पर क्लिक करता है, तो यह रेडियो बटन/चेकबॉक्स को टॉगल करता है।
टैग की forविशेषता
उन्हें एक साथ बाँधने के लिए तत्व की विशेषता के <label>बराबर होनी चाहिए ।id<input>
<चयन> तत्व
<select>तत्व एक ड्रॉप-डाउन सूची को परिभाषित करता है :
उदाहरण
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option>तत्व एक विकल्प को परिभाषित करता है जिसे चुना जा सकता है ।
डिफ़ॉल्ट रूप से, ड्रॉप-डाउन सूची में पहला आइटम चुना जाता है।
पूर्व-चयनित विकल्प को परिभाषित करने selectedके लिए, विकल्प में विशेषता जोड़ें:
उदाहरण
<option value="fiat" selected>Fiat</option>
दृश्यमान मान:
sizeदृश्यमान मानों की संख्या निर्दिष्ट करने के लिए विशेषता का उपयोग करें :
उदाहरण
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
एकाधिक चयन की अनुमति दें:
multipleउपयोगकर्ता को एक से अधिक मान चुनने की अनुमति देने के लिए विशेषता का उपयोग करें :
उदाहरण
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> तत्व
<textarea>तत्व एक बहु-पंक्ति इनपुट फ़ील्ड (एक पाठ क्षेत्र) को परिभाषित करता है :
उदाहरण
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
rowsविशेषता टेक्स्ट क्षेत्र में दिखाई देने वाली पंक्तियों की संख्या निर्दिष्ट करती है ।
colsविशेषता टेक्स्ट क्षेत्र की दृश्यमान चौड़ाई निर्दिष्ट करती है ।
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
आप CSS का उपयोग करके टेक्स्ट क्षेत्र के आकार को भी परिभाषित कर सकते हैं:
उदाहरण
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
<बटन> तत्व
<button>तत्व एक क्लिक करने योग्य बटन को परिभाषित करता है :
उदाहरण
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
नोट:type बटन तत्व के लिए हमेशा विशेषता निर्दिष्ट करें। विभिन्न ब्राउज़र बटन तत्व के लिए विभिन्न डिफ़ॉल्ट प्रकारों का उपयोग कर सकते हैं।
<फ़ील्डसेट> और <किंवदंती> तत्व
<fieldset>तत्व का उपयोग संबंधित डेटा को एक रूप में समूहित करने के लिए किया जाता है ।
तत्व तत्व के <legend>लिए एक कैप्शन को परिभाषित करता है
<fieldset>
।
उदाहरण
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<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">
</fieldset>
</form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
<डेटालिस्ट> तत्व
तत्व किसी तत्व <datalist>के लिए पूर्व-निर्धारित विकल्पों की सूची निर्दिष्ट करता <input>है।
उपयोगकर्ता डेटा इनपुट करते ही पूर्व-निर्धारित विकल्पों की एक ड्रॉप-डाउन सूची देखेंगे।
तत्व की listविशेषता, तत्व की विशेषता <input>को संदर्भित करना चाहिए
।id<datalist>
उदाहरण
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<आउटपुट> तत्व
तत्व एक गणना के परिणाम का <output>प्रतिनिधित्व करता है (जैसे एक स्क्रिप्ट द्वारा किया गया)।
उदाहरण
एक गणना करें और परिणाम को एक <output>तत्व में दिखाएं:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
एचटीएमएल व्यायाम
एचटीएमएल फॉर्म एलिमेंट्स
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।