Previous Next

HTMLForm in Hindi

HTML में Form का उपयोग website पर user से information या input लेने के लिए किया जाता है। जब किसी website पर user को अपना नाम, email, password, mobile number, feedback या कोई दूसरी जानकारी भरनी होती है, तब HTML form का उपयोग किया जाता है।

उदाहरण के लिए Login Form, Registration Form, Contact Form, Feedback Form और Search Form आदि HTML forms के common examples हैं।

HTML Form क्या है?

HTML Form एक ऐसा section होता है जिसमें अलग-अलग input controls रखे जाते हैं। User इन controls की मदद से information enter या select करता है और फिर Submit button के द्वारा form को submit कर सकता है।

HTML में form बनाने के लिए <form> tag का उपयोग किया जाता है। Form के अंदर text box, email field, password field, radio button, checkbox, textarea, select box और submit button जैसे अलग-अलग elements रखे जा सकते हैं।

<form> Tag

<form> tag HTML form का main container होता है। इसके अंदर form से संबंधित सभी input elements रखे जाते हैं।

HTML

Code copied!

ऊपर दिए गए example में एक simple form बनाया गया है। इसमें एक Name input field और एक Submit button है। User Name field में अपना नाम enter कर सकता है और Submit button से form submit कर सकता है।

<label> Tag

<label> tag का उपयोग input field के बारे में बताने के लिए किया जाता है। इससे user को समझ आता है कि किसी input field में कौन-सी information enter करनी है।

for attribute का value सामान्यतः उस input के id से match किया जाता है। इससे label और input के बीच connection बनता है।

<input> Tag

<input> tag form में user से छोटी या specific information लेने के लिए इस्तेमाल किया जाता है। इसका व्यवहार इसके type attribute पर depend करता है।

उदाहरण के लिए type="text" normal text input बनाता है, जबकि type="email" email address के लिए input field बनाता है।

name Attribute

name attribute form का एक important attribute है। जब form submit किया जाता है, तो input की पहचान और उसके value को form data में शामिल करने के लिए इसका उपयोग किया जाता है।

उदाहरण के लिए अगर input में name="username" दिया गया है और user ने Deepanshu enter किया है, तो form data में उस field की पहचान username के रूप में की जा सकती है।

id और for Attribute

id attribute किसी element की unique पहचान के लिए इस्तेमाल किया जाता है। वहीं label के for attribute को उसी input के id से match करके label को input से जोड़ा जा सकता है।

HTML

Code copied!

HTML Form के Important Input Types

HTML में <input> element का type बदलकर अलग-अलग प्रकार के input fields बनाए जा सकते हैं। कुछ common input types नीचे दिए गए हैं:

text – सामान्य text enter करने के लिए।
email – email address enter करने के लिए।
password – password जैसी sensitive information enter करने के लिए।
number – numerical value enter करने के लिए।
radio – दिए गए options में से एक option चुनने के लिए।
checkbox – एक या एक से अधिक options select करने के लिए।
submit – form submit करने के लिए।
reset – form fields को उनकी initial values पर वापस लाने के लिए।

Text Input

type="text" का उपयोग सामान्य text information लेने के लिए किया जाता है, जैसे name, city या username।

HTML

Code copied!

Password Input

type="password" का उपयोग password enter करने के लिए किया जाता है। इसमें typed characters सामान्यतः hidden form में दिखाई देते हैं।

Radio Button

type="radio" का उपयोग ऐसे options के लिए किया जाता है जहाँ user को एक group में से एक option select करना हो। Radio buttons को एक group में रखने के लिए उनका name सामान्यतः समान रखा जाता है।

Checkbox

type="checkbox" का उपयोग multiple options select करने के लिए किया जाता है। User जरूरत के अनुसार एक या कई checkboxes select कर सकता है।

HTML

Code copied!

Textarea और Select

<textarea> Element

<textarea> का उपयोग multiple lines वाला text enter करने के लिए किया जाता है। इसका उपयोग feedback, message, address या description जैसे लंबे text के लिए किया जा सकता है।

<select> और <option>

<select> element का उपयोग dropdown list बनाने के लिए किया जाता है। इसके अंदर <option> elements रखे जाते हैं। User dropdown में उपलब्ध options में से एक option चुन सकता है।

HTML

Code copied!

Form Submit और Reset

Form में user द्वारा भरी गई information को submit करने के लिए <input type="submit"> या <button type="submit"> का उपयोग किया जा सकता है।

Submit button दबाने पर browser form को submit करने की कोशिश करता है। Form data कहाँ भेजा जाएगा, यह form के action attribute और request किस तरीके से भेजी जाएगी, यह method attribute से तय किया जा सकता है।

action Attribute

action attribute उस URL या destination को specify करता है जहाँ form data submit किया जाना है। अगर backend PHP file से data process करना हो, तो action में उस PHP file का path दिया जा सकता है।

method Attribute

method attribute यह बताता है कि form data किस HTTP method के द्वारा submit किया जाएगा। Forms में सामान्यतः GET और POST methods का उपयोग किया जाता है।

GET method में form data URL के query parameters में दिखाई दे सकता है, जबकि POST method में data request body के माध्यम से भेजा जाता है। Password जैसी sensitive information के लिए केवल POST इस्तेमाल करना ही पर्याप्त security नहीं है; website को HTTPS और उचित server-side security का भी उपयोग करना चाहिए।

Reset Button

<input type="reset"> form fields को उनकी initial/default values पर वापस कर सकता है। इसका उपयोग तब किया जाता है जब user form में भरी हुई information को clear या reset करना चाहता है।

Complete HTML Form Example

नीचे एक complete registration form का example दिया गया है। इसमें हमने <form>, <label>, <input>, text, email, password, radio, checkbox, <select>, <option>, <textarea>, submit और reset जैसे कई important form elements को एक साथ use किया है।

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
  </head>

<body>

<h2>Registration Form</h2>

<label for="email">Email:</label><br>
      <input type="email" id="email" name="email" required>
      <br><br>

<label for="password">Password:</label><br>
      <input type="password" id="password" name="password" required>
      <br><br>

<label>Gender:</label><br>

<input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label>

<label>Skills:</label><br>

<input type="checkbox" id="js" name="skills" value="javascript">
      <label for="js">JavaScript</label>

<label for="course">Select Course:</label><br>

<label for="message">Message:</label><br>

</body>
</html>

Code copied!

इस complete example में form के अंदर कई प्रकार के controls को एक साथ use किया गया है। required attribute की वजह से कुछ fields को submit करने से पहले भरना जरूरी हो जाता है।

HTML Forms के Advantages

User से information collect करना आसान होता है।
Login और registration जैसे features बनाने में उपयोगी होते हैं।
Contact और feedback forms बनाए जा सकते हैं।
अलग-अलग input types की मदद से user से अलग-अलग प्रकार की information ली जा सकती है।
CSS और JavaScript की मदद से forms को attractive और interactive बनाया जा सकता है।
Backend technologies जैसे PHP, Node.js आदि के साथ form data को process किया जा सकता है।

HTML Forms की Limitations

केवल HTML form अपने आप data को database में save नहीं करता। इसके लिए backend या किसी processing system की जरूरत हो सकती है।
HTML form का basic structure अपने आप बहुत ज्यादा attractive नहीं होता; design के लिए CSS की जरूरत पड़ सकती है।
Complex validation और dynamic behaviour के लिए JavaScript या server-side validation की आवश्यकता हो सकती है।
User data को सुरक्षित रखने के लिए केवल HTML पर्याप्त नहीं है। Server-side security और HTTPS जैसे security measures भी जरूरी होते हैं।

इस प्रकार HTML Forms website में user interaction का एक बहुत important हिस्सा हैं। <form> के अंदर अलग-अलग form controls का उपयोग करके user से information ली जा सकती है। आगे चलकर इन्हीं forms को CSS से design और JavaScript या backend technologies की मदद से interactive तथा functional बनाया जा सकता है।

Previous Next

Code copied!

Page Views

Visit ID

Not tracked yet

Visit Time

Time on Page

0 seconds

Request

Full Name *

Email Address *

Mobile Number

Message *

INITIALIZING...