form Elements in HTML: What do you mean by Web Forms?

form Elements in HTML: Web Pages को Interactive बनाने के लिए विभिन्‍न प्रकार की Web Sites पर User से विभिन्‍न प्रकार की Information को प्राप्‍त करने के लिए हमें Form बनाना होता है, जिस पर विभिन्‍न प्रकार के User Interface Controls जैसे कि TextBox, Command Buttons, CheckBox, Option Buttons आदि होते हैं।

हम User से किसी तरह की Information प्राप्‍त करने के लिए जो Form बनाते हैं, उस Form के सभी अवयव <form> Element के बीच ही Include किए जाते हैं। इस Element में अन्‍य XHTML Markups को भी ठीक उसी तरह से उपयोग में लिया जा सकता है, जिस तरह से हम उन्‍हें Web Page के अन्‍य स्‍थानों पर प्रयोग करते हैं।

जब एक बार User अपनी Information को Form में Fill कर देता है, उसके बाद वह Data सामान्‍यतया Web Server पर भेजा जाता है। ऐसा तब होता है, जब User Submit जैसे किसी Button पर Click करता है, हालांकि Button पर दिखाई देने वाला नाम Submit के अलावा कोई और जैसे कि Search, Send या  Proceed आदि भी हो सकता है।

जब User द्वारा भेजी गई जानकारियां Web Server पर पहुंच जाती हैं, तब उन जानकारियों को Process करने के लिए Web Server पर कोई अन्‍य Script या  Program Execute होता है और आने वाली जानकारियों की Processing करने के बाद Generate होने वाले Result को फिर से एक नए Web Page के रूप में User को भेजा जाता है, जिसे वह User अपने Web Browser पर देख सकता है।

उदाहरण के लिए मानलो कि जब हम Google जैसे किसी Search Engine के Text Box में किसी Keyword को Type करके Search नाम के Button पर Click करते हैं, हमारा Type किया गया Keyword Google के Web Server पर जाता है और उन Pages को Search करता है, जिनमें हमारा Keyword होता है तथा प्राप्‍त होने वाले Results को एक नए Web Page के रूप में फिर से User को उसके Web Browser पर भेज देता है।

जब User Form में किसी Data को Fill करता है, तो Web Server पर वह Data name/value Pair के रूप में जाता है, जहां name उस Control का नाम होता है, जिसमें User किसी Data को Fill करता है, जबकि value वह मान होता है, जिसे User ने Control में Fill किया होता है अथवा वह मान होता है, जिसे User ने Select किया जाता है।

यानी यदि Form पर चार Controls हों, तो हमें इस बात का ध्‍यान रखना होता है कि किस Control में कौनसे Data को Fill किया गया है। जब ये Data Web Server पर पहुंचते हैं, तब हर Control के Data को स्‍वतंत्र रूप से Process किया जाता है। आगे एक सामान्‍य Search Form के लिए Example Code दिया गया है:

<form action="http://www.example.org/search.asp" method="get">
<h3>Search the site</h3>
<input type="text" name="txtSearchItem" />
<input type="submit" value="Search" />
</form>

इस उदाहरण में <form> Element में action नाम का एक Attribute है, जिसमें Value के रूप में हमने उस Server Script का URL दिया है, जो Form के Search  किए जाने वाले Data को Process करने का काम करता है और Required Results को Generate करता है। इसी <form> Element में methodनाम का एक और Attribute है, जो इस बात को Specify करता है कि किस HTTP Method का प्रयोग करते हुए Form के Data को Web Server पर भेजा जाएगा। हम get व post नाम के दो प्रकार के HTTP Methods का प्रयोग करके Form के Data को Server पर भेज सकते हैं, जिनके बारे में हम आगे विस्‍तार से जानेंगे, लेकिन इस उदाहरण में हमने method Attribute में get HTTP Method का प्रयोग किया है।

Creating Form

जैसाकि हमने पहले भी कहा कि Form के सभी अवयवों को <form> नाम के Element के बीच लिखा जाता है। साथ ही हम विभिन्‍न प्रकार के अन्‍य XHTML Elements जैसे कि Paragraph, Heading आदि को भी इस Element में उपयोग में ले सकते हैं।

एक बात ध्‍यान रखने वाली ये है कि हम ए‍क <form> Element के किसी दूसरे <form> Element की Nesting नहीं कर सकते हैं, लेकिन हम एक ही Web Page पर एक से ज्‍यादा <form> Element को उपयोग में ले सकते हैं। साथ ही एक <form> Element में action व method Attribute के अलावा हम enctype, accept, accept-charset, onsubmit व onreset Attributes का भी प्रयोग कर सकते हैं।

The action Attribute

इस Attribute द्वारा हम ये तय करते हैं कि जब User Submit Button पर Click करेगा, तब उसके Form में Fill किए गए Data को Process करने के लिए Web Server का कौनसा Page अथवा Program Execute होगा और User के Form के Data को प्राप्‍त करेगा।

उदाहरण के लिए यदि हमारे पास एक Login Form है, जिस पर Username व Password Fill किया है और User, Form पर जो Data Fill करता है, उस Data का Process करने के लिए Web Server पर checkLogin.asp नाम का एक Active Server Page है, जो User द्वारा Input किए जाने वाले Username व Password को Check करने का काम करता है। इस स्थिति में action Attribute में हमें इस Active Server Page URL को निम्‍नानुसार Set करना पडेगा:

<form action=<a href="http://www.demo.com/members/checkLogin.asp">http://www.demo.com/members/checkLogin.asp</a>>

The method Attribute

Form के Data को हम दो तरीकों से Web Server पर भेज सकते हैं और दोनों ही तरीके एक HTTP Method से सम्‍बंधित होते हैं:

पहला Method get Method होता है, जो Form के Data को URL Address के हिस्‍से के रूप में Web Server पर भेजता है। जबकि दूसरा Method post Method होता है, जो कि Form के  Data को HTTP Header में Hide कर देता है। इन Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं:

<form action="<a href="http://www.demo.com/members/checkLogin.asp">http://www.demo.com/checkLogin.asp</a>" <strong>method="get</strong>">
<form action="<a href="http://www.demo.com/members/checkLogin.asp">http://www.demo.com/checkLogin.asp</a>" <strong>method="post</strong>">

The id Attribute

ये Attribute अन्‍य Elements की तरह ही एक Form Element को भी एक Unique Identifier प्रदान करता है। हर Form को एक Unique ID प्रदान करना हमेंशा अच्‍छा रहता है, क्‍योंकि इसका प्रयोग करके हम Form पर किसी Stylesheet या Script को Apply  कर सकते हैं। उस स्थिति में id Attribute का मान किसी Form को Uniquely Identify करने का काम करता है। इस Attribute में हम जो भी मान प्रदान करते हैं, वह मान पूरे Document में Unique होना जरूरी होता है, साथ ही सुविधा की दृ‍ष्टि से Form के अन्‍दर उपयोग में लिए जाने वाले हर ID के नाम की शुरूआत frm शब्‍द से करनी चाहिए, ताकि Server Side Script में भी हमें पता रहे कि हम किस Element के Name/Value Pair के साथ काम कर रहे हैं।

The name Attribute (Deprecated)

ये Attribute id Attribute की तरह ही काम करता है और id Attribute को XHTML में Include करने से पहले id Attribute का काम इसी Attribute से लिया जाता था।

The onsubmit Attribute

जब User Form को Fill करते समय किसी Required मान को Fill किए बिना ही Data को Send करने के लिए Button पर Click कर देता है, तो User को उसकी गलती बताने के लिए किसी ना किसी तरह का Message दिया जाना होता है। ये Message देने के लिए भी हमें किसी ना किसी Client Side Script को Activate करना होता है। इस Client Side Script को Activate करने के लिए हमें इस Script का Address onsubmit Attribute में लिखना होता है।

सामान्‍यतया Client Side Scripting Language के रूप में हम JavaScript का प्रयोग करते हैं, इसलिए इस Attribute में हम Java Script के Function का नाम लिख सकते हैं, जिसमें Form पर Input किए गए Data के Validation का काम किया जाता है। यदि User Form के सभी Required Fields को को पूरी तरह से Fill किए बिना Send करने की कोशिश करता है, तो onsubmit Script Activate होकर सबसे पहले Form के सभी मानों को Check करता है और यदि कोई Required Data Missing होता है, तो वह Script कोई Error Message Generate कर देता है, जिससे Web Server पर अधूरे Data नहीं पहुंचते हैं।

जब User Submit Button पर Click करता है, तब एक Event Fire होता है। ये Event उस Script को Run कर देता है, जिसमें Data Validation का काम होता है और सामान्‍यतया इस Script को onsubmit Attribute में लिखा जाता है।

यदि Form में कोई Required Data Missing नहीं होता है, तो Form के सभी Data Web Server पर पहुंच जाते हैं, अन्‍यथा कोई Error Massage Generate होता है, जो User को Required Missing Data को Fill करने के लिए कहता है। सामान्‍यतया onsubmit Attribute के साथ किसी Java Script Function को निम्‍नानुसार Use किया जाता है:

onsubmit=”validateFormDetails();

यदि हम उपरोक्‍त Statement को उपयोग में लेते हैं, तो ये जरूरी होता है कि validateFormDetails() नाम का Function पहले से <head> Element में Define किया गया हो। इसलिए जब User Submit Button पर Click करता है, तब ये Function Execute हो जाता है, और Form के Data का Validation करता है।

यदि Data Valid होते हैं, तो Data को Web Server पर भेज दिया जाता है और यदि Data Valid नहीं होते हैं, तो User को Required Data Input करने के लिए Message दिया जाता है। Data को Web Server पर भेजने से पहले Check करने के दो फायदे होते हैं: पहला ये कि Network का Traffic नहीं बढता है और दूसरा ये कि Web Server को सभी तरह की Checking करने का काम नहीं करना पडता है, बल्कि ये काम Client Browser में ही हो जाता है।

The onreset Attribute

जब User Form को Fill करते समय अचानक पूरे Form के सभी Controls के Data को Clear करना चाहता है, तब Reset Button में इस Attribute को उपयोग में लिया जाता है।

The enctype Attribute

यदि हम Form के  Data को Send करने के लिए HTTP post Method का प्रयोग करते हैं, तब हम इस Attribute का प्रयोग करके Browser को ये बताते हैं, कि वह हमारे Form के Data को Web Server पर भेजने से पहले किस तरह से Encode करेगा, ताकि हमारे Data सुरक्षित तरीके से Web Server पर पहुंचें। हमारा Browser दो तरह की Encodings को उपयोग में ले सकता है:

• application/x-www-form-urlencoded

Forms के साथ उपयोग में आने वाला ये एक Standard Method है। ये Spaces को Plus Sign में Convert कर देता है और सभी Non-Alphanumerical Characters को उसके ASCII Code के आधार पर Hexadecimal Characters में Convert कर देता है।

• multipart/form-data

इस Encoding में Form के सभी Controls के Data को अलग-अलग हिस्‍सों में Web Server पर भेजा जाता है। जो Control Form पर पहले Appear होता है, उसके Data Web Server पर पहले पहुंचते हैं, जबकि जो Control Form पर बाद में Appear होता है, उसके Data Web Server पर बाद में पहुंचते हैं। Form के हर हिस्‍से का एक Optional content-type Header हो सकता है, जो उस Form Control के Data के Type को Indicate करता है।

हम इस Attribute को तब उपयोग में लेते हैं, जब User किसी File को Server पर Upload करना चाहता है अथवा किसी Non-ASCII Character को Use करना चाहता है। इस स्थिति में enctype Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं:

enctype=”multipart/form-data”

The accept-charset Attribute

इस Attribute में हम उन Character Encodings की एक List को Specify करते हैं, जिन्‍हें एक User Input कर सकता है और उन Characters को Web Server Process कर सकता है। IE 6 व Netscape 7 इस Attribute को Support नहीं करते हैं, इसलिए हमें इस Attribute का प्रभाव देखने के लिए इनसे आगे के Versions को उपयोग में लेना पडता है। इस Attribute में हम जिन Character Sets को Use करना चाहते हैं, उन्‍हें एक Comma Separated List के रूप में Specify करना होता है।

उदाहरण के लिए निम्‍न Statement इस बात को Indicate करता है कि हमारा Web Server UTF-8 Encoding को Accept करने में सक्षम है:

accept-charset=”utf-8″

The accept Attribute

इस Attribute में accept-charset Attribute के समान ही है और इस Attribute को भी IE 6 व Netscape 7 तक के Versions Support नहीं करते हैं। इस Attribute को उपयोग में लेने का Concept ये है कि User केवल उन्‍हीं Character Encoding Files को Upload कर सकता है, जिन्‍हें इस Attribute में Specify किया गया है। यदि हम चाहते हैं कि User केवल GIF अथवा JEPG Files को ही Upload कर सके, तो इस जरूरत को पूरा करने के लिए इस Attribute को हम निम्‍नानुसार उपयोग में ले सकते हैं(form Elements in HTML):

accept =”image/gif, image/jpg”