HTML फॉर्म एलीमेंट

इस अध्याय में सभी HTML फॉर्म एलिमेंट को बताया जाएगा。

<input> एलिमेंट

महत्वपूर्ण फॉर्म एलिमेंट <input> एलिमेंट

<input> एलिमेंट विभिन्न टाइप एट्रिब्यूट, बदले जा सकते हैं।

टिप्पणी:अगले अध्याय में सभी HTML इनपुट टाइप को बताया जाएगा。

<select> एलिमेंट (ड्रॉप डाउन सूची)

<select> एलिमेंट को परिभाषित करता हैड्रॉप डाउन सूची:

उदाहरण

<select name="cars">
<option value="volvo">वोल्वो</option>
<option value="saab">साब</option>
<option value="fiat">फियाट</option>
<option value="audi">ऑडी</option>
</select>

अपने आप सामने परीक्षण करें

<option> एलिमेंट चुने जाने वाले विकल्प को परिभाषित करता है。

सूची आमतौर पर पहले विकल्प को चुना हुआ दिखाती है।

आप selected एट्रिब्यूट जोड़कर अग्रिम विकल्प डिफाइन कर सकते हैं।

उदाहरण

<option value="fiat" selected>फियाट</option>

अपने आप सामने परीक्षण करें

<textarea> एलिमेंट

<textarea> एलिमेंट कई पंक्तियों वाले इनपुट फील्ड को परिभाषित करता है (पाठ फील्ड）：

उदाहरण

<textarea name="message" rows="10" cols="30">
बिल्ली बाग में खेल रहा था।
</textarea>

अपने आप सामने परीक्षण करें

ऊपरी HTML कोड ब्राउज़र में निम्नलिखित तरीके से दिखाया जाता है:

बिल्ली बाग में खेल रहा था।

<button> एलीमेंट

<button> एलीमेंट डिफ़ॉल्ट में क्लिक करने वालेबटन:

उदाहरण

<button type="button" onclick="alert('Hello World!')">क्लिक मुझे!</button>

अपने आप सामने परीक्षण करें

ऊपरी HTML कोड ब्राउज़र में निम्नलिखित तरीके से दिखाया जाता है:

HTML5 फॉर्म एलीमेंट

HTML5 ने निम्नलिखित फॉर्म एलीमेंटों को जोड़ा है:

  • <datalist>
  • <keygen>
  • <output>

टिप्पणी:डिफ़ॉल्ट में, ब्राउज़र अज्ञात एलीमेंटों को दिखाने के लिए नहीं है।नए एलीमेंट आपके पृष्ठ को नष्ट नहीं करेंगे。

HTML5 <datalist> एलीमेंट

<datalist> एलीमेंट <input> एलीमेंट के लिए पूर्वनिर्धारित विकल्प सूची निर्दिष्ट करता है。

उपयोगकर्ता उनके इनपुट डाटा भरते समय पूर्वनिर्धारित विकल्पों की ड्रॉपडाउन सूची देख सकते हैं。

इस्तेमाल करें <input> एलीमेंट का list गुण को ज़रूरी है कि वह <datalist> एलीमेंट का id गुण

उदाहरण

पूर्वनिर्धारित मूल्यों वाले <input> एलीमेंट को <datalist> सेट करने के लिए <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>

अपने आप सामने परीक्षण करें