HTML in Hindi

HTML Form Tutorials in Hindi – Part 17

आज इस आर्टिकल में हम आपको HTML Form Tutorials in Hindi – Part 17 के बारे में बताने जा रहे है.

HTML Form Tutorials in Hindi - Part 17
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>>>>>>>

HTML Form
HTML Form

यहाँ पर हमने आपको एक 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 action="file2.html">
  <input type="text">
  <input type="submit">
</form>

Output>>>>>>>>>>>

Form.html File output
Form.html File 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
Email 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

HTML Form Element Tutorials in Hindi – Part 18>>>>>>>>>>>

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close