Websites HTML Documents यानि Webpages का संकलन हैं. और एक HTML Document अनेक HTML Elements से मिलकर बना होता हैं. इसमे Headings, Paragraphs, Lists, Images आदि शामिल होते हैं इनके अलावा भी कई अन्य महत्वपूर्ण HTML Elements होते हैं. जिनमे एक HTML Form Element भी शामिल हैं. इस Tutorial में हम आपको HTML Form Element की पूरी जानकारी देंगे. आप जानेंगे कि HTML से Form कैसे बनाया जाता हैं? इस Lesson को सुविधा की दृष्टि से छोटे-छोटे भागों में बांटा गया हैं.
Users से जानकारी लेने के लिए HTML Forms का इस्तेमाल किया जाता हैं. इस जानकारी में फीडबैक, निजि जानकारी, संदेश, शिकायत या अन्य कुछ सुझाव आदि हो सकते हैं.
आपको Websites में HTML Forms कई रूपों में मिल जाऐंगे. आप इन्हे Sign Up Forms, Log in Forms, Payment Details Forms, Survey Forms आदि के रूप में देख सकते हैं. क्या आप जानते हैं कि Google का Search Box भी एक HTML Form ही हैं?
Forms में Users द्वारा जरूरी जानकारी को भरा जाता हैं. और इस जानकारी को Server पर भेज दिया जाता हैं. जहाँ से इसे Webmasters Access कर पाते हैं.
सभी Form Elements की जानकारी
HTML Forms को Form Element द्वारा Define किया जाता हैं. Form एक Container Tag की तरह काम करता हैं. जिसके अंदर अन्य Form Elements को Define करके Forms को बनाया जाता हैं. Form Element के अलावा भी कई अन्य Important Form Elements भी होते हैं. जिनके बारे में नीचे बताया जा रहा हैं.
input – Input Element HTML Form का दूसरा Required Element हैं. Input Element के द्वारा Form में विभिन्न प्रकार के Data Fields को Define किया जाता हैं. जिनका निर्धारण type Attribute करता हैं.
select – Select Element से Form में एक Drop-down List को Define किया जाता हैं. इससे अधिक जानकारी एक Field में ही समाहित हो जाती हैं.
textarea – वैसे तो Input Element द्वारा Text Field Define किए जा सकते हैं. लेकिन, Multiline Data Fields को textarea Element द्वारा ही Define किया जा सकता हैं. क्योंकि Input Element से सिर्फ Single-line Data Field ही बनाए जा सकते हैं.
Form Elements के प्रमुख Attributes
Form Tag के साथ आप Global Attributes और Event Attributes को Define कर सकते हैं. क्योंकि Form Tag Global और Event Attributes को Support करता हैं.
इन दोनों के अलावा कुछ Attributes को सिर्फ Form Tag में ही Define किया जा सकता हैं, जो Element-specific Attribute कहलाते हैं. जिनके बारे में नीचे बताया जा रहा हैं.
action – User द्वारा Form Submit करने के बाद जो कार्य आप Server से करवाना चाहते हैं से action Attribute द्वारा Define किया जाता हैं.
Method – आप Form Data को जिस Method से Submit करवाना चाहते हैं उसे Method Attribute से Define किया जाता हैं. यदि आपका Data में संवेदनशील या निजि जानकारी शामिल हैं तो आपको Post Method Define करनी चाहिए. नही तो आप Get Method को Use कर सकते हैं.
Target – आप Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं.
एक HTML Form बनाना
अब तक आप जान चुके हैं कि HTML Form को Form Element द्वारा Define किया जाता हैं. और अब हम एक HTML Form बनाने का तरीका बताने जा रहे हैं.
HTML Form बनाने से पहले हम आपको Form Syntax की जानकारी दे रहे हैं. ताकि आप सही तरह से HTML Form बना सके.
HTML Form का Syntax
नीचे Form Syntax दिया जा रहा हैं.
<form>
Form Elements
</form>
Syntax को समझिए
ऊपर आपने देखा कि Form Syntax बिल्कुल आसान हैं. जिसमें सिर्फ Opening Form Tag और Closing Form Tag का इस्तेमाल किया गया हैं. इन दोनों Tags के बीच में अन्य Form Elements के द्वारा Data Fields को Define किया जाता हैं.
HTML Form Define करना
अब हम एक HTML Form बनाऐंगे. यह एक साधारण HTML Form हैं. जिसे सिर्फ आपको समझाने के लिए बनाया गया हैं. नीचे दिए गए HTML Code को किसी Text Editor जैसे Notepad में लिखिए या फिर इसे Copy करके Paste कर दिजिए और इसे form.html के नाम से Save कीजिए.
अब आप ऊपर दिए गए HTML Code को Save करके ब्राउजर में Open कीजिए तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.
Form में विभिन्न प्रकार के Data Fields बनाना
HTML Form द्वारा Users से कई प्रकार की जानकारी प्राप्त की जाती हैं. इस कार्य के लिए अलग-अलग प्रकार के Data के लिए भिन्न-भिन्न Data Fields की जरूरत होती हैं. ताकि Users से प्राप्त Data को छांटा जा सके. नीचे हम आपको एक फॉर्म में इस्तेमाल होने वाले Data Input Fields के नाम और उपयोग बता रहे हैं.
Text Input Controls
Text Input Controls सबसे ज्यादा उपयोग होने वाला Data Fields हैं. जब Users से Text के रूप में जानकारी प्राप्त करनी होती हैं तो इस प्रकार के Input Controls को Form में Define किया जाता हैं. Text Input Controls के तीन प्रकार होते हैं.
Single-line Text Input Control – जब Users से केवल एक Line का Data Input करवाने की जरूरत होती हैं, तब इस प्रकार के Data Fields को Define किया जाता हैं. इसके लिए <input> Tag में type Attribute की Value को text लिखा जाता हैं.
Password Text Input Control – यह भी एक प्रकार का Single-line Text Input Control ही हैं. इसमे जब Users Data को लिखता हैं तो इसमे Data किसी खास प्रकार के Characters में बदल जाता हैं. इसके लिए <input> Tag में type Attribute की Value को password लिखा जाता हैं.
Multi-line Text Input Control – जब Users से एक से ज्यादा Lines में Data Input करवाने की जरुरत होती हैं, तब Multi-line Text Input Controls को HTML Forms में Define किया जाता हैं. इसके लिए <textarea> Tag का इस्तेमाल किया जाता हैं. जिसमे हम Rows और Columns Define कर सकते हैं.
Text और Password Input Control Define करना
नीचे दिए गए HTML Code को नोटपेड या किसी अन्य Text Editor में लिखिए या इसे Copy करके Paste कीजिए और इसे input-form.html के नाम से Save कर दीजिए.
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Single-line और Password Input Controls दोनों को एक साथ Define करना बताया हैं.
Multi-line Text Input Control Define करना
नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.
<!DOCTYPE html> <html> <head><title> Multi-line Text Input Control Example</title></head> <body> <form>Message: <textarea rows=”5″ cols=”30″ name=”message”> Write your message here… </textarea></form> </body> </html>
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Multi-line Text Input Control को Define करना बताया हैं. आप इसकी लंबाई और चौडाई को क्रमश: rows और cols Attribute द्वारा Define कर सकते हैं.
Form Check Box
जब Users को एक से ज्यादा विकल्प को चुनना पडता हैं तो इसके लिए Check Boxes का इस्तेमाल किया जाता हैं. इसे भी <input> Tag द्वारा ही Define किया जाता हैं. लेकिन, type Attribute की Value को checkbox लिख दिया जाता हैं.
HTML Form में Check Box Define करना
नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.
<!DOCTYPE html> <html> <head><title> Check Box Input Control Example</title></head> <body> <form>Choose Your Subjects: <input type=”checkbox” name=”hindi”> Hindi <input type=”checkbox” name=”english”> English <input type=”checkbox” name=”maths”> Maths <input type=”checkbox” name=”science”> Science <input type=”checkbox” name=”ss”> Social Sciences</form> </body> </html>
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.
Form में Radio Buttons बनाना
जब एक से ज्यादा विकल्पों में से सिर्फ एक ही विकल्प Users द्वारा Select करवाया जाए तो इसके लिए Radio Buttons को फॉर्म में Define किया जाता हैं. Radio Buttons को भी <input> Tag द्वारा ही Define किया जाता हैं. बस type Attribute में Value को radio लिख दिया जाता हैं.
HTML Form में Radio Button Define करना
नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.
<!DOCTYPE html> <html> <head><title> Radio Buttons Input Control Example</title></head> <body> <form>Select Your Official Language: <input type=”radio” value=”hindi” name=”subject”> Hindi <input type=”radio” value=”english” name=”subject”> English <input type=”radio” value=”tamil” name=”subject”> Tamil <input type=”radio” value=”urdu” name=”subject”> Urdu <input type=”radio” value=”bangla” name=”subject”> Bangla</form> </body> </html>
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.
Form में Drop-down List/Select Box बनाना
आप फॉर्म में Drop-down List भी बना सकते हैं, इसे Select Box Control के नाम से भी जाना जाता हैं. इस प्रकार के Input Control को <select> Tag द्वारा Define किया जाता हैं, और <option> Tag द्वारा विकल्पों को Define किया जाता हैं.
Form में Drop-down List Define करना
नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.
<!DOCTYPE html> <html> <head><title> Drop-down List Input Control Example</title></head> <body> <form>Select Your State: <select name=”dropdown”> <option value=”delhi”> Delhi</option> <option value=”rajasthan”< Rajasthan</option> <option value=”haryana”> Urdu<option> </select></form> </body> </html>
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.
File Upload Controls
Users से किसी प्रकार की फाईल Upload करवाने के लिए File Upload Control भी एक फॉर्म में Define किया जाता हैं. आप फोटो, Text File या किसी अन्य प्रकार की फाईल फॉर्म द्वारा Upload करवा सकते हैं. इसके लिए <input> Tag का ही इस्तेमाल किया जाता हैं. लेकिन, type Attribute में Value को file लिख दिया जाता हैं.
HTML Form में File Upload Box Define करना
नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.
Submit and Reset Button बनाना
आप एक फॉर्म में विभिन्न प्रकार के HTML Buttons बना सकते हैं. इनमे प्रमुख रूप से Submit और Reset Button का ज्यादा इस्तेमाल किया जाता हैं. आप अन्य प्रकार के Clickable Buttons जैसे Image Button, Send Button आदि भी बना सकते हैं.
HTML Form में Clickable Buttons Define करना
आप Form में Clickable Button <input> Tag द्वारा Define कर सकते हैं. इसके लिए आपको type Attribute में Value को button Define करना हैं. आप नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.
जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.
Grouping Form Data
आप एक ही Form में Users से कई प्रकार की जानकारी पाप्त कर सकते हैं. जिसमें निजी जानकारी, शैक्षिक जानकारी, व्यावसायिक जानकारी आदि हो सकती हैं.
एक प्रकार की जानकारी को आप एक नाम विशेष से शीर्षक दे सकते हैं. इस कार्य को Grouping करना कहते हैं. जिसे Fieldset और Legend Element द्वारा Define किया जाता हैं.
इसे Try कीजिए
<!DOCTYPE html> <html> <head><title> Grouping form Data Example</title></head> <body> <form><fieldset> <legend>Personal Information:</legend> First Name <input type=”text” name=”fname”> Last Name <input type=”text” name=”lname”> </fieldset> <fieldset> <legend>Log in Details:</legend> User ID <input type=”text” name=”ID”> Password <input type=”password” name=”password””> </fieldset> </form> </body> </html>
जब आप ऊपर दिए गए HTMl Code को सेव करके ब्राउजर में खोलेग तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.
आपने क्या सीखा?
इस Lesson में हमने आपको HTML Form की पूरी जानकारी दी हैं. आपने जाना कि एक HTML Form कैसे बनाया जाता हैं? HTML Form में इस्तेमाल होने वाले विभिन्न Data Controls Fields के बारे में भी आपने जाना हैं. हमे उम्मीद हैं कि यह Lesson आपके लिए उपयोगी साबित होगा.
Nice explanation for html in hindi
Nice webside feb …
Age or batao htmal ke BRE me aap ki chait se mene bahut kuch sikha hai
Thank you sir very easily and best notes
यामिनी जी, बहुत-बहुत शुक्रिया.
How to color submit button
शोहेल जी, CSS Class या फिर CSS ID देखर सबमिट बटन को स्टाइलिश बना सकते है.
Thank you sir ji
बहुत ही उम्दा जानकारी दी है, आपने।
aap ismein calender banane ki jankari aur jodh dein toh aur accha rahega