Introduction to HTML Forms
किसी भी webpage पर यदि आप यूज़र से कोई information लेना चाहते है तो इसके लिए आप forms का इस्तेमाल करते है। उदाहरण के लिए जब भी आप कोई नयी email id create करते है तो सबसे पहले sign up form भरते है। ऐसा करके आप अपनी information webpage के द्वारा provide करते है।
Forms यूज़र से input प्राप्त करने का सबसे common तरीका होता है। कोई भी form यूज़र से input लेता है और जब यूज़र उस form को submit करता है तो ये सारी information किसी database में store कर ली जाती है। User से information input करवाने के लिए आप कई प्रकार के form elements यूज़ कर सकते है। जैसे की text-box, radio button, drop-down list आदि।
किसी भी webpage में forms create करने के लिए आप <form> tag यूज़ करते है। ये container tag होता है जो की पुरे form की beginning और ending define करता है। इस tag के अंदर अलग अलग form elements define किये जाते है। <form> tag के कुछ attributes के बारे में नीचे दिया जा रहा है।
| Attribute | Explanation |
| action | इस attribute से आप define करते है की form submit होने पर क्या करना है। जैसे की यूज़र के form submit करते ही आप कोई दूसरे webpage में thank you message शो कर सकते है या कोई php script execute करवा सकते है। |
| method | इस attribute से आप data को store करने का method define करते है। इस attribute की केवल 2 values GET या POST हो सकती है। |
| target | इससे आप form submission के बाद जो window show होगी वह define करते है। |
Form elements आप <input> tag के द्वारा define करते है। इस tag के कुछ attributes होते है जो आप elements को configure करने के लिए यूज़ करते है। इनके बारे में नीचे दिया जा रहा है।
| Attribute | Explanation |
| 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 कर सकते है।
Creating Text Boxes
HTML में forms के लिए text-boxes क्रिएट करना बहुत ही easy है। इसके लिए आप <input> tag के type attribute में text value define करते है। कोई भी default value देने के लिए जो text-box के अंदर show होगी आप value attribute यूज़ कर सकते है। यदि आप password input करने के लिए text-box बना रहे है तो type password देना होगा। इसका उदाहरण नीचे दिया जा रहा है।
| <html>
<head> <title>Text box demo</title> </head> <body> <form> Enter your email :<input type=”text” value=”Email…” name=”email” size=” 20″> <br><br> Enter your password :<input type=”password” value=”Password…” name=”pass” size=”20″> </form> </body> </html> |
ऊपर दी गयी script निचे दिया गया web page generate करेगी।
Creating Buttons
HTML में आप 4 तरह से buttons क्रिएट कर सकते है। इन्हे आप type attribute के द्वारा define करते है। इनके बारे में नीचे दिया जा रहा है।
- Submit – ये button form submit करने के लिए यूज़ किया जाता है। ये button पुरे form के सभी elements की values को एक साथ server पर send कर देता है। आप type attribute में submit value define करके इस तरह का button क्रिएट कर सकते है।
- Reset – इस button को पुरे form के सभी fields की values को reset करने के लिए यूज़ किया जाता है। Reset button create करने के लिए आप type attribute में reset value define करते है।
- Normal button – ये एक normal button होता है जिस पर click होते ही आप कोई भी action ले सकते है। इस तरह का button क्रिएट करने लिए आप type attribute के value button देते है।
- Image button – इस तरह के button में आप button के background में कोई image दे सकते है। इस तरह का button create करने के लिए आप type attribute की value image देते है।
| <html>
<head> <title>Button demo</title> </head> <body> <form> <input type=”submit”> <input type=”reset”> <input type=”button” value=”Click here”> <input type=”image” src=”image URL” alt=”text to show”> </form> </body> </html> |
ऊपर दी गयी script निचे दिया गया web page generate करती है।
Creating Radio Buttons
Radio buttons के द्वारा यूज़र बिना keyboard के webpage को information provide करता है। Radio button एक गोल box होता है जिसे choose करके user अपनी choice बताता है। जैसे की यदि आप user के gender के बारे में जानना चाहते है तो आप 2 radio buttons create करके उनके नाम male और female दे सकते है। यूजर इनमे से कोई भी choose करके अपना gender बता सकता है। आप 2 या 2 से अधिक radio buttons को name attribute के द्वारा connect कर देते है ताकि user एक समय पर केवल एक ही radio button select सके। जिन radio buttons को आप आपस में connect करना चाहते उनके आप name same देते है।
Radio button क्रिएट करने के लिए आप <input> tag के type attribute की value radio देते है। Name attribute में radio button का नाम दिया जाता है। जैसा की मैने ऊपर बताया यदि आप Radio buttons का group बनाना चाहते है ताकि user एक बार में सिर्फ एक ही radio button select कर सके तो ऐसी situation में आप सभी radio buttons को एक ही नाम देते है। इसका उदाहरण नीचे दिया जा रहा है।
| <html>
<head> <title>Radio Button Demo </title> </head> <body> <form> Select your Gender: <br> <input type=”radio” name=”gender”> Male <input type=”radio” name=”gender”> Female </form> </body> </html> |
ऊपर दी गयी script निचे दिया गया web page generate करती है।
Creating Drop Down List
Drop down list create करने के लिए आप <select> tag इस्तेमाल करते है। इस tag को form tag के अंदर define किया जाता है। ये tag drop down list का structure क्रिएट करता है। Drop down list की values define करने के लिए <option> tag को define किया जाता है। आप जितने list item add करना चाहते है उतने ही <option> tag define करते है। <option> tag को <select> tag में define किया जाता है। इसका उदाहरण नीचे दिया गया है।
| <html>
<head> <title>Drop down list demo </title> </head> <body> <form> <select> <option>Select</option> <option value=”Male”>Male</option> <option value=”Female”>Female</option> </select> </form> </body> </html> |
ऊपर दी गयी script निचे दिया गया web page generate करती है।
Creating Check Boxes
Check boxes के द्वारा किसी भी user को multiple options को choose करने के facility दी जाती है। जैसे की यदि आप चाहते है की user multiple courses choose करे तो आप check boxes create कर सकते है और user उन्हें select कर सकता है।
Check boxes क्रिएट करना बहुत ही आसान होता है। इसके लिए आप <input> tag के type attribute में check box value देते है और Name attribute में check-box का नाम देते है। Value attribute की value भी आप दे सकते है। इसका उदाहरण नीचे दिया गया है।
| <html>
<head> <title>Check box demo </title> </head> <body> <form> <input type=”checkbox” name=”MCA” > MCA <input type=”checkbox” name=”BTECH”> Btech <input type=”checkbox” name=”BCA”>BCA <input type=”checkbox” name=”BCA”>M. tech </form> </body> </html> |
ऊपर दी गयी script निचे दिया गया web page generate करती है।