आपकी ऑफलाइन सहायता

BACK
49

सी प्रोग्रामिंग

149

पाइथन प्रोग्रामिंग

49

सी प्लस प्लस

99

जावा प्रोग्रामिंग

149

जावास्क्रिप्ट

49

एंगुलर जे.एस.

69

पी.एच.पी.
माय एस.क्यू.एल.

99

एस.क्यू.एल.

Free

एच.टी.एम.एल.

99

सी.एस.एस.

149

आर प्रोग्रामिंग

39

जे.एस.पी.





डाउनलोड पी.डी.एफ. ई-बुक्स
HTML - All HTML Form Elements

इस topic में हम सभी Form Elements के बारे में पढेंगे |

HTML Form Elements in Hindi

  • <input> Element
  • <textarea> Element
  • <select> Element
  • <option> Element
  • <optgroup> Element
  • <fieldset> Element
  • <legend> Element
  • <datalist> Element
  • <button> Element

<input> Element

<input> element का इस्तेमाल user द्वारा input देने के लिए किया जाता है |

<input> tag के बहुत types होते है, उन types को जानने के लिए यहाँ click करे |

<form action="get-data.php" target="_blank">
Enter Name : 
<input type="text" name="name"><br /><br />
Gender : 
<input type="radio" name="gender" value="Male">Male 
<input type="radio" name="gender" value="Female">Female<br /><br />
Known Programming Languages : 
<input type="checkbox" name="lang[]" value="C">C
<input type="checkbox" name="lang[]" value="C++" checked>C++
<input type="checkbox" name="lang[]" value="Java">Core Java
<input type="checkbox" name="lang[]" value="Python">Python <br /><br />
<input type="submit" name="submit">
</form>
get-data.php
<body>
Name : <?php echo $_GET["name"]; ?><br />
Gender : <?php echo $_GET["gender"]; ?><br />
Known Languages : 
<?php
foreach ($_GET["lang"] as $language){ 
    echo $language."<br />";
}
?>
</body>
Output :
Enter Name :

Gender : Male Female

Known Programming Languages : C C++ Core Java Python


<textarea> Element

input type="text" ये single line; input देने के लिए इस्तेमाल किया जाता है | लेकिन multiple lines का input देना हो तो <textarea> element का इस्तेमाल किया जाता है |

<form>
<textarea rows="6" cols="30">
Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World
</textarea>
</form>
Output :

<select> Element

<select> element ये <option> element का parent element है | drop-dow list को create करने के लिए इस element का इस्तेमाल किया जाता है |

<form>
Select Language <br />
<select>
<option value="C">C Programming</option>
<option value="C++">C++ Programming</option>
<option value="Java">Core Java</option>
<option value="Python">Python</option>
</select>
</form>
Output :
Select Language

<option> Element

<option> ये <select> और <datalist> element का child element होता है | <select> list के हर item को <option> से define किया जाता है |

<select> element में दिए हुआ <option> element close किया जाता है, लेकिन <datalist> में दिए हुआ <option> element को अलग से close नहीं किया जाता है |

<form>
<input list="languages">

Select Language <br />
<datalist id="languages">
<option value="C">
<option value="C++">
<option value="Java">
<option value="Python">
</datalist>
</form>
Output :
Select Language

<optgroup> Element

<optgroup> ये <select> का child और <option> का parent element होता है |

<optgroup> element से <option> के items का group किया जाता है और उसे label दिया जाता है |

<form>
<select>
<optgroup label="Programming">
<option value="C">C Programming</option>
<option value="C++">C++ Programming</option>
<option value="Java">Core Java</option>
<option value="Python">Python</option>
</optgroup>
<optgroup label="Web Development">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
</optgroup>
</select>
</form>
Output :

<fieldset> Element

<fieldset> element से संबंधित form elements का group करने के लिए इस्तेमाल किया जाता है | grouped किये हुए elements के चारों ओर से box को draw किया जाता है |

<form>
<fieldset>
<legend>Student Info</legend>
Student Name : <input type="text" name="name"><br />
Roll No : <input type="text" name="rollno"><br />
Address : <input type="text" name="address"><br /> 
</fieldset>
<input type="submit" name="sumbit">
</form>
Output :

<legend> Element

<legend> element से <fieldset> element के लिए caption दिया जाता है |

<form>
<fieldset>
<legend>Student Info</legend>
Student Name : <input type="text" name="name"><br />
Roll No : <input type="text" name="rollno"><br />
Address : <input type="text" name="address"><br /> 
</fieldset>
<input type="submit" name="sumbit">
</form>
Output :

<datalist> Element

<datalist> ये element <select> element की तरह ही होता है, लेकिन datalist के id attribute के साथ <input> element के list attribute का संबंध जोड़ा जाता है |

<datalist> element से user option को select भी कर सकता है और input भी दे सकता है |

<form>
<input list="languages">

Select Language <br />
<datalist id="languages">
<option value="C">
<option value="C++">
<option value="Java">
<option value="Python">
</datalist>
</form>
Output :
Select Language

<button> Element

button को create करने के लिए <button> element का इस्तेमाल किया जाता है |

आप button element पर content के रूप में कोई भी text या images का उपयोग कर सकते है |

<form>
<button onclick="alert('Button Clicked')">Click Me</button>
<button onclick="alert('You clicked on image')"><img src="https://www.hindilearn.in/images/hindilearn.png"></button>
</form>
Output :