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> एलीमेंट इनपुट एलीमेंट के लिए पूर्वनिर्धारित विकल्प सूची निर्दिष्ट करता है。

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

इनपुट एलीमेंट का 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>

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