HTML Forms
<!DOCTYPE html> <html> <body> <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "action_page.php".</p> </body> </html>
<form> element
HTML <form> element एक ऐसे form को परिभाषित करता है जिसका उपयोग यूजर से input लेने के किया जाता है|
<form> form elements </form>
HTML form में विभिन्न प्रकार के form element होते है जैसे text fields, check-boxes, radio buttons, submit buttons आदि|
<input> Element
<input> element html के form element का एक प्रकुख एलिमेंट है|
विभिन्न प्रकार की विशेषताओ के आधार पर <input> Element को कई प्रकार से प्रदर्शित किया जाता है|
| Type | Description |
| <input type=”text”> | यह एक-लाइन वाले text input field को परिभाषित करता है |
| <input type=”radio”> | कई विकल्पों में से किसी एक को चुनने के लिए radio button का उपयोग किया जाता है| |
| <input type=”submit”> | फॉर्म जमा करने के लिए submit बटन का उपयोग किया जाता है| |
Text Input
<input type=”text”> यह एक-लाइन वाले text input field को परिभाषित करता है|
उदाहरण:
<form> first name<br> <input type = "text" name = "firstname"><br> last name <br> <input type = "text" name = "lastname"><br> </form>
Radio Button Input
<input type=”radio”> यह radio button को परिभाषित करता है।
रेडियो बटन यूजर को विभिन्न विकल्पों में से एक का चयन करने की अनुमति देता है|
उदाहरण:
<form> <input type = "radio" name = "gender" value = "male" checked>Male<br> <input type = "radio" name = "gender" value = "female">Female<br> <input type = "radio" name = "gender" value = "other" >Other<br> </form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा|
Submit button
<input type=”submit”> यह फॉर्म डेटा (form data) के लिए फॉर्म-हैंडलर (form-handler) को सबमिट करने के लिए एक बटन को परिभाषित करता है।
फॉर्म-हैंडलर आमतौर पर एक सर्वर पेज होता है जिसमें इनपुट डेटा को प्रोसेस करने के लिए एक script होती है।
उदाहरण-
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> Last name:<br> <input type="text" name="lastname" value="Mouse"> <input type="submit" value="Submit"> </form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा|
Action Attribute
Action Attribute फॉर्म सबमिट करते समय की जाने वाली प्रोसेस को परिभाषित करता है।
आम तौर पर, जब यूजर सबमिट बटन पर क्लिक करता है तो फॉर्म को डेटा सर्वर पर उपलब्ध एक वेब पेज पर भेजा जाता है।
ऊपर के उदाहरण में, फॉर्म डेटा सर्वर पर “action_page.php” नामक पेज पर भेजा जाता है। इस पेज में एक सर्वर-साइड स्क्रिप्ट होती है जो फॉर्म के डेटा को संभालती है:
उदाहरण-
<form action="action_page.php">
Method Attribute
Method Attribute फॉर्म डेटा सबमिट करते समय उपयोग की जाने वाली HTTP method (GET या POST) को निर्दिष्ट करता है|
<form action="action_page.php" method = "get">
या
<form action="action_page.php" method = "post">
GET का उपयोग कब करते है?
फ़ॉर्म डेटा में संवेदनशील या व्यक्तिगत जानकारी (sensitive or personal information) होने पर हमेशा POST का उपयोग करते है। POST method page address field में सबमिट किए गए फॉर्म डेटा को प्रदर्शित नहीं करती।
POST की कोई आकार सीमा नहीं है, और इसका उपयोग बड़ी मात्रा में डेटा भेजने के लिए किया जा सकता है।
Name Attribute
प्रत्येक इनपुट फ़ील्ड में सबमिट करने के लिए एक नाम एट्रिब्यूट (name attribute) होना चाहिए।
यदि नाम एट्रिब्यूट (name attribute) को छोड़ दिया जाता है, तो उस इनपुट फ़ील्ड का डेटा बिल्कुल नहीं भेजा जाएगा।
नीचे दिए गए उदाहरण में केवल “अंतिम नाम (last name)” इनपुट फ़ील्ड सबमिट होगा:
उदाहरण:-
<form action="action_page.php"> First name:<br> <input type="text" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>
Form Data को <fieldset> के साथ समूहीकृत करना
<fieldset> element का उपयोग संबंधित डेटा को एक रूप में समूहित (group) करने के लिए किया जाता है।
<legend> element <fieldset> element के लिए एक caption को परिभाषित करता है।
उदाहरण:
<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> Last name:<br> <input type="text" name="lastname" value="Mouse"> <input type="submit" value="Submit"> </fieldset> </form>
ब्राउज़र में उपरोक्त HTML कोड इस प्रकार प्रदर्शित होगा:
