Html form-text box buttons checkbox radio buttons

HTML FORM : LOGIN AND SIGNUP

Form :- फार्म को users से सुचना एकत्रित करने के लिए मै लिया जाता है यह सुचना text के रूप में एकत्रित कि जाती है ,drop down list में से कोई ऑप्शन का भी चयन किया जाता है , check boxes का भी चयन कर सकते है , radio button में से अपनी पसंद का चयन कर सकते है तथा बाद में form पर दी गई सुचना को web server पर आगे कि processing के लिए भेज सकते है

किसी भी web form के बनाने के पीछे कारण होता है –web form ,users से सुचना तथा प्रतिउत्तर प्राप्त करने कि अनुमति डेटा है बाद में यह डाटा एक web server पर भेज दिया जाता है web server इससे प्राप्त डाटा को किसी को script या किसी प्रोग्राम को देता है तथा यह डाटा का प्रतिउत्तर user तक पहुच देता है किसी web पेज में फार्म को शामिल करने क लिए प्रारम्भ टैग <form >तथा अंतिम टैग </form > लगाया जाता है

Syntax :

<form method = “How to send”Action = “URL of script”>

<form> Tag  के अंदर दो attributes होते है

-method

-Action

Method:-

Method के साथ उसकी value के रूप मै post या get दिया जाता है post अधिक प्रचलित है क्योकि  यह एक बार मै अधिक डेटा भेजने कि  छमता रखता है get का उपयोग करना webmasters के लिए आसान होता है तथा अशिकंशतः इसका उपयोग एक ही एंट्री को लेने क लिए किया जाता है

Action:-

Action attribute script का URL  लेना है यह व्ही script है जिसके पास एस form कि एंट्रीज़ भेजी जाती है अधिकार यह script एक directory मै रखी जाती है जिसका नाम bin/ या cgi .bin/ हो सकता है यह dicrectory आपके web sever पर स्थित होती है

Example :- 

<Form method = “post”Action = “//cgi .bin/register “>

Note :- <form >तथा </form > tags के भीतर form सम्मिलित किये जाने वाले सभी objects के लिए coding करनी होती है इसके अतिरिक्त html के अन्य tags का भी उपयोग कर सकते है  

Form मै सम्मिलित किये जाने अले ऑब्जेक्ट निम्न है –

Text Box :- text कि एक ही line लिखने के लिए जेसे :- name ,address ,city  etc.

List Box :-एक drop down list मै उपलब्ध कई ऑप्शन मै से एक का चयन करने के लिए .

Check Box :- निधारित ऑप्शन के समूह में से अपनी पसंद के कितने भी ऑप्शनस  का चयन करने कि अनुमति होती है

Radio Button :- पूर्व निर्धारित ऑप्शनस के समूह में से एक और सिर्फ एक ही ऑप्शन का चयन करने कि अनुमति होती है

Edit Box :- एक से अधिक लाइनों वाले text लिखने क लिए यह box उपयोगी है अत : यह text box का बड़ा रूप माना जाता है

Button :- form में इसका होना अति आवश्यक है एस पर click करके ही form के अंदर डाली गई value को server तक भेजा जाता है  

Text Box :-

इसका उपयोग एक line का text लिखने के लिए किया जाता है जेसे नाम , पता ,शहर  आदि .

Syntax : <input type = “text “>

यहाँ <input> tag यह बताता है कि इस object में user द्वारा दिया जाने वाला input आने वाला है text box मै कम आने वाले <input > टैग  के साथ कई attribute होते है जिन्हें भी शामिल किया जा सकता है ये attribute निम्न है :-

1. Type – यह attributes यह दर्शाता है कि आने वाला कण्ट्रोल किस प्रकार का होगा /Type = “text ” देने पर एक text box आ जाता है 

 2 . Name – समिलित किये जाने वाले कण्ट्रोल का नाम |

3 . Value – कण्ट्रोल कि प्रारम्भिक नाम (value ).

4.Size – Control की प्रारम्भिक size अर्थात एक बी line में text box कितना बड़ा नजर आता आएगा | उसकी width character में नपी जाती है  

5. Maxlenght – Text Box में लिखी जा सकने वाली अधिकतम character number .

Radio Button :-

इस button को ऑप्शन button भी कहा जाता है

Syntax  : <input type  =”Radio “>

radio बटन के साथ निम्न attribute भी शामिल किये जाते है

1 . Value :- रेडियो बटन में मान देना आवश्यक है radio button के एक पुरे समुह के प्रत्येक ऑप्शन के लिए मान अलग- अलग होना चाहिए |

2 . Name :- radio बटन के लिए नाम देना आवश्यक है value attribute के विपरीत पुरे समूह के प्रत्येक ऑप्शन के लिए नाम एक जेसा होना आवश्यक है

3. Checked :- रेडियो बटन के समूह में डिफाल्ट value देने के लिए इसे देना आवश्यक है एक समूह में एक से अधिक ऑप्शन checked नही हो सकते है यदि आप इसे नही देते है तो कोई भी ऑप्शन चयनित नही होगा |

Check Boxes :-   

रेडिओ बटन के विपरीत हम check बॉक्स के एक समूह में से कितने भी check बॉक्स का चयन कर सकते है

Syntax  : <input type =”Check box “>

चेक बॉक्स में प्रयुक्त टैग निम्न्लिखित है

1.Value :- 
उन check boxes कि value server तक भेज दी जाती है जिन्हें On किया जाता है

2.Name :- 
विभिन check बॉक्स के नाम एक जेसे या भिन्न –भिन्न हो सकगे | यदि नाम एक जेसे है तो उनकी value भिन्न होनी  चाइए |

3. Checked :- 
इसका उपयोग तब किया जाता है जब form को प्रदर्शित करना हो आप एक चेक boxes को On रखना चाहते है यदि इसे नहीं  देते है तो कोई भी check ब्प्क्सेस चायनित नहीं किया जा सकता है |

List Box :-

Html डॉक्यूमेंट में list बनाने क लिए <select>तथा </select > टैग को कम में लिया जाता है <select > टैग को दो विभिन्न प्रकार कि सूचियों scrolling list तथा pull down या pop up menu list को बनाने के कम में लिया जाता है यह रेडिओ बटन तथा check box के आलावा एक अन्य ऑप्शन है जिसमे user अपना कोई text type नही कर सकता है उसे सिर्फ उपलब्ध विकल्प में से चयन करना ही होता है यहाँ <select > टैग एक कंटेनर टैग कि तरह कार्य क्र रहा है सूचि के सभी विकल्प <select > तथा</select > टैग के मध्य लिखे जाते है

syntax  : <select name  = “ ”>

             <option >यह प्रथम विकल्प है

            <option >यह द्वितीय विकल्प है

            </select >

<select >टैग में निम्न्लिखित attribute काम में लिए जाते है

1.  Name :-
 form में एक से अधिक list box होने पर उन्हें नाम द्वारा निर्देशित किया जाता है |

2. Size :- 
list box में प्रदर्शित किये जाने वाले विकल्पों कि संख्या | यदि size दिया जाता है तो list एक scrolling list प्रदर्शित करता है यदि यह नही दिया जाना है तो यह एक pop up menu प्र्द्रधित करता है

3. Multiple :-
 list में से एक से अधिक विकल्पों का चयन करने के लिए इसका प्रयोग किया जाता है |

<option > टैग के साथ निम्न्लिखित टैग प्रयुक्त किये जाते है :-

1.Selected :- 
इस attribute को लेने पर वह ऑप्शन list by default selected रहेगा |

2. Value :- 
वह विकल्प के द्वारा form को submit करने पर यह value server पर भेज दी जाती है

 Edit box:- 
User attribute (<input type +”text”>) द्वारा केवल एक ही line त्योए कर सकता है यदि एक साथ कई लाइनों को एक ही input item में डालना चाहते है तो <text area >तथा </text area > टैग का उपयोग किया जाता है

<Text area >तथा </text area > के मध्य डाला गया कोई भी text उस form में दफौल्ट प्रदर्शित हो जाता है एडिट box में row तथा columns कि संख्या को नियमित कर सकते है हालाँकि यह सामान्तया वो सारा text ग्रहण कर लेता ह जितना उसमे डालना चाहते है

Edit box बनाने के लिए <Text area >तथा </text area > को आप निम्न प्रकार से लिखते है

Syntax :- <text area >

यहाँ पर वह text type किया जाता है जो डिफौल्ट प्रदर्शित होता है

</text area > 

<text area >टैग में निम्न लिखित attributes होते है _

1.Name यह वह नाम है जो form को submit करने क पशचात server के पास जाता है

2. Rows :- यह row कि कुल संख्याओ को प्रदर्शित करता है

3. Cols:-  यह एक row में दिखाई देने वाले characters कि कुल संख्याओ को प्रदर्शित करता है

4. Readonly :- user के द्वारा दी जाने वाली एंट्री को रोकने हेतु इसका प्र्यूग किया जाता है

Button:-

बटन द्वारा ही form को server मर submit किया जाता है अत : प्रत्येक form में एक बटन आवश्यक  होना चाहिए साथ ही एक reset बटन भी form में होना चाहिए जो कि form में type किये जा चुके डाटा को समाप्त करके नये सिरे से form में डाटा एंट्री करवा सके | अर्थार्थ उपरोक्त दोनों कार्य कमशः submit तथा reset button से किये जा सकते है

(i). <Input type = “submit “>

(ii). <Input type =”reset “>    

दोनों कमांड में एक अन्य attribute valueको लिखा जा सकता है value क द्वारा हम बटन पर दर्शाने वाले text को दे सकते है

Example :-

<input type  = “submit ”value = “please submit your  form ”>

program :-

form के लिए उपलब्ध समस्त रफ को प्रदर्शित करने का program |

<Form method =”post” action = “mail to :softech@vsnl.com”>

<b><Big>Enter your personal details below :<B><Big><Br>

Name:=<Input type= “text” name =”username”size=”39”><Br>

City=<input type=”text”name=”user city”size=”20”>

State:<Input type=”text”name=name= “user-state”size=”15”><Br>

Country: :<Input type=”Visitor-country”size=”1”>

<option>India

<option>United states

<option>Austrelia

<option selected>Nepal

<option>England

</select>

Zip/Pincode: :<Input type=”text” name = “user-code”size=”15”><Br>

Sex: :<Input type=”radio”name=”sex”value=””male”checked> male<input type=”radio”name=”sex”value=”female”>Female<Br>

E-mail: :<Input type=”text”name=”user-email”size=”30”><Br><Br>

<B>Specify your interest:</B><Br>

<Input type=”Checkbox”name=”interest”value=”sports’>sports

<Input type=”Checkbox”name=”interest”value=”Movies’>Movies

<Input type=”Checkbox”name=”interest”value=”computer’>computer

<Input type=”Checkbox”name=”interest”value=”other”>other<Br><Br>

<B>Any comments? Write them down.</B><Br>

</text area><Br><Br>

<H2 align=”Center”Tanks for visiting!<H2>

<Input type=”submit”value=”Submit”>

<input type =”rest”value=”Reset”></H3>