HTML Forms and Input

HTML Forms

              HTML forms का प्रयोग data को server के पास भेजने के लिये किया जाता है।  एक HTML form मे कई input elements होते है जैसे-text fields, checkboxes, radio-buttons, submit buttons आदि। इनके अलावा form में select lists, textarea, fieldset, legend, and label elementsभी होते है।
HTML form को बनाने के लिये <form> tag का प्रयोग होता है :

<form>
.
input elements
.
</form>

---

Forms - The Input Element

सबसे महत्वपूर्ण form element है <input> element.
<input> element का प्रयोग user information का चयन करने के लिये होता है।
<input> element कई तरीको से काम करता है, जो attribute टाईप पर निर्भर करता है। <input> element - type text field, checkbox, password, radio button, submit buttonआदि किसी भी रुप मे हो सकते है।
The most common input types are described below.

 

---

Text Fields

<input type="text"> एक लाइन का input field होता है, जिसमें user अपने text डाल (कुछ लिख) सकता है:

<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

उपरोक्त HTML code browser में कुछ इस प्रकार दिखेगा :

First name:
Last name:

Note: form स्वयं कही दिखाई नही देता इसकी बाउंड्री बनाने के लिये table tag का प्रयोग कर सकते है। यह भी ध्यान रखे कि एक text field की default चौडाई 20 शब्द होती है। 

---

Password Field

<input type="password"> का प्रयोग password field के लिये होता है:

<form> Password: <input type="password" name="pwd"> </form>

उपरोक्त HTML code browser में कुछ इस प्रकार दिखेगा :

Password:

Note: password field मे लिखे गये शब्द छुपे हुए होते है अर्थात वे तारे या डाट के रुप मे दिखाई देते है।

---

Radio Buttons

<input type="radio"> का प्रयोग radio button बनाने के लिये होता है, Radio button से user निर्धारित किये गये विकल्पों मे से किसी एक का चुनाव कर सकता है।

<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>

उपरोक्त HTML code browser में कुछ इस प्रकार दिखेगा :

Male
Female

---

Checkboxes

<input type="checkbox"> का प्रयोग checkbox बनाने के लिये होता है, checkbox से user निर्धारित किये गये विकल्पों मे से किसी एक या अधिक या कोई नही किसी का भी चुनाव कर सकता है।

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>

I have a bike I have a car

उपरोक्त HTML code browser में कुछ इस प्रकार दिखेगा :

---

Submit Button

            <input type="submit"> का प्रयोग submit button बनाने के लिये होता है, submit button का प्रयोग form data को server को भेजने के लिये होता है। data  पेज मे दर्शाये गये form's action attribute  स्थान पर भेजा जाता है। user निर्धारित किये गये विकल्पों मे से किसी एक या अधिक या कोई नही किसी का भी चुनाव कर सकता है। action attribute मे दर्शायी गई फ़ाइल सामान्यत: submit होते ही कोई ना कोई आउट्पुट देती है।

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

उपरोक्त HTML code browser में कुछ इस प्रकार दिखेगा :

Username:

---

HTML Form Tags

New : New tags in HTML5.

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>New	Specifies a list of pre-defined options for input controls
<keygen>New	Defines a key-pair generator field (for forms)
<output>New	Defines the result of a calculation