Introduction of HTML Form Elements
इस लेख मे हम HTML Form Elements के बारे मे detail मे जानेंगे।
<input> Element – Form elements in HTML5
यह Form मे सबसे ज्यादा इस्तेमाल होनेवाला Element है।
<input> Element का इस्तेमाल users के द्रारा input देने के लिए जाता है।
<input> Element के साथ type attribute का इस्तेमाल किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h3> input Element</h3> <p>HTML Form Elements</p> <form action="get-data.php" target="_blank"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
<input> tag के अलग अलग types होते है। इसे हम अगले लेख मे detail मे जानेंगे।
<select> Element
Drop down list को create करने के लिये इस Element का इस्तेमाल किया जाता है।
Drop down list मे different options देने के लिये <select> element के अंदर <option> element का इस्तेमाल किया जाता है। इस तरह <select> element <option> element का parent element है। <select> list मे हर items को <option> tag से specify किया जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>select Element</h3>
<p>HTML Form Elements</p>
<p>it defines a drop-down list</p>
<form action="get-data.php" target="_blank">
<label for="languages">Choose a languages:</label>
<select id="languages" name="languages">
<option value="C language">C language</option>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="Java">Java</option>
</select>
<input type="submit">
</form>
</body>
</html>
By default, drop down list मे पहला option select रहता है।
अगर आपको दूसरा कोई option pre-select करना है तो आपको option tag के साथ selected attribute का इस्तेमाल करना पड़ेगा।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>pre-select Element</h3>
<p>HTML Form Elements</p>
<form action="get-data.php" target="_blank">
<label for="languages">Choose a languages:</label>
<select id="languages" name="languages">
<option value="C language">C language</option>
<option value="C++">C++</option>
<option value="Python" selected>Python</option>
<option value="Java">Java</option>
</select>
<input type="submit">
</form>
</body>
</html>
अगर आप एक से ज्यादा value को दिखाना चाहते है तो size attribute का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>pre-select Element</h3>
<p>HTML Form Elements</p>
<form action="get-data.php" target="_blank">
<label for="languages">Choose a languages:</label>
<select name="languages" size="3">
<option value="C language">C language</option>
<option value="C++">C++</option>
<option value="Python" selected>Python</option>
<option value="Java">Java</option>
</select>
<input type="submit">
</form>
</body>
</html>
अगर आपको एक से ज्यादा options को select करना है तो multiple attribute का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>pre-select Element</h3>
<p>HTML Form Elements</p>
<form action="get-data.php" target="_blank">
<label for="languages">Choose a languages:</label>
<select name="languages" size="4" multiple>
<option value="C language">C language</option>
<option value="C++">C++</option>
<option value="Python" selected>Python</option>
<option value="Java">Java</option>
</select>
<input type="submit">
</form>
</body>
</html>
<textarea> Element
<input type=”text”> single line input देने के लिये इस्तेमाल होता है। लेकिन अगर आप multiple line को input कराना चाहते है तो <textarea> Element का use होता है।
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <textarea name="message" rows="10" cols="30"> input type='text' single line input देने के लिये इस्तेमाल होता है। </textarea> <br> <input type="submit"> </form> </body> </html>
यहा rows attribute text area की line को specify करता है।
और cols attribute text area की width को specify करता है।
आप text area की size को CSS की मदद से भी define कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <textarea name="message" style="width:200px; height:400px;"> input type='text' single line input देने के लिये इस्तेमाल होता है। </textarea> <br> <input type="submit"> </form> </body> </html>
<button> Element
<button> Element का इस्तेमाल button को create करने के लिये किया जाता है।
<button> Element पर आप text या image किसी का भी इस्तेमाल कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>button Element</h3>
<button type="button" onclick="alert('Hii How are you!')">Click Here!</button>
</body>
</html>
<fieldset> and <legend> Elements
<fieldset> Element का use Form elements का group करने के लिये होता है। मतलब की group किये गये element की चारो ओर box create हो जाता है।
<fieldset> Element को caption देने के लिये <legend> element का use होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<form action="get-data.php" target="_blank">
<fieldset>
<legend>Personal Information:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Virat"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Kohli"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<datalist> Element
<datalist> Element की मदद से user option को select भी कर सकता है और type भी कर सकता है।
<datalist> element <select> element की तरह ही होता है। लेकिन <datalist> Element के id attribute को <input> element के list attribute के साथ जोड़ा जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>The datalist Element</h3>
<p>HTML Form Elements</p>
<form action="get-data.php" target="_blank">
<input list="languages" name="language">
<datalist id="languages">
<option value="C language">
<option value="C++">
<option value="Python">
<option value="Java">
</datalist>
<input type="submit">
</form>
</body>
</html>
<optgroup> Element
<optgroup> Element की मदद से <option> के lists का group किया जाता है और उसे label दिया जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>optgroup Element</h3>
<form action="get-data.php" target="_blank">
<label for="languages">Choose a languages:</label>
<select id="languages" name="languages">
<optgroup label="Programming">
<option value="C language">C language</option>
<option value="C++">C++</option>
<optgroup label="Web Development">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
<input type="submit">
</form>
</body>
</html>
<optgroup> ये <select> का child Element है और <option> का parent Element है।