HTML me form kaise banaye – Free HTML Tutorial in Hindi

इस HTML tutorial post के जरिये आज हम सिखने वाले है की HTML form क्या होता है और HTML me form kaise banaye ?

आज हम इस tutorial के जरिये जानेगे की HTML form kya hai ( what is HTML form in Hindi ) और HTML me form kaise banaye ( How to create HTML form in Hindi )

हमने last tutorial में हमने सीखा HTML List in Hindi , यदि आपने वह post read नहीं किया है तो आप उसे भी पढ़े |

HTML form kya hai और HTML me form kaise banaye ( what is HTML form )

HTML form एक दस्तावेज है | HTML document में विभिन्न प्रकार के user inputs collect करने के लिए HTML form की आवश्यकता होती है, जैसे की contact details – name , email , address, contact number आदि वरण।

Form elelemt के अंदर एक या एक से अधिक nested elements हो सकते है | जिन्हें HTML language में controls कहा जाता है , जैसे की <label> , <input> , <select> , <textarea> , <button> , <fieldset> , <legend> , <datalist> , <output> , <option> , <optgroup> आदि।

Users generelly इन controls की help से अपना data enter करके form को complite करते है | उदहारण के लिए अपना name enter करना , items को select करना , contact number enter करना आदि और फिर form को आगे की process के लिए web server पर submit किया जाता है |

Web pages पर form को create करने के लिए <form> tag का use किया जाता है | यहाँ एक login form का एक simple उदाहरण दिया गया है:

For Example :

<form>
    <label>User name: <input type="text"></label>
    <label>User Password: <input type="password"></label>
    <input type="submit" value="Submit Data">
</form>

Output :

Input tag in html ( HTML me input tag kaise banaye )

input tag – HTML form में सबसे अधिक इस्तेमाल किया जाने वाला element है।

Input elements type attribute के जरिये user input field के various types specify करने की अनुमति देता है |

user field के type specify करने के लिए input element में HTML type attribute का use किया जाता है |

type attribute text field, password field, checkbox, radio button, submit button, reset button, file select box आदि input types को hold करता है |

सबसे अधिक उपयोग किए जाने वाले HTML input types का वर्णन नीचे किया गया है।

Text field in HTML ( HTML me text field kaise banaye )

text field one-line area हैं जो user को text input करने की अनुमति देता हैं।

HTML me text field kaise banaye – HTML में Text field create करना बहुत ही आसान है , text field create करने के लिए input element के type attribute की value text define की जाती है | text field के जरिये यूजर से single line text input करवाया जाता है | user का name collect करने के लिए single line text input ( text field ) का एक example निचे दिया गया है |

<form>
    <label for="username">User name:</label>
    <input type="text" name="username" id="username">
</form>

ऊपर दिया गया example का output कुछ इस प्रकार आएगा |

output

Input element के लिए label define करने के लिए <label> tag का use किया जाता है | ऊपर के example में input element में name attribute और id attribute का use किया गया है | name attribute और id attribute की help से server पर input type के data को भेजा जाता है |

HTML Radio Buttons in Hindi ( HTML form me radio button kaise lagaye )

User को pre-defined option के set में से कोई एक विकल्प चयन करने के लिए radio button का उपयोग किया जाता है |

Radio button create करने के लिए input element के type attribute की value radio define की जाती है |

यहां radio button का एक उदाहरण दिया गया है जिसका उपयोग user का gender की जानकारी एकत्र करने के लिए किया जा सकता है:

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>

ऊपर दिए गए code को copy कर के notepad++ या अन्य कोई भी text editor में paste करे और file को HTML formate में save करे और web browser में उस file को open करे |

Output

How to create checkbox in html ( HTML checkbox in Hindi )

Checkbox user को pre-defined option के set में से एक या एक से अधिक option select करने की अनुमति देता है | checkbox create करने के लिए input tag के type attribute की value checkbox define की जाती है |

यहां checkbox का एक उदाहरण दिया गया है जिसका उपयोग user के शौक ( hobbies ) के बारे में जानकारी collect करने के लिए किया जा सकता है:

<form>
    <input type="checkbox" name="sports" id="kabaddi">
    <label for="kabaddi">kabaddi</label>
    <input type="checkbox" name="sports" id="volleyball">
    <label for="volleyball">volleyball</label>
    <input type="checkbox" name="sports" id="high jump">
    <label for="High Jump">High Jump</label>
</form>

Output

यदि आप radio button या checkbox को bydefault check रखना चाहते हो तो यह input element के checked attribute के जरिये कर सकते है |

For Example

<form>
  <input type="radio" name="class-9" id="class9" checked>
  <label for="class9">Class 9</label>
  <input type="radio" name="class-10" id="class10">
  <label for="class10">class 10</label>
<br /><br />
  <input type="checkbox" name="age" id="14years" checked>
  <label for="14years">14 years old</label>
  <input type="checkbox" name="age" id="15years">
  <label for="15years">15 years old</label>
</form>

Output

Password Field in HTML

Password field text field के समान ही हैं। फर्क सिर्फ इतना है; password field में लिखे गए characters नकाबपोश ( masked ) होते हैं | उन्हें star या dots के रूप में दिखाया जाता है , ताकि कोई और person screen पर password read ना कर सके |

यह text field की तरह single-line text input controls है | HTML form में password field create करने के लिए input element के type attribute की value password दी जाती है |

For example

<form>
    <label for="client-pwd">Enter your Password:</label>
    <input type="password" name="client-password" id="client-pwd">
</form>

Output

File Select box in HTML ( HTML form me file upload kaise kare )

File field user को अपने local file browse करने और form data के साथ file को attachement की तरह भेजने की अनुमति देता है |

File field ( File upload control ) के द्वारा आप HTML form में text file , images , PDF , Word , etc. document को upload करवा सकते है |

File field input element के जरिये create की जाती है।, जिसमे type attribute की value file दी जाती है |

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

Output

HTML Textarea in Hindi

Textarea एक multiple-line text input control है जो user को एक से ज्यादा lines दर्ज करने की अनुमति देता है।

textarea को HTML form में create करने के लिए <textarea> tag का use किया जाता है |

<form>
    <label for="student-address">Address:</label>
    <textarea rows="4" cols="35" name="student-address" id="student-address"></textarea>
</form>

Output

HTML select tag in Hindi

HTML form में select tag का use कर के options का dropdown list बना सकते है , जो user को एक या एक से अधिक option select करने की अनुमति देता है |

Dropdown Select Boxes create करने के लिए <select> tag के साथ <option> tag का use किया जाता है | select box में शामिल options एक single-line text box की तरह दिखाई देते है |

<select> element के भीतर <option> element हर एक item list को परिभाषित करता है |

<form>
    <label for="State">State:</label>
    <select name="state" id="state">
        <option value="Gujarat">Gujarat</option>
        <option value="Rajasthan">Rajasthan</option>
        <option value="Madhya-pradesh">Madhya Pradesh</option>
    </select>
</form>

Output

HTML submit button

HTML Submit button का use form data को web server पर send करवाने के लिए किया जाता है | जब submit button clicked किया जाता है तब form के action attribute में specified की गयी file पर form data send होता है |

HTML reset button in Hindi

HTML reset button का use form के सभी controls को default value के साथ reset करने के लिए किया जाता है |

इसे समझ ने के लिए निचे दिए गए एक्साम्प्ले को देखे |

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Output

ऊपर दिए गए text field में अपना नाम type करें reset button पर click करे |

Grouping Form Controls in Hindi

आप <legend> element का use कर के web form के भीतर related controls और label को group में भी set कर सकते है |

HTML Form में categories wise controls को group में set कर के web pages पर form को user friendly बनाया जाता है | इससे user को form समझने में आसानी होती है |

यह कैसे काम करता है यह देखने के लिए आइए निम्नलिखित उदाहरण देखें:

<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label>Contact name: <input type="text" name="contactname"></label>
        <label>mobile Number: <input type="text" name="phone"></label>

        <label>Email Id: <input type="email" name="emailid"></label>
    </fieldset>

<fieldset>
        <legend>Business Details</legend>
        <label>Business name: <input type="text" name="Businessname"></label>
        <label>Business Number: <input type="text" name="phone"></label>
        <label>Business Email Id: <input type="email" name="emailid"></label>
    </fieldset>
</form>

Output

अक्सर use किये जाने वाले form attributes

निम्न table में दर्शाये गए form attributes सबसे अधिक बार उपयोग किए जाते है |

यह भी पढ़े |

• HTML Paragraph Tag
• HTML Attributes kya hota hai ?
• HTML Elements in Hindi