form in html

 From Tage in HTML 

form

Note:- HTML से form की सिर्फ़ design की जा सकती है। एक functional form बनाने के लिये हमें कोई server-side scripting (जैसे php, Asp.net आदि) की जरूरत पडेगी जिसे हम बाद में इसी blog में cover करेंगे।
क्या आप जानते हैं कि Google का Search Box भी एक HTML Form ही हैं?
        Forms में Users द्वारा जरूरी जानकारी को भरा जाता हैं. और इस जब submit butan (search butan) पर क्लिक करते हे जब जानकारी को Server पर भेज दिया जाता हैं. जहाँ से इसे Webmasters Access कर पाते हैं.


         किसी भी webpage में forms create करने के लिए आप <form> tag यूज़ करते है। ये container tag होता है जो की पुरे HTML form की beginning और ending define करता है। इस tag के अंदर अलग अलग form elements define किये जाते है।

HTML Form का Syntax

नीचे Form Syntax दिया जा रहा हैं.

code 

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 से करवाना चाहते हैं से actionAttribute द्वारा Define किया जाता हैं.
• Method – आप Form Data को जिस Method से Submit करवाना चाहते हैं उसे Method Attribute से Define किया जाता हैं. यदि आपका Data में संवेदनशील या निजि जानकारी शामिल हैं तो आपको PostMethod Define करनी चाहिए. नही तो आप Get Method को Use कर सकते हैं.
• Target – आप Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं.

Form में विभिन्न प्रकार के Data Fields बनाना

HTML Form द्वारा Users से कई प्रकार की जानकारी प्राप्त की जाती हैं. इस कार्य के लिए अलग-अलग प्रकार के Data के लिए भिन्न-भिन्न Data Fields की जरूरत होती हैं. ताकि Users से प्राप्त Data को छांटा जा सके. नीचे हम आपको एक फॉर्म में इस्तेमाल होने वाले Data Input Fields के नाम और उपयोग बता रहे हैं.

Text Input Controls

<input>

Form elements आप HTML <input> tag के द्वारा define करते है। इस tag के कुछ attributes होते है जो आप elements को configure करने के लिए यूज़ करते है।

name

इस attribute से particular form element का नाम define किया जाता है। बाद में यही नाम server पर values को store करने के लिए यूज़ किया जाता है।   

type

ये element का type show करता है। इससे ये भी पता चलता है की किस तरह की value input की जा सकती है। जैसे text-boxes के लिए type text होता है।

size

इससे आप किसी form element की size width में define करते है। जैसे की आप किसी text-box को अपने according width दे सकते है।

value

ये किसी element की default value हो सकती है। जैसे की आप किसी text box के अंदर first name लिखा हुआ देखते है। आइये अब देखते है की इन tags और attributes को यूज़ करते हुए आप कैसे एक complete form create कर सकते है।

code 

Submit and Reset Button बनाना

आप एक फॉर्म में विभिन्न प्रकार के HTML Buttons बना सकते हैं. इनमे प्रमुख रूप से Submit और Reset Button का ज्यादा इस्तेमाल किया जाता हैं. आप अन्य प्रकार के Clickable Buttons जैसे Image Button, Send Button आदि भी बना सकते हैं.

code 

HTML Form में Radio Button Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

code 

Form में Drop-down List/Select Box बनाना

आप फॉर्म में Drop-down List भी बना सकते हैं, इसे Select Box Control के नाम से भी जाना जाता हैं. इस प्रकार के Input Control को <select> Tag द्वारा Define किया जाता हैं, और <option> Tag द्वारा विकल्पों को Define किया जाता हैं.

code 

Form Check Box

जब Users को एक से ज्यादा विकल्प को चुनना पडता हैं तो इसके लिए Check Boxes का इस्तेमाल किया जाता हैं. इसे भी <input> Tag द्वारा ही Define किया जाता हैं. लेकिन, type Attribute की Value को checkbox लिख दिया जाता हैं.

code  

Grouping Form Data

आप एक ही Form में Users से कई प्रकार की जानकारी पाप्त कर सकते हैं. जिसमें निजी जानकारी, शैक्षिक जानकारी, व्यावसायिक जानकारी आदि हो सकती हैं.

एक प्रकार की जानकारी को आप एक नाम विशेष से शीर्षक दे सकते हैं. इस कार्य को Grouping करना कहते हैं. जिसे Fieldset और Legend Element द्वारा Define किया जाता हैं.