HTML Hindi Notes | फॉर्म एलिमेंट्स | Form Elements
HTML Theory Notes in Hindi | HTML FORMS in Hindi
HTML फॉर्म्स – टेक्स्ट बॉक्स, चेक बॉक्स एवं कॉम्बो बॉक्स
|
||
HTML फॉर्म का प्रयोग यूजर द्वारा दिए जाने वाले इनपुट के लिए किया जाता है, HTML मे Form को <form> टैग से डिफाइन करते है और इसे <body> टैग के अंदर रखा जाता है. HTML फॉर्म को विभिन्न प्रकार के यूजर से डाटा को इकट्ठा करने के लिए प्रयोग किया जाता है जैसे : Name, Email Address, Phone Numbers की जानकारी आदि.
Form Element :
HTML फॉर्म में फॉर्म एलिमेंट्स होते हैं, जैसे: टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन, सबमिट बटन आदि
|
||
Element |
विवरण |
उदाहरण |
<input>
|
<input>
एलिमेंट फॉर्म का सबसे महत्वपूर्ण एलिमेंट है इसका प्रयोग टाइप एट्रिब्यूट के
साथ किया जाता है. जैसे
<input
type="text"> : -यह सिंगल लाइन
टेस्ट इनपुट फ़ील्ड के लिए प्रयोग किया जाता है.
<input
type="radio"> : यह रेडियो बटन के
लिए प्रयोग किया जाता है.
<input
type="submit"> : यह सबमिट बटन के
लिए प्रयोग किया जाता है.
|
<form>
Username:<br>
<input type="text" name="username">
<br>
Email
id:<br>
<input type="text" name="email_id">
<br><br>
<input type="submit" value="Submit">
</form>
|
<label>
|
<label> टैग कई फ़ॉर्म
एलेमेंट्स के लिए एक लेबल को परिभाषित करता है।
<label> टैग के for एट्रिब्यूट को हमेशा <input> एलिमेंट के
id एलिमेंट के अनुसार रखा जाना चाहिए जिससे दोनों को आपस में जोड़ा जा सके.
|
<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"
><br><br>
<input type="submit" value="Submit">
</form>
|
<select>
|
<select> एलिमेंट ड्राप डाउन
लिस्ट के लिए प्रयोग किया जाता है. इसके <option> एलिमेंट से सेलेक्ट करने योग्य वैल्यू को दर्शाया जाता
है.
|
<select id="cars" name="cars">
<option value="volvo">Volvo
</option>
<option value="bme">BMW </option> <option value="fiat">Fiat </option> <option value="audi">Audi </option> </select> |
<textarea>
|
<textarea> से एक से अधिक लाइन
के input के लिए टेक्स्ट एरिया निर्धारित किया जाता है . rows एट्रिब्यूट लाइन्स
की संख्या के लिए उपयोग किया जाता है. जबकि cols एट्रिब्यूट विड्थ
के लिए उपयोग किया जाता है.
|
<form>
<textarea
name="message"
rows="10"
cols="30">
</textarea>
<br><br>
<input type="submit">
</form>
|
<button>
|
<button> एलिमेंट क्लिक किए
जाने वाले बटन को दर्शाने के लिए उपयोग किया जाता है.
|
<button type="button" onclick= "alert ('Hello World!')">
Click
Me!
</button>
|
<fieldset> and <legend>
|
<fieldset> एलिमेंट फॉर्म में
एक ही प्रकार के डाटा की ग्रुपिंग के लिए उपयोग किया जाता है. <legend> का प्रयोग इसके
कैप्शन के लिए किया जाता है.
|
<form>
<fieldset>
<legend> Personal
Info : </legend>
<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" ><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
|
<datalist>
|
<datalist> के द्वारा प्री
डिफाइन लिस्ट को दर्शाया जाता है. जिसे ड्राप डाउन के मध्यम से सेलेक्ट किया जा
सकता है.
<input> एलिमेंट के list एट्रिब्यूट एवं <datalist> एलिमेंट की id एट्रिब्यूट की
वैल्यू एक समान होना चाहिए.
|
<form >
<input list="browsers" name="browser">
<datalist id="browsers">
<option
value="Internet Explorer">
<option
value="Firefox">
<option
value="Chrome">
<option
value="Opera">
<option
value="Safari">
</datalist>
<input type="submit">
</form>
|
