डाउनलोड पी.डी.एफ. ई-बुक्स
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 :