आज इस आर्टिकल में हम आपको HTML Form Tutorials in Hindi – Part 17 के बारे में बताने जा रहे है.
HTML Form का इस्तेमाल user से डाटा collect करने के लिए किया जाता है.
अगर आप भी अपने HTML डॉक्यूमेंट में फॉर्म बना कर जरूरी डाटा collect करना चाहते है जैसे user का नाम, user का ईमेल ID और फ़ोन नंबर. इस तरह की इनफार्मेशन आप user से input करवा कर प्राप्त कर सकते है.
HTML form बनाने के लिए <form> element का इस्तेमाल किया जाता है. इस element के अन्दर आपको <input> element का इस्तेमाल करना है. <input> element के कई attributes है जिनमे से type attribute का इस्तेमाल आपको हर <input> element में करना होगा.
Example
<form>
<input type="text">
</form>
Output>>>>>>>
यहाँ पर हमने आपको एक type attribute की एक value का ही बताया है जिसके द्वारा आप नंबर, text, स्पेशल charactor को अपने डॉक्यूमेंट में user से enter करवा सकते है.लेकिन सबसे पहले हम आपको form element में इस्तेमाल होने वाले attributes के बारे में बताएँगे.
HTML <form> Element Attributes
इसमें सबसे ज्यादा method और action attributes का इस्तेमाल किया जाता है.
action attribute से हम user के द्वारा सबमिट करने पर form का डाटा कौन से webpage पर जाना चाहिए इसके लिए किया जाता है. इसके लिए server side script इस्तेमाल किया जाता है. लेकिन हम यहाँ पर आपको सिर्फ सिंपल html page को attach करके दिखा रहे है. PHP या javascipt के tutorial में हम आपको data को validate करना और data हैंडल करने के बारे में भी बताएँगे.
action Attribute Example
Form.html File
<form >
<input type="text">
<input >
</form>
Output>>>>>>>>>>>
file2.html
<p>Your Data Submitted. Thank You!</p>
जब user कोई डाटा enter करके Submit Query पर क्लिक करेगा तो action attribute से वह automatic file2.html पर jump कर दिया जाएगा जहाँ पर user को Your Data Submitted. Thank You! का नोटिस मिलेगा.
Method Attribute
इस attribute का इस्तेमाल भेजे जाने वाले डाटा को इस method के द्वारा भेजना है इसके लिए किया जाता है. यह डाटा को HTTP method के द्वारा (GET या POST) भेजता है.
GET method का इस्तेमाल तब किया जाता है जब आपको कोई जरुरी डाटा सबमिट ना करवाना हो या फिर आप किसी सर्च <input> का इस्तेमाल करके आप वेबसाइट या webpage पर कुछ search करवाना चाहते है. GET method के द्वारा भेजा गया डाटा Address bar में visible होता है.
जैसे की यह url :- https://www.google.com/search?q=rjbeat इसमें q=rjbeat यह डाटा https://www.google.com/search के फॉर्म से सबमिट किया गया है. इसकी 3000 charactor की लिमिट भी होती है. अगर आप form element में method का इस्तेमाल नही करते है तो by default यह GET method को सेलेक्ट कर लेता है.
Example
<form action="file2.html" method="get">
POST method का इस्तेमाल हम तब करते है जब हमें कोई जरुरी डाटा भेजना हो जैसे की login करने के लिए form या कोई registration करने के लिए form. इसके लिए हमें यह बात याद रखनी जरुरी है कोई हमारे डाटा को url में चेक ना कर सके. क्योंकि यह history में url के साथ में आपके द्वारा डाली गई सारी को छुपा देता है.
Example
<form action="file2.html" method="post">
इसके अलावा form element में target attribute का इस्तेमाल भी किया जाता है जो आपके फॉर्म के डाटा को किस tab में open करना है इसके बारे में बताता है. इसके बारे में हमने आपको HTML Link tutorial में भी बताया था.
Input Element Type Attribute’s Value Table
|
Input Type Attribute’s Value |
Description |
| Text | one-line text input field |
| Password | password field |
| Submit | Submit Button or form Handler |
| Reset | Reset Form input field Data |
| Radio | Radio button |
| Checkbox | Checkbox |
| Button | Define a button |
| Color | Color selection (color hex value output) |
| Date | Select date (dd/mm/yyyy) also use min and max attribute for select a specific date |
| For email input field | |
| Number | For numeric value input also use min and max attribute for select a specific number |
| Search | For search field |
| URL | For URL field |
| File | To select a file |
| Range | For a slider control also use min and max attribute to fix range like 0-100 range |
