Jassif Team Institution

HTML चरण तत्व

यह अध्याय सभी विभिन्न HTML चरण तत्वों का वर्णन करता है।

HTML <form> तत्व

HTML <form> तत्व में निम्नलिखित चरण तत्वों में से एक या अधिक शामिल हो सकते हैं:

<इनपुट> तत्व

सबसे अधिक उपयोग किए जाने वाले चरण तत्वों में से एक <इनपुट> तत्व है।

<इनपुट> तत्व को प्रकार विशेषता के आधार पर विभिन्न तरीकों से प्रदर्शित किया जा सकता है।

उदाहरण

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

<लेबल> तत्व

<लेबल> तत्व मल्टी-स्टेप तत्व के लिए एक लेबल को परिभाषित करता है।

<लेबल> तत्व स्क्रीन रीडर उपयोगकर्ताओं के लिए उपयोगी है क्योंकि जब उपयोगकर्ता इनपुट तत्व पर ध्यान केंद्रित करता है तो स्क्रीन रीडर लेबल को जोर से पढ़ता है।

<लेबल> तत्व उन उपयोगकर्ताओं की भी मदद करता है जिन्हें बहुत छोटे हिस्सों (जैसे रेडियो बटन या चेकबॉक्स) पर क्लिक करने में परेशानी होती है - क्योंकि जब उपयोगकर्ता <लेबल> तत्व के अंदर टेक्स्ट पर क्लिक करता है, तो यह रेडियो बटन/चेकबॉक्स को बदल देता है।

उदाहरण

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>

<चयन> तत्व

<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 value="fiat" selected>Fiat</option>

दृश्यमान मान:

दृश्य मानों की संख्या निर्दिष्ट करने के लिए आकार विशेषता का उपयोग करें:

<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>

एकाधिक चयन की अनुमति देने के लिए:

उपयोगकर्ता को एक से अधिक मान चुनने की अनुमति देने के लिए एकाधिक विशेषता का उपयोग करें:

<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>

पंक्तियाँ विशेषता पाठ फ़ील्ड में दृश्यमान पंक्तियों की संख्या निर्दिष्ट करती है।

कॉल्स विशेषता पाठ क्षेत्र की दृश्यमान चौड़ाई निर्दिष्ट करती है।

आप CSS का उपयोग करके टेक्स्ट अनुभाग का आकार भी परिभाषित कर सकते हैं:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

<बटन> तत्व

<बटन> तत्व एक क्लिक करने योग्य बटन को परिभाषित करता है:

उदाहरण

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<फ़ील्डसेट> और <लीजेंड> तत्व

<फ़ील्डसेट> तत्व का उपयोग किसी फ़ील्ड में संबंधित डेटा को समूहीकृत करने के लिए किया जाता है।

<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>

<डेटालिस्ट> तत्व

<डेटालिस्ट> तत्व एक <इनपुट> तत्व के लिए पूर्वनिर्धारित विकल्पों की एक सूची निर्दिष्ट करता है।

डेटा दर्ज करते समय उपयोगकर्ताओं को पूर्व-निर्धारित विकल्पों की एक डाउनलोड सूची दिखाई देगी।

<इनपुट> तत्व में सूची विशेषता को <डेटालिस्ट> तत्व में आईडी विशेषता निर्दिष्ट करनी होगी।

उदाहरण

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

<आउटपुट> तत्व

<आउटपुट> तत्व एक गणना के परिणाम का प्रतिनिधित्व करता है (जैसे कि एक स्क्रिप्ट द्वारा निष्पादित)।

उदाहरण

गणना करें और परिणाम को <आउटपुट> तत्व में प्रदर्शित करें:

<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>

अभ्यास