HTML फॉर्म | HTML Form in Hindi

681

HTML form, document का एक भाग है जिसमे controls होते हैं जैसे कि text fields, password fields, checkboxes, radio buttons और menus आदि|

HTML form उपयोगकर्ता की वो data enter करने में मदद करता है जो server में processing के लिये भेजा जाना होता है|

HTML Form का इस्तेमाल क्यूं करें;

अगर आप site visitor से कुछ data collect करना चाहते हो तो आपको HTML forms की जरुरत पड़ेगी|

उदाहरण के लिये: अगर कोई उपयोगकर्ता internet पर कुछ खरीदता है तो उसे form भरना होता है जैसा कि shipping address और credit/debit कार्ड का विवरण (details) ताकि वस्तु दिये गए पते पर पहुंचाई जा सके|

HTML Form Syntax

  1. <form action=“server url” method=“get|post”>
  2.   //input controls e.g. textfield, textarea, radiobutton, button
  3. </from>

HTML Form Tags

HTML form tags की सूची नीचे दी गई है|

Tag Description
<form> यह उपयोगकर्ता की तरफ से inputs enter करने के लिए HTML form को परिभाषित करता है|
<input> यह input control को परिभाषित (define) करता है|
<textarea> यह multi-line input control को परिभाषित करता है|
<label> यह input element के लिये lable को परिभाषित करता है|
<fieldset> यह form में सम्बंधित elements का एक समूह बना देता है|
<legend> यह <fieldset> element के लिये caption को परिभाषित करता है|
<select> यह drop-down list को परिभाषित करता है|
<optgroup> यह drop-down list में सम्बंधित विकल्पों (options) के समूह को परिभाषित करता है|
<option> यह drop-down list में एक विकल्प को परिभाषित करता है|
<button> यह clickable button को परिभाषित करता है|

HTML 5 Form Tags

HTML 5 form tags की सूची नीचे दी गई है|

Tag Description
<datalist> यह input control के लिये pre-defined विकल्पों की सूची के बारे में बताता है|
<keygen> यह forms के लिए key-pair generator को परिभाषित करता है|
<output> यह किसी calculation के परिणाम (result) को परिभाषित करता है|

HTML TextField Control

Input tag के type=”text” attribute से textfield control बनता है, इसे single line textfield control भी कहा जाता है| Name attributeवैकल्पिक (optional) है, पर फिर भी server side components के लिये इसकी जरुरत पड़ती है जैसे कि JSP, ASP, PHP आदि|

  1. <form>
  2.     First Name: <input type=“text” name=“firstname”/> <br/>
  3.     Last Name:  <input type=“text” name=“lastname”/> <br/>
  4.  </form>

Lable Tag in Form

Form में label का होना सही माना जाता है क्योंकि ऐसा करने से code parser / browser को user friendly हो जाता है|

अगर आप label tag पर click करते हो तो यह text control पर ध्यान देगा| ऐसा करने के लिये आपको label tag में for attribute की जरुरत पड़ेगी ये input tag के id attribute की तरह ही होना चाहिए|

  1. <form>
  2.     <label for=“firstname”>First Name: </label>
  3.               <input type=“text” id=“firstname” name=“firstname”/> <br/>
  4.    <label for=“lastname”>Last Name: </label>
  5.               <input type=“text” id=“lastname” name=“lastname”/> <br/>
  6.  </form>

HTML Password Field Control

Password field control में उपयोगकर्ता को password दिखाई नही देता|

  1. <form>
  2.     <label for=“password”>Password: </label>
  3.               <input type=“password” id=“password” name=“password”/> <br/>
  4. </form>

HTML 5 Email Field Control

Email field HTML 5 में नया है| यह correct email address के लिये text की पुष्टि (validates) करता है| आपको इस field में @ और . का इस्तेमाल करना चाहिए|

  1. <form>
  2.      <label for=“email”>Email: </label>
  3.               <input type=“email” id=“email” name=“email”/> <br/>
  4. </form>

Radio Button Control

Radio button का इस्तेमाल बहुत सारे विकल्पों में से एक विकल्प को चुनने के लिये किया जाता है| यह gender और quiz questions आदि में इस्तेमाल किया जाता है|

अगर आप सभी radio buttons के लिये एक नाम का इस्तेमाल करते हो तो, एक समय में केवल एक ही radio button चुना जा सकेगा|

  1. <form>
  2.       <label for=“gender”>Gender: </label>
  3.               <input type=“radio” id=“gender” name=“gender” value=“male”/>Male
  4.               <input type=“radio” id=“gender” name=“gender” value=“female”/>Female <br/>
  5. </form>

Checkbox Control

Checkbox control का इस्तेमाल दीये गए checkboxes के बहुत सारे विकल्पों (optoins) को check करने के लिये किया जाता है|

  1. <form>
  2. Hobby:<br>
  3.               <input type=“checkbox” id=“cricket” name=“cricket” value=“cricket”/>
  4.                  <label for=“cricket”>Cricket</label>
  5.               <input type=“checkbox” id=“football” name=“football” value=“football”/>
  6.                  <label for=“football”>Football</label>
  7.               <input type=“checkbox” id=“hockey” name=“hockey” value=“hockey”/>
  8.                  <label for=“hockey”>Hockey</label>
  9. </form>

HTML Form Example

HTML form को बनाने के एक आसान उदाहरण नीचे दिया गया है|

  1. <form action=“#”>
  2. <table>
  3. <tr>
  4.     <td class=“tdLabel”><label for=“register_name” class=“label”>Enter name:</label></td>
  5.     <td><input type=“text” name=“name” value=“” id=“register_name” style=“width:160px”/></td>
  6. </tr>
  7. <tr>
  8.     <td class=“tdLabel”><label for=“register_password” class=“label”>Enter password:</label></td>
  9.     <td><input type=“password” name=“password” id=“register_password” style=“width:160px”/></td>
  10. </tr>
  11. <tr>
  12.     <td class=“tdLabel”><label for=“register_email” class=“label”>Enter Email:</label></td>
  13.     <td
  14. ><input type=“email” name=“email” value=“” id=“register_email” style=“width:160px”/></td>
  15. </tr>
  16. <tr>
  17.     <td class=“tdLabel”><label for=“register_gender” class=“label”>Enter Gender:</label></td>
  18.     <td>
  19. <input type=“radio” name=“gender” id=“register_gendermale” value=“male”/>
  20. <label for=“register_gendermale”>male</label>
  21. <input type=“radio” name=“gender” id=“register_genderfemale” value=“female”/>
  22. <label for=“register_genderfemale”>female</label>
  23.     </td>
  24. </tr>
  25. <tr>
  26.     <td class=“tdLabel”><label for=“register_country” class=“label”>Select Country:</label></td>
  27.     <td><select name=“country” id=“register_country” style=“width:160px”>
  28.     <option value=“india”>india</option>
  29.     <option value=“pakistan”>pakistan</option>
  30.     <option value=“africa”>africa</option>
  31.     <option value=“china”>china</option>
  32.     <option value=“other”>other</option>
  33. </select>
  34. </td>
  35. </tr>
  36. <tr>
  37.     <td colspan=“2”><div align=“right”><input type=“submit” id=“register_0” value=“register”/>
  38. </div></td>
  39. </tr>
  40. </table>
  41. </form>

ट्राई करें

Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<form> to <h6> Yes Yes Yes Yes Yes