Introduction of HTML Form in Hindi
इस लेख मे हम HTML Form के बारे मे detail मे जानेंगे। HTML form का इस्तेमाल Users के data को Collect करने के लिए किया जाता है। अगर आप internet का इस्तेमाल करते हो तो आपने कभी न कभी form का इस्तेमाल तो किया होगा। log in Forms, Sign Up Forms, Survey Forms, Payment Detail Forms ये सभी Forms के उदाहरण है। अगर आपको HTML Form बनाना है तो इसके कुछ rules होते है इसे follow करना होता है।
<form> Element – HTML Form in Hindi
Form को बनाने के लिए <form> tag का इस्तेमाल किया जाता है। इसका syntax नीचे दिया गया है।
<form>
Form Elements
</form>यहा Syntax मे Opening HTML Form tag और Closing HTML Form Tag का इस्तेमाल किया गया है। और इसके बीच मे Form के Elements को Define किया जाता है।
Form Elements मे अलग अलग input Elements का use किया जाता है जैसे की text fields, check boxes, radio buttons, submit buttons, और कई सारे.
<input> Element – HTML Form in Hindi
Form को बनाने के लिए <input> Tag का इस्तेमाल किया जाता है। इसके कुछ attributes है जिसका इस्तेमाल करके आप Form बना सकते हो।
Name Attribute
Particular name देने के लिए इस attribute का इस्तेमाल किया जाता है। बाद मे इसी name को server पर value store करने के लिये इस्तेमाल करते है।
<form>
<input name="FName">
</form>Type Attribute
Input tag के साथ इस attribute का इस्तेमाल किया जाता है। हमे users से किस तरह का input लेना है इसे हम type attribute मे define कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h3>Type Attribute</h3> <form> <input type="text" name="FirstName"> </form> </body> </html>
| type | description |
| <input type=”text”> | एक line मे data को input करवाने के लिये |
| <input type=”radio”> | एक से ज्यादा विकल्पो मे से सिर्फ एक ही विकल्प को select करने के लिये |
| <input type=”submit”> | Form को submit करने के लिये |
इसके अलावा बहोत सारे input types के बारे मे अगले लेख मे detail मे जानेंगे।
Placeholder Attributes
अगर आपको text box के अंदर कुछ text show कराना है तो आप placeholder attribute का इस्तेमाल कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <h3>Placeholder Attribute</h3> <form> <input type="text" name="FirstName" placeholder="Enter your First Name"> </form> </body> </html>
<label> Element – HTML Form in Hindi
<label> tag का इस्तेमाल <input> element के लिये label को specify करने के लिये किया जाता है। मतलब की form control के साथ किसी label को जोड़ने के लिये <label> Element का use किया जाता है। जैसे की text, email, password, text area आदि।
<label> tag के साथ for attribute का use किया जाता है। for attribute की value और input tag के id attribute की value same होती है ताकि एक दूसरे को जोड़ा जा सके।
Radio Buttons
अगर आपको एक से ज्यादा विकल्पो मे से users के पास से सिर्फ एक ही विकल्प को select करवाना है तो radio button का इस्तेमाल किया जाता है।
<input> tag के type attribute की value मे radio लिखकर Radio Buttons को define किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h3>Radio Buttons</h3> <form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form> </body> </html>
Submit Button
<input> tag के type attribute की value मे submit लिखकर submit Button को define किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <p>HTML Form in Hindi</p> <h3>HTML Forms</h3> <form action="/action_page.php"> <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"> </form> </body> </html>
Action Attribute
जब form को submit किया जाता है तब action attribute की मदद से कौन सी action perform करनी है इसे define किया जाता है।
जब submit button पर click किया जाता है तब form के data को server के page पर send किया जाता है।
यहा ऊपर के उदाहरण मे जब आप submit button पर click करते है तब form के data को “/action_page.php” नाम के server के page पर send किया जाता है।
<form action="/action_page.php">Target Attribute
Submitted Result new browser tab या current window मे open होगा यह target attribute की मदद से specify किया जाता है।
इसकी default value “_self” होती है मतलब की current windows मे form को submit किया जाता है।
अगर आपको result को new windows tab मे open करना है तो “_blank” value का use करे।
उदाहरण
<form action="/action_page.php" target="_blank">Method Attribute
जब आप form के data को submit करते है तब कौन सी HTTP method (GET or POST) का इस्तेमाल करना है यह method attribute की मदद से specify किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h3>HTML Forms</h3> <form action="/action_page.php" target="_blank" method="get"> <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"> </form> </body> </html>
जब आप default get method का इस्तेमाल करते है तब form data page के address field (url) मे visible रहता है।
/action_page.php?fname=virat&lname=kohli<!DOCTYPE html> <html> <body> <h3>HTML Forms</h3> <form action="/action_page.php" target="_blank" method="post"> <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"> </form> </body> </html>
जब आप post method का इस्तेमाल करते है तब form data page के address field (url) मे visible नहीं रहता है।
/action_page.php