-->

HTML Forms

On any webpage, if you want to take any information from the user, then you use forms for this. For example, whenever you create a new email id, you first fill up the sign up form. By doing so you provide your information via webpage

Forms is the most common way of getting input from a user. Any form takes input from the user and when the user submits that form then all these information is stored in a database. You can use a variety of form elements to input information from the user. Such as text-box, radio button, drop-down list etc.

To create forms in any webpage, you use < form > tag. This is the container tag, which defines the start and ending of the entire form. Different form elements are defined inside this tag.

The <form> Element

The HTML <form> element defines a form that is used to collect user input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

Here are some input elements:

Type

Description

<input type="text">

Defines a one-line text input field

<input type="radio">

Defines a radio(for selecting one of many choices)

<input type="submit">

Defines a submit button (for submitting the form)

<input type="checkbox">

Defines a checkbox (for selecting multiple choices)

<input type="password">

Defines a password input fields

<input type="email">

Defines a email input field

<input type="url">

Defines a url input fields

<input type="number">

Defines a number input fields

<input type="date">

Defines a date input fields

<input type="time">

Defines a time input fields

<input type="file">

Defines a file input fields

Text Input

<input type="text"> defines a one-line input field for text input:

<form>

            <label>Name : </label>

            <input type="text" name="username">

            <br>

            <label>Father's Name : </label>

            <input type="text" name="userfathername">

</form>

This is how it will look like in a browser:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

<form>

            <label>Gender : </label><br>
            <input 
type="radioname="gendervalue="malecheckedMale<br>
            <input 
type="radioname="gendervalue="female"> Female<br>
            <input 
type="radioname="gendervalue="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

Gender :

 Male
 Female
 Other

Checkbox Input

<input type="checkbox"> defines a checkbox.

Checkbox let a user select multiple choices:

<form>                          

            <label>Qualifications : </label><br>
            <input 
type="checkboxname="qualificationvalue="highschoolcheckedHigh School<br>
            <input 
type="checkboxname="qualificationvalue="inter"> Intermediate<br>
            <input 
type="checkboxname="qualificationvalue="graduation"> Graduation
</form>

This is how the HTML code above will be displayed in a browser:

File Input

<input type="file"> defines the file input.

<form>                          

            <label>Select document : </label><br>
            <input 
type="filename="document">

 </form>

This is how the HTML code above will be displayed in a browser:

The Textarea element

  The textarea defines multiline text input. The syntax is given below:

 <form>                         

            <label>Tell About Yourself : </label><br>
            <textarea  
name="aboutuser" ></textarea>

 </form>

This is how the HTML code above will be displayed in a browser:

The Select Element

This element draws a dropdown to select any one option. The syntax is given below:

<form>                          

            <label>Select Color : </label><br>
            <select  
name="color" >

                        <option value="red" >Red</option>

                        <option value="green" >Green</option>

                        <option value="blue" >Blue</option>

            </select>

 </form>

This is how the HTML code above will be displayed in a browser:

The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

<form action="/action_page.php">
 
Name: <br>
  <input 
type="textname="usernamevalue="XYZ "><br>
 
Father's name: <br>
  <input 
type="textname="userfathernamevalue="ABCD"><br><br>
  <input 
type="submitvalue="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

Name:
 
Father's name:
 

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:

<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

The Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

The default value is "_self" which means the form will be submitted in the current window.

To make the form result open in a new browser tab, use the value "_blank":

<form action="/action_page.phptarget="_blank">

Other legal values are "_parent", "_top", or a name representing the name of an iframe.

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

<form action="/action_page.phpmethod="get">

or:

<form action="/action_page.phpmethod="post">

When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page address field:

/action_page.php?username=XYZ&userfathername=ABCD

Notes on GET:

Appends form-data into the URL in name/value pair.

The length of a URL is limited (about 3000 characters)

Never use GET to send sensitive data! (will be visible in the URL)

Useful for form submissions where a user want to bookmark the result

GET is better for non-secure data, like query strings in Google

 

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Notes on POST:

POST has no size limitations, and can be used to send large amounts of data.

Form submissions with POST cannot be bookmarked

 

The Name Attribute

Each input field must have a name attribute to be submitted.

If the name attribute is omitted, the data of that input field will not be sent at all.

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example :

<form action="/action_page.php">
  <fieldset>
    <legend>
Personal information: </legend>
    First name: <br>
    <input 
type="textname="firstnamevalue="Ali"><br>
    Last name: <br>
    <input 
type="textname="lastnamevalue="Miyan"><br><br>
    <input 
type="submitvalue="Submit">
  </fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

Personal information :

First name :
 
Last name:
 

Here is the list of <form> attributes:

Attribute

Description

accept-charset

Specifies the charset used in the submitted form (default: the page charset).

action

Specifies an address (url) where to submit the form (default: the submitting page).

autocomplete

Specifies if the browser should autocomplete the form (default: on).

enctype

Specifies the encoding of the submitted data (default: is url-encoded).

method

Specifies the HTTP method used when submitting the form (default: GET).

name

Specifies a name used to identify the form (for DOM usage: document.forms.name).

novalidate

Specifies that the browser should not validate the form.

target

Specifies the target of the address in the action attribute (default: _self).

HTML Code:

<!DOCTYPE html>

<html>

                             <head>

                                                <title> HTML Form </title>

                                                <meta charset="UTF-8">

                             </head>

                             <body>

                                                <h1>HTML Form</h1>

                                                <form action="action_page.php" method="GET">

                                                            <label>Name : </label>

                                                            <br>

                                                            <input type="text" name="username" >

                                                            <br>

                                                            <label>Father's Name : </label>

                                                            <br>

                                                            <input type="text" name="fatherusername"  placeholder="Enter the father's Name"  >

                                                            <br>

                                                            <label>Password : </label>

                                                            <br>

                                                            <input type="password" name="userpassword"  >

                                                            <br>

                                                            <label>Select Image : </label>

                                                            <br>

                                                            <input type="file" name="userimage"  >

                                                            <br>

                                                            <label>Gender : </label>

                                                            <br>

                                                            <input type="radioname="gendervalue="malecheckedMale

                                                            <br>
                                                            <input 
type="radioname="gendervalue="female"> Female

                                                            <br>
                                                            <input 
type="radioname="gendervalue="other"> Other
                                                            <br>

                                                            <label>Qualification : </label>

                                                            <br>

                                                                             <input type="checkboxname="qualificationvalue="highschoolcheckedHigh School

                                                            <br>
                                                                             <input 
type="checkboxname="qualificationvalue="inter"> Intermediate

                                                            <br>
                                                                             <input 
type="checkboxname="qualificationvalue="graduation"> Graduation
                                                            <br>

                                                            <label>Nationality : </label>

                                                            <br>

                                                            <select  name="nationality" >

                                                                        <option value="indian" >Indian</option>

                                                                        <option value="other" >Other</option>

                                                            </select>

                                                            <br>

                                                            <label>Address : </label>

                                                            <br>

                                                            <textarea  name="useraddress" ></textarea>

                                                            <br>

                                                            <input type="submitvalue="Submit">

                                                </form>

                        </body>

</html>

Script Output:

 


HTML फॉर्म

किसी भी 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 किये जाते है।

The <form> Element

HTML <form> तत्व एक ऐसे फॉर्म को परिभाषित करता है जिसका प्रयोग उपयोगकर्ता इनपुट एकत्र करने के लिए किया जाता है:

<form>
.
form elements
.
</form>

एक HTML फार्म में फार्म elements शामिल हैं

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

The <input> Element

<Input> तत्व सबसे महत्वपूर्ण रूप तत्व है

टाइप विशेषता के आधार पर, <input> तत्व को कई तरीकों से प्रदर्शित किया जा सकता है।

यहां कुछ इनपुट तत्व दिए गए हैं:

Type

विवरण

<input type="text">

एक-लाइन text इनपुट फ़ील्ड को परिभाषित करता है

<input type="radio">

एक रेडियो परिभाषित करता है (कई विकल्पों में से एक को चुनने के लिए)

<input type="submit">

एक सबमिट बटन परिभाषित करता है (फ़ॉर्म सबमिट करने के लिए)

<input type="checkbox">

चेकबॉक्स को परिभाषित करता है (एकाधिक विकल्प चुनने के लिए)

<input type="password">

एक पासवर्ड इनपुट फ़ील्ड निर्धारित करता है

<input type="email">

ईमेल इनपुट फ़ील्ड को परिभाषित करता है

<input type="url">

यूआरएल इनपुट फ़ील्ड्स को परिभाषित करता है

<input type="number">

संख्या इनपुट फ़ील्ड को परिभाषित करता है

<input type="date">

दिनांक इनपुट फ़ील्ड को परिभाषित करता है

<input type="time">

एक समय इनपुट फ़ील्ड को परिभाषित करता है

<input type="file">

एक फ़ाइल इनपुट फ़ील्ड निर्धारित करता है

Text Input

<input type = "text"> पाठ इनपुट के लिए एक-पंक्ति इनपुट फ़ील्ड को परिभाषित करता है:

<form>

            <label>नाम : </label>

            <input type="text" name="username">

            <br>

            <label> पिता का नाम : </label>

            <input type="text" name="userfathername">

</form>

यह एक ब्राउज़र में इस तरह दिखेगा:

Note: यह भी ध्यान रखें कि टेक्स्ट फ़ील्ड की डिफ़ॉल्ट चौड़ाई 20 वर्ण है

Radio Button Input

<input type = "radio"> एक रेडियो बटन को परिभाषित करता है

रेडियो बटन उपयोगकर्ताओं को सीमित विकल्पों में से एक का चयन करने का विकल्प देता है।

<form>

            <label> लिंग : </label><br>
            <input 
type="radioname="gendervalue="malecheckedपुरुष <br>
            <input 
type="radioname="gendervalue="female"> महिला <br>
            <input 
type="radioname="gendervalue="other"> अन्य
</form>

This is how the HTML code above will be displayed in a browser:

लिंग :

 पुरुष
 
महिला
 
अन्य

Checkbox Input

<input type="checkbox"> एक चेकबॉक्स को परिभाषित करता है

चेकबॉक्स उपयोगकर्ता को एकाधिक विकल्प चुनने देता है :

<form>                          

            <label> योग्यता : </label><br>
            <input 
type="checkboxname="qualificationvalue="highschoolcheckedहाई स्कूल <br>
            <input 
type="checkboxname="qualificationvalue="inter"> इंटरमीडियट <br>
            <input 
type="checkboxname="qualificationvalue="graduation"> स्नातक
</form>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

File Input Element

<input type = "file"> फाइल इनपुट को परिभाषित करता है

<form>                          

            <label> दस्तावेज़ चुनें: </label><br>
            <input 
type="filename="document">

 </form>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

The Textarea element

textarea  multiline text इनपुट को परिभाषित करता है वाक्यविन्यास नीचे दिया गया है:

 <form>                         

            <label> अपने बारे मे बताइये :</label><br>
            <textarea  
name="aboutuser" ></textarea>

 </form>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

The Select Element

यह तत्व किसी भी एक विकल्प को चुनने के लिए एक ड्रॉपडाउन खींचता है। वाक्यविन्यास नीचे दिया गया है:

<form>                          

            <label> रंग चुनो: </label><br>
            <select  
name="color" >

                        <option value="red" > लाल </option>

                        <option value="green" > हरा </option>

                        <option value="blue" > नीला </option>

            </select>

 </form>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

 

 

The Submit Button

<input type = "submit"> फॉर्म डेटा को फॉर्म-हैंडलर को सबमिट करने के लिए एक बटन को परिभाषित करता है

फॉर्म-हैंडलर आम तौर पर एक सर्वर पृष्ठ है जो इनपुट डेटा प्रोसेस करने के लिए एक स्क्रिप्ट है।

फॉर्म-हैंडलर फॉर्म के एक्शन विशेषता में निर्दिष्ट होता  है:

<form action="/action_page.php">
 
नाम : <br>
  <input 
type="textname="usernamevalue="XYZ "><br>
पिता का नाम: <br>
  <input 
type="textname="userfathernamevalue="ABCD"><br><br>
  <input 
type="submitvalue="Submit">
</form>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

नाम:
 
पिता का नाम:
 

The Action Attribute

एक्शन एट्रिब्यूट फॉर्म को परिभाषित करता है की फॉर्म सबमिट करने पर क्या करना है।

आम तौर पर, फॉर्म डेटा सर्वर पर एक वेब पेज पर भेजा जाता है जब उपयोगकर्ता सबमिट बटन पर क्लिक करता है।

ऊपर दिए गए उदाहरण में, फ़ॉर्म डेटा "/action_page.php" नामक सर्वर पर एक पेज पर भेजा जाता है इस पृष्ठ में एक सर्वर-साइड स्क्रिप्ट है, जो फ़ॉर्म डेटा संभालती है:

<form action="/action_page.php">

यदि एक्शन एट्रिब्यूट खली छोड़ा गया है, तो एक्शन करंट वेबपेज पर सेट हो जाती है।

The Target Attribute

target attribute निर्दिष्ट करती है कि प्रस्तुत परिणाम नया ब्राउज़र टैब, एक फ्रेम, या वर्तमान विंडो में खुल जाएगा।

डिफ़ॉल्ट मान "_self" है जिसका अर्थ है कि form वर्तमान विंडो में सबमिट किया जाएगा।

फ़ॉर्म के परिणाम को एक नया ब्राउज़र टैब में खोलने के लिए, "_blank" मान का उपयोग करें:

<form action="/action_page.phptarget="_blank">

The Method Attribute

method  एट्रिब्यूट फॉर्म डेटा जमा करते समय उपयोग करने के लिए HTTP विधि (GET या POST) निर्दिष्ट करता है:

<form action="/action_page.phpmethod="get">

या :

<form action="/action_page.phpmethod="post">

GET का उपयोग कब करना है?

फ़ॉर्म डेटा सबमिट करते समय डिफ़ॉल्ट विधि GET  है

हालांकि, जब GET का उपयोग किया जाता है, तो प्रस्तुत फ़ॉर्म डेटा page address फ़ील्ड में दिखाई देगा:

/action_page.php?username=XYZ&userfathername=ABCD

Notes on GET:

नाम / मान युगल में यूआरएल में फॉर्म-डेटा संलग्न करता है

एक यूआरएल की लंबाई सीमित है (लगभग 3000 अक्षर)

संवेदनशील डेटा भेजने के लिए कभी भी उपयोग न करें! (यूआरएल में दिखाई देगी)

फॉर्म प्रस्तुतियाँ के लिए उपयोगी जहां एक उपयोगकर्ता परिणाम को बुकमार्क करना चाहता है

Google में क्वेरी स्ट्रिंग जैसी गैर-सुरक्षित डेटा के लिए GET बेहतर है

 

पोस्ट का उपयोग कब करना है?

फ़ॉर्म डेटा में संवेदनशील या व्यक्तिगत जानकारी होती है, तो हमेशा POST का उपयोग करें, पोस्ट विधि page address फ़ील्ड में सबमिट किए गए फ़ॉर्म डेटा प्रदर्शित नहीं करती है।

Notes on POST:

पोस्ट की कोई सीमा नहीं है, और बड़ी मात्रा में डेटा भेजने के लिए उपयोग किया जा सकता है

पोस्ट में डेटा bookmarked नहीं किया जा सकता

 

The Name Attribute

प्रत्येक इनपुट फ़ील्ड में प्रस्तुत करने के लिए एक नाम विशेषता होना चाहिए।

यदि नाम विशेषता छोड़ी जाती है, तो उस इनपुट फ़ील्ड का डेटा बिल्कुल भी नहीं भेजा जाएगा।

Grouping Form Data with <fieldset>

<Fieldset> तत्व एक रूप में संबंधित डेटा समूह के लिए उपयोग किया जाता है।

<Legend> तत्व <fieldset> तत्व के लिए एक कैप्शन को परिभाषित करता है

Example :

<form action="/action_page.php">
  <fieldset>
    <legend>
व्यक्तिगत जानकारी: </legend>
   प्रथम नाम: <br>
    <input 
type="textname="firstnamevalue=" अली "><br>
   अंतिम नाम: <br>
    <input 
type="textname="lastnamevalue=" मियाँ "><br><br>
    <input 
type="submitvalue="Submit">
  </fieldset>
</form>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

व्यक्तिगत जानकारी :

प्रथम नाम :
 
अंतिम नाम:
 

यहां <form> attributes की सूची दी गई है:

Attribute

विवरण

accept-charset

प्रस्तुत form में charset  निर्दिष्ट करता है (डिफ़ॉल्ट: पृष्ठ charset)।

action

एक address (यूआरएल) निर्दिष्ट करता है जहां फॉर्म जमा करना है (डिफॉल्ट: जमा करना पृष्ठ)।

autocomplete

निर्दिष्ट करता है कि ब्राउज़र को फ़ॉर्म को स्वत: पूर्ण करना चाहिए (डिफ़ॉल्ट: चालू (on))।

enctype

सबमिट किए गए डेटा की एन्कोडिंग निर्दिष्ट करता है (डिफ़ॉल्ट: url-encoded है)।

method

फॉर्म जमा करते समय उपयोग किया जाने वाला HTTP विधि निर्दिष्ट करता है (डिफ़ॉल्ट: GET)

name

फ़ॉर्म को पहचानने के लिए उपयोग किया जाने वाला नाम निर्दिष्ट करता है (DOM के उपयोग के लिए: document.forms.name)

novalidate

निर्दिष्ट करता है कि ब्राउज़र को फ़ॉर्म को मान्य नहीं करना चाहिए।

target

कार्रवाई विशेषता में address का लक्ष्य निर्दिष्ट करता है (डिफ़ॉल्ट: _self)

HTML Code:

<!DOCTYPE html>

<html>

                             <head>

                                                <title> HTML Form </title>

                                                <meta charset="UTF-8">

                             </head>

                             <body>

                                                <h1>HTML फॉर्म </h1>

                                                <form action="action_page.php" method="GET">

                                                            <label> नाम : </label>

                                                            <br>

                                                            <input type="text" name="username" >

                                                            <br>

                                                            <label> पिता का नाम : </label>

                                                            <br>

                                                            <input type="text" name="fatherusername"  placeholder=" पिता का नाम दर्ज करें"  >

                                                            <br>

                                                            <label> पासवर्ड : </label>

                                                            <br>

                                                            <input type="password" name="userpassword"  >

                                                            <br>

                                                            <label> छवि चुने : </label>

                                                            <br>

                                                            <input type="file" name="userimage"  >

                                                            <br>

                                                            <label> लिंग: </label>

                                                            <br>

                                                            <input type="radioname="gendervalue="malecheckedपुरुष

                                                            <br>
                                                            <input 
type="radioname="gendervalue="female"> महिला

                                                            <br>
                                                            <input 
type="radioname="gendervalue="other"> अन्य
                                                            <br>

                                                            <label> योग्यता : </label>

                                                            <br>

                                                                             <input type="checkboxname="qualificationvalue="highschoolchecked> हाई स्कूल

                                                            <br>
                                                                             <input 
type="checkboxname="qualificationvalue="inter"> इंटरमीडियट

                                                            <br>
                                                                             <input 
type="checkboxname="qualificationvalue="graduation"> स्नातक
                                                            <br>

                                                            <label> राष्ट्रीयता : </label>

                                                            <br>

                                                            <select  name="nationality" >

                                                                        <option value="indian" > भारतीय </option>

                                                                        <option value="other" > अन्य </option>

                                                            </select>

                                                            <br>

                                                            <label> पता : </label>

                                                            <br>

                                                            <textarea  name="useraddress" ></textarea>

                                                            <br>

                                                            <input type="submitvalue=" जमा करें">

                                                </form>

                        </body>

</html>

ब्राउज़र में उपर्युक्त HTML कोड इस तरह प्रदर्शित किया जाएगा:

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h