इस 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 करे |
get-data.php<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>
<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 :
<textarea> Element
input type="text" ये single line; input देने के लिए इस्तेमाल किया जाता है | लेकिन multiple lines का input देना हो तो <textarea> element का इस्तेमाल किया जाता है |
Output :<form> <textarea rows="6" cols="30"> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </textarea> </form>
<select> Element
<select> element ये <option> element का parent element है | drop-dow list को create करने के लिए इस element का इस्तेमाल किया जाता है |
Output :<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>
<option> Element
<option> ये <select> और <datalist> element का child element होता है | <select> list के हर item को <option> से define किया जाता है |
<select> element में दिए हुआ <option> element close किया जाता है, लेकिन <datalist> में दिए हुआ <option> element को अलग से close नहीं किया जाता है |
Output :<form> <input list="languages"> Select Language <br /> <datalist id="languages"> <option value="C"> <option value="C++"> <option value="Java"> <option value="Python"> </datalist> </form>
<optgroup> Element
<optgroup> ये <select> का child और <option> का parent element होता है |
<optgroup> element से <option> के items का group किया जाता है और उसे label दिया जाता है |
Output :<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>
<fieldset> Element
<fieldset> element से संबंधित form elements का group करने के लिए इस्तेमाल किया जाता है | grouped किये हुए elements के चारों ओर से box को draw किया जाता है |
Output :<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>
<legend> Element
<legend> element से <fieldset> element के लिए caption दिया जाता है |
Output :<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>
<datalist> Element
<datalist> ये element <select> element की तरह ही होता है, लेकिन datalist के id attribute के साथ <input> element के list attribute का संबंध जोड़ा जाता है |
<datalist> element से user option को select भी कर सकता है और input भी दे सकता है |
Output :<form> <input list="languages"> Select Language <br /> <datalist id="languages"> <option value="C"> <option value="C++"> <option value="Java"> <option value="Python"> </datalist> </form>
<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://hindilearn.in/images/hindilearn.png"></button>
</form>
Output :