Introduction TO HTML Form.

                                                 HTML Forms Tutorial

जब आप साइट आगंतुक से कुछ डेटा एकत्र करना चाहते हैं तो HTML फॉर्म की आवश्यकता होती है। उदाहरण के लिए पंजीकरण की जानकारी: नाम, ईमेल पता, क्रेडिट कार्ड, आदि।

 एक फॉर्म साइट विज़िटर से इनपुट लेगा और फिर आपके बैक-एंड एप्लिकेशन जैसे सीजीआई, एएसपी स्क्रिप्ट या पीएचपी स्क्रिप्ट आदि को पोस्ट करेगा। फिर आपका बैक-एंड एप्लिकेशन उस डेटा पर आवश्यक प्रोसेसिंग करेगा, जो भी आपको पसंद है।

प्रपत्र तत्व टेक्स्ट फ़ील्ड, टेक्स्टारिया फ़ील्ड, ड्रॉप-डाउन मेनू, रेडियो बटन, चेकबॉक्स आदि जैसे हैं, जिनका उपयोग उपयोगकर्ता से जानकारी लेने के लिए किया जाता है।

<Form> का उपयोग करने का एक सरल वाक्यविन्यास इस प्रकार है:

HTML फॉर्म का उपयोग किसी सर्वर में डेटा पास करने के लिए किया जाता है।

HTML फॉर्म में टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो-बटन, सबमिट बटन आदि जैसे इनपुट तत्व हो सकते हैं। एक फॉर्म में चुनिंदा सूचियां, टेक्सारिया, फील्डसेट, लीजेंड और लेबल तत्व भी हो सकते हैं।

<form> . input elements . </form>

या

<form action="back-end script" method="posting method">     form elements like input, textarea etc. </form>

सबसे अधिक बार उपयोग किए जाने वाले फ़ॉर्म गुण हैं:

1 name: यह फॉर्म का नाम है।

2 action: क्रिया: यहां आप कोई भी स्क्रिप्ट URL निर्दिष्ट करेंगे जो अपलोड किया गया डेटा प्राप्त करेगा।

3 method विधि: यहां आप डेटा अपलोड करने के लिए उपयोग की जाने वाली विधि को निर्दिष्ट करेंगे। यह विभिन्न मूल्यों को ले सकता है लेकिन सबसे अधिक बार उपयोग किए जाने वाले GET और POST हैं।

4 target: लक्ष्य: यह लक्ष्य पृष्ठ को निर्दिष्ट करता है जहां स्क्रिप्ट का परिणाम प्रदर्शित किया जाएगा। यह मान लेता है जैसे _blank, _self, _parent आदि।

5 enctype: आप यह निर्दिष्ट करने के लिए कि डेटा को सर्वर पर भेजने से पहले वह डेटा को कैसे एनकोड करता है, यह एनक्टाइप विशेषता का उपयोग कर सकता है। संभावित मूल्य इस प्रकार हैं:

            5.1 application / x-www-form-urlencoded - यह मानक विधि है जिसका अधिकांश रूप उपयोग करते हैं। यह ASCII पाठ में उस चिह्न के लिए रिक्त स्थान को गैर-अल्फ़ान्यूमेरिक वर्णों में हेक्साडेसिमल कोड में परिवर्तित करता है।

         5.2 mutlipart / form-data - यह डेटा को पुर्जों में भेजने की अनुमति देता है, प्रत्येक लगातार भाग में एक प्रपत्र नियंत्रण होता है, जिस क्रम में वे प्रपत्र में दिखाई देते हैं। प्रत्येक भाग में अपने स्वयं के वैकल्पिक कंटेंट प्रकार के हेडर हो सकते हैं जो उस फॉर्म नियंत्रण के लिए डेटा के प्रकार को दर्शाते हैं।

विभिन्न प्रकार के फ़ॉर्म नियंत्रण हैं जिनका उपयोग आप अपनी साइट के आगंतुक से डेटा एकत्र करने के लिए कर सकते हैं।

1 पाठ इनपुट नियंत्रण Text input controls

2 बटन Buttons

3 चेकबॉक्स और रेडियो बटन Checkboxes and radio buttons

4 बक्से का चयन करें Select boxes

5 फ़ाइल का चयन करें बक्से File select boxes

6 छिपे हुए नियंत्रण Hidden controls

7 बटन सबमिट करें और रीसेट करें Submit and reset button

HTML Forms - Text Input Controls:HTML प्रपत्र - पाठ इनपुट नियंत्रण:

प्रपत्रों पर वास्तव में तीन प्रकार के पाठ इनपुट का उपयोग किया जाता है:

Single-line text input controls एकल-पंक्ति पाठ इनपुट नियंत्रण: उन मदों के लिए उपयोग किया जाता है जिनके लिए उपयोगकर्ता इनपुट की केवल एक पंक्ति की आवश्यकता होती है, जैसे कि खोज बॉक्स या नाम। वे <input> तत्व का उपयोग करके बनाए गए हैं।

Password input controls पासवर्ड इनपुट नियंत्रण: एकल-लाइन पाठ इनपुट जो एक उपयोगकर्ता द्वारा दर्ज किए गए पात्रों को मुखौटा बनाता है।

Multi-line text input controls मल्टी-लाइन टेक्स्ट इनपुट नियंत्रण: उपयोग किया जाता है जब उपयोगकर्ता को विवरण देने के लिए आवश्यक होता है जो एक वाक्य से अधिक लंबा हो सकता है। मल्टी-लाइन इनपुट नियंत्रण <textarea> तत्व के साथ बनाए जाते हैं।

एकल-पंक्ति पाठ इनपुट नियंत्रण: Single-line text input controls:

Single-line text input controls:एकल-पंक्ति पाठ इनपुट नियंत्रण  <input> तत्व का उपयोग करके बनाए जाते हैं जिनके प्रकार की विशेषता में पाठ का मान होता है।

यहाँ पहले नाम और अंतिम नाम लेने के लिए उपयोग किए जाने वाले एकल-पंक्ति पाठ इनपुट का एक मूल उदाहरण है:

<form action="/cgi-bin/hello_get.cgi" method="get"> First name: <input type="text" name="first_name" /> <br> Last name: <input type="text" name="last_name" /> <input type="submit" value="submit" /> </form>

आउटपुट

<input> टैग के लिए विशेषताओं की सूची निम्नलिखित है।

type प्रकार: उस इनपुट नियंत्रण के प्रकार को इंगित करता है जिसे आप बनाना चाहते हैं। इस तत्व का उपयोग अन्य फॉर्म नियंत्रण जैसे रेडियो बटन और चेकबॉक्स बनाने के लिए भी किया जाता है।

name नाम: नाम / मूल्य जोड़ी का नाम भाग देने के लिए उपयोग किया जाता है जो सर्वर को भेजा जाता है, प्रत्येक प्रपत्र नियंत्रण और उपयोगकर्ता द्वारा दर्ज मूल्य का प्रतिनिधित्व करता है।

value मूल्य: पाठ इनपुट नियंत्रण के लिए एक प्रारंभिक मूल्य प्रदान करता है जिसे उपयोगकर्ता प्रपत्र लोड होने पर देखेगा।

size आकार: आपको वर्णों के संदर्भ में पाठ-इनपुट नियंत्रण की चौड़ाई निर्दिष्ट करने की अनुमति देता है।

maxlength: आपको अधिकतम उन वर्णों को निर्दिष्ट करने की अनुमति देता है जो उपयोगकर्ता टेक्स्ट बॉक्स में दर्ज कर सकता है।

                                                 Password input controls::

यह एक एकल-पंक्ति पाठ इनपुट नियंत्रण का एक रूप भी है जो <input> तत्व का उपयोग करके बनाया जाता है जिसका प्रकार विशेषता पासवर्ड का मान है।

यहां उपयोगकर्ता पासवर्ड लेने के लिए उपयोग किए जाने वाले एकल-लाइन पासवर्ड इनपुट का एक मूल उदाहरण है:

<form action="/cgi-bin/hello_get.cgi" method="get"> Login : <input type="text" name="login" /> <br> Password: <input type="text" name="password" /> <input type="submit" value="submit" /> </form>

आउटपुट

Multiple-Line Text Input Controls:

यदि आप अपनी साइट पर एक आगंतुक को पाठ की एक से अधिक पंक्ति दर्ज करने की अनुमति देना चाहते हैं, तो आपको <textarea> तत्व का उपयोग करके एक बहु-पंक्ति पाठ इनपुट नियंत्रण बनाना चाहिए।

आइटम विवरण लेने के लिए उपयोग किए जाने वाले बहु-पंक्ति पाठ इनपुट का एक मूल उदाहरण यहां दिया गया है:

<form action="/cgi-bin/hello_get.cgi" method="get"> Description : <br /> <textarea rows="5" cols="50" name="description"> Enter description here... </textarea> <input type="submit" value="submit" /> </form>

आउटपुट

निम्नलिखित <textarea> टैग के लिए ऊपर उपयोग की गई विशेषताओं का विवरण है।

name नाम: नियंत्रण का नाम। यह नाम / मान जोड़ी में उपयोग किया जाता है जो सर्वर को भेजा जाता है।

rows पंक्तियाँ: पाठ क्षेत्र बॉक्स की पंक्तियों की संख्या को इंगित करता है।

cols: पाठ क्षेत्र बॉक्स के कॉलम की संख्या को दर्शाता है।

                                                 HTML Forms - Creating Button:

क्लिक करने योग्य बटन बनाने के लिए HTML में विभिन्न तरीके हैं। आप <input> टैग का उपयोग करके क्लिक करने योग्य बटन बना सकते हैं।

जब आप एक बटन बनाने के लिए <input> तत्व का उपयोग करते हैं, तो आपके द्वारा बनाया गया बटन प्रकार विशेषता का उपयोग करके निर्दिष्ट किया जाता है। प्रकार विशेषता निम्नलिखित मान ले सकती है:

submit सबमिट करें: यह एक बटन बनाता है जो स्वचालित रूप से एक फॉर्म सबमिट करता है।

reset रीसेट: यह एक बटन बनाता है जो स्वचालित रूप से अपने प्रारंभिक मूल्यों पर नियंत्रण को रीसेट करता है।

button: बटन: यह एक बटन बनाता है जिसका उपयोग क्लाइंट-साइड स्क्रिप्ट को ट्रिगर करने के लिए किया जाता है जब उपयोगकर्ता उस बटन पर क्लिक करता है।

यहाँ उदाहरण है:

<form action="http://www.example.com/test.asp" method="get"> <input type="submit" name="Submit" value="Submit" /> <br /><br /> <input type="reset" value="Reset" /> <input type="button" value="Button"  /> </form>

आउटपुट

आप एक बटन बनाने के लिए एक छवि का उपयोग कर सकते हैं। यहाँ वाक्य रचना है:

<form action="http://www.example.com/test.asp" method="get"> <input type="image" name="imagebutton" src="URL" /> </form>

You can use <button> element to create various buttons. Here is the syntax:

<form action="http://www.example.com/test.asp" method="get"> <button type="submit">Submit</button> <br /><br /> <button type="reset"> Reset </button> <button type="button"> Button </button> </form>

HTML Forms - Checkboxes Control:

चेकबॉक्स का उपयोग तब किया जाता है जब एक से अधिक विकल्प का चयन करना आवश्यक होता है। वे नीचे दिखाए गए अनुसार <input> टैग का उपयोग करके बनाए गए हैं।

यहां दो चेकबॉक्स के साथ एक फॉर्म के लिए उदाहरण HTML कोड है

<form action="/cgi-bin/checkbox.cgi" method="get"> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics <input type="submit" value="Select Subject" /> </form>

निम्नलिखित महत्वपूर्ण चेकबॉक्स विशेषताओं की सूची है:

type प्रकार: इंगित करता है कि आप एक चेकबॉक्स बनाना चाहते हैं।

name नाम: नियंत्रण का नाम।

value मान: मान जो चेकबॉक्स चयनित होने पर उपयोग किया जाएगा। एक से अधिक चेकबॉक्स को एक ही नाम साझा करना चाहिए, यदि आप उपयोगकर्ताओं को एक ही सूची से कई आइटम चुनने की अनुमति देना चाहते हैं।

checked: चेक किया गया: इंगित करता है कि जब पृष्ठ लोड होता है, तो चेकबॉक्स का चयन किया जाना चाहिए।

                                              HTML Forms - Raido box Control:

रेडियो बटन का उपयोग तब किया जाता है जब केवल एक विकल्प का चयन करना आवश्यक होता है। वे नीचे दिखाए गए अनुसार <input> टैग का उपयोग करके बनाए गए हैं:

यहाँ दो रेडियो बटन के साथ एक फॉर्म के लिए उदाहरण के लिए HTML कोड है:

<form action="/cgi-bin/radiobutton.cgi" method="post"> <input type="radio" name="subject" value="maths" /> Maths <input type="radio" name="subject" value="physics" /> Physics <input type="submit" value="Select Subject" /> </form>

निम्नलिखित महत्वपूर्ण रेडियोोबॉक्स विशेषताओं की सूची है:

type प्रकार: इंगित करता है कि आप रेडियोबॉक्‍स बनाना चाहते हैं।

name नाम: नियंत्रण का नाम।

value मूल्य: इस विकल्प को चुनने पर सर्वर को भेजे जाने वाले मूल्य को इंगित करने के लिए उपयोग किया जाता है।

checked चेक किया गया: यह बताता है कि पेज लोड होने पर यह विकल्प डिफ़ॉल्ट रूप से चुना जाना चाहिए।

                              HTML Forms - Select box Control:

ड्रॉप डाउन बॉक्स का उपयोग तब किया जाता है जब हमारे पास चयनित होने के लिए कई विकल्प उपलब्ध होते हैं लेकिन केवल एक या दो का चयन किया जाएगा।

यहाँ एक ड्रॉप डाउन बॉक्स के साथ फॉर्म के लिए उदाहरण के लिए HTML कोड है

<form action="/cgi-bin/dropdown.cgi" method="post">

<select name="dropdown">

<option value="Maths" selected>Maths</option>

<option value="Physics">Physics</option>

</select>

<input type="submit" value="Submit" />

</form>

निम्नलिखित महत्वपूर्ण विशेषताओं की सूची है <select>:

name नाम: यह नियंत्रण का नाम है।

size आकार: इसका उपयोग स्क्रॉल सूची बॉक्स प्रस्तुत करने के लिए किया जा सकता है।

multiple एकाधिक: यदि "एकाधिक" पर सेट है, तो उपयोगकर्ता को मेनू से कई आइटम चुनने की अनुमति देता है।

निम्नलिखित  <option>की महत्वपूर्ण विशेषताओं की सूची है:

value मान: यह विकल्प चुने जाने पर सर्वर को भेजा जाने वाला मान।

selected चयनित: निर्दिष्ट करता है कि पेज लोड होने पर यह विकल्प शुरू में चयनित मूल्य होना चाहिए।

label लेबल: लेबलिंग विकल्पों का एक वैकल्पिक तरीका।

                                     HTML Forms - File Select Boxes:

यदि आप किसी उपयोगकर्ता को अपने कंप्यूटर से अपनी वेब साइट पर फ़ाइल अपलोड करने की अनुमति देना चाहते हैं, तो आपको एक फ़ाइल अपलोड बॉक्स का उपयोग करना होगा, जिसे फ़ाइल चयन बॉक्स के रूप में भी जाना जाता है। यह भी <input> तत्व का उपयोग करके बनाया गया है।

यहाँ उदाहरण के लिए एक फ़ाइल चयन बॉक्स के साथ फ़ॉर्म के लिए HTML कोड है

<form action="/cgi-bin/hello_get.cgi" method="post"       name="fileupload" enctype="multipart/form-data"> <input type="file" name="fileupload" accept="image/*" /> </form>

HTML Forms - Hidden Controls:

यदि आप पृष्ठों को देखने वाले उपयोगकर्ता के बिना जानकारी देना चाहते हैं। छिपे हुए प्रपत्र नियंत्रण किसी भी रूप का हिस्सा होते हैं, लेकिन उपयोगकर्ता उन्हें वेब ब्राउज़र में नहीं देख सकता है। उन्हें किसी भी संवेदनशील जानकारी के लिए उपयोग नहीं किया जाना चाहिए जिसे आप उपयोगकर्ता को नहीं देखना चाहते क्योंकि उपयोगकर्ता इस डेटा को देख सकता है यदि वह पृष्ठ के स्रोत में दिखता है।

वर्तमान पृष्ठ संख्या को बनाए रखने के लिए छिपे हुए फ़ॉर्म का उपयोग किया जा रहा है। जब कोई उपयोगकर्ता अगले पृष्ठ पर क्लिक करेगा तो छिपे हुए फॉर्म का मूल्य बैक-एंड एप्लिकेशन को भेजा जाएगा और यह तय करेगा कि कौन सा पेज अगले प्रदर्शित किया गया है।

<form action="/cgi-bin/hello_get.cgi"          method="get" name="pages"> <p>This is page 10</p> <input type="hidden" name="pgaenumber" value="10" /> <input type="submit" value="Next Page" /> </form>

HTML Forms - Submit and Reset Button:

ये विशेष बटन हैं जो <input> का उपयोग करके बनाए जा सकते हैं जब सबमिट बटन पर क्लिक किया जाता है तब फॉर्म डेटा बैक-एंड एप्लिकेशन को सबमिट किया जाता है। जब रीसेट बटन पर क्लिक किया जाता है तो सभी फॉर्म कंट्रोल को डिफ़ॉल्ट स्थिति पर रीसेट कर दिया जाता है।

आपने पहले ही ऊपर सबमिट बटन देखा है, हम यहां एक रीसेट उदाहरण देंगे:

<form action="/cgi-bin/hello_get.cgi" method="get"> First name: <input type="text" name="first_name" /> <br> Last name: <input type="text" name="last_name" /> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </form>