HTML Form क्या है | HTML Form In Hindi

HTML Form In Hindi – HTML एक Markup Language है जिसकी सहायता से हम एक वेब पेज का आधार बना सकते हैं और इस आधार की Style करनें के लिए CSS का इस्तेमाल कर सकते हैं.

एक वेब पेज बनानें के लिए HTML में टैग होते हैं और इन टैग को टारगेट करके Style कर सकते हैं.

ठीक इसी प्रकार एक HTML Form बनानें के लिए Form के Tag होते हैं जिनकी सहायता से Form बनाया जा सकता है लेकिन इसके लिये HTML Tags का ज्ञान होना जरूरी है.

आपको पता होना चाहिए की HTML Form के टैग काम कैसे करते हैं, किस Tag का क्या इस्तेमाल है? और कोनसा टैग क्या काम करता है?

दोस्तों किसी भी Website में डिजाईन में Issue होना एक Normal बात है लेकिन Website के Form में Issue होना Normal नहीं है क्योंकि Form ऐसा साधन है जिसके जरिये User अपनीं जानकारी भर कर सर्विस पा सकता है और Website के Owner से सीधे ही सम्पर्क कर सकता है |

एक उदहारण लेते हैं जिससे आपको समझनें में आसानीं होगी,

दोस्तों जब आप Online शौपिंग करते हैं तो लास्ट में आपके सामनें Form के काफी फिल्ड दिखाई देते हैं जो की अलग-अलग प्रकार के होते हैं जहाँ आपको Name, Email, Address, Phone No, Postal Code आदि डालनें होते हैं |

और जो महत्वपूर्ण फील्ड हैं उनको Required रखा जाता है | ये सब काम Customer की जानकारी को Collect करनें के लिए किए जाते हैं जिसके जरिये Company, User के घर सर्विस दे सके,

और ये सब प्रकिर्या एक Form की वजह से Complete होती है इसलिए HTML Form In Hindi के आर्टिकल में आज हम form tag in html in hindi की Detail से बात करनें वाले हैं तो आप आर्टिकल को अंत तक जरुर पढ़ें |

HTML Form In Hindi

दोस्तों Form का काम है User की जानकारी को Collect करना और साथ ही User को जानकारी भरनें का शॉर्टकट तरीका प्रदान करना जिससे User को जानकारी भरनें में कम से कम टाइम लगे |

जानकारी Collect करनें के लिए Field में Value भरनी होती हैं लेकिन आपनें कभी देखा होगा की Form में चेकबॉक्स रेडिओ बटन आदि लगे होते हैं जिनकी सहायता से User एक क्लिक में अपनीं जानकारी दे सकता है |

ये सब काम Form Tag की सहायता से किए जाते हैं तो सबसे पहले हम बात कर लेते हैं html form tag in hindi की जो आपको निचे बताए गए हैं |

HTML Form Tag

(HTML Form In Hindi) – HTML फॉर्म बनाने के लिए <form> टैग का उपयोग किया जाता है और इस टैग का उपयोग user इनपुट के लिए किया जाता है |

<form> टैग Important टैग है और सभी टैग इस टैग के अंदर लिखे जाते हैं, तो अब बात करते हैं बाकी HTML Tags के बारे में –

दोस्तों इन सभी tags की हम detail से बात करेंगे लेकिन उससे पहले बात कर लेते हैं attribute की और elements की क्योंकि html form में attribute और elements महत्वपूर्ण role निभाते हैं attribute और elements के बिना आप complete html form नहीं बना सकते हैं इसलिए html form के attribute और elements का ज्ञान होना जरूरी है |

HTML Form Attributes In Hindi

अब बात करते हैं पांच ऐसे attribute की जो काफी महत्वपूर्ण हैं |

1. Action Attribute
2. Target Attribute
3. Method Attribute
4. Autocomplete Attribute
5. Novalidate Attribute

Action Attribute

form के submit होनें के बाद क्या होना चाहिए ये सब action attribute तय करता है जैसे आप form submit पर कोई दूसरा पेज open करवा सकते हैं या कोई मेसेज भी दिखा सकते हैं |

ये सब काम php की मदद से किए जाते हैं जो की सर्वर साइड language है |

नीचे दिए गए उदाहरण में, form data “form_page.php” नाम की फ़ाइल को भेजा जाएगा, इस फ़ाइल में एक सर्वर-साइड स्क्रिप्ट है जो form के डेटा को संभालती है: (HTML Form In Hindi)

<form action="/form_page.php">
  <input type="text" placeholder="First Name">
  <input type="submit" value="Submit">
</form>

Target Attribute

target attribute ये तय करता है की आपका form submit होनें के बाद उसका response कहाँ डिस्प्ले होना है जैसे अगर आप target attribute में _blank लगते हैं तो form submit होनें के बाद उसका response नई window में दिखाई देगा | इसको आप निचे दिए गए example से समझ सकते हैं |

<form action="/form_page.php" target="_blank">
  <input type="text" placeholder="First Name">
  <input type="submit" value="Submit">
</form>

target attribute में blank के आलावा और भी attribute हैं जिनके नाम आपको निचे दिखाई दे रहे होंगे |

इनमें default value का नाम _self है जिसका मतलब की form submit होनें के बाद form का response current tab के अंदर ही दिखाई या डिस्प्ले होगा |

Method Attribute

Method Attribute में डेटा किस method से होकर जायेगा ये define किया जाता है और Method Attribute में केवल 2 ही values को पास किया जाता है जिसमें पहले है get और दूसरी है post.

get value में response के तौर पर पूरा URL दिखाई देता है जबकि पोस्ट में URL दिखाई नहीं देता है |

default Method Attribute की value GET है |

Note:- मेरे हिसाब से अगर आप कोई ऐसा form लगा रहे हैं जिसमें sensitive or personal information के फील्ड हैं तो आप उस form में Method Attribute की value हमेशा post ही रखें |

Autocomplete Attribute

autocomplete attribute यह specifies करता है की user की जानकारी अपनें आप भरनी है या नहीं |

जब autocomplete attribute on होता है, तो user द्वारा पहले भरे गए value के आधार पर ब्राउज़र अपनें-आप से value को enter करता है और अगर a utocomplete attribute off हो तो user को सभी फील्ड की value एक-एक करके वापिस भरनीं होगी |

इसे लगानें का तरीका कुछ इस प्रकार है,

<form action="/form_page.php" autocomplete="on">

Novalidate Attribute

novalidate attribute एक boolean attribute है जिसका उपयोग काफी कम किया जाता है |

novalidate attribute का काम है validate फील्ड को novalidate बनाना जिससे अगर आप किसी फील्ड में गलत जानकारी add करते हैं तो भी आपके सामनें कोई error नहीं आएगी |

इन सबके आलावा और भी attribute है जो आपको निचे टेबल में दिखाई दे रहे होंगे |

HTML Form attributes के आलावा HTML Form Elements भी हैं जिनका पता होना जरूरी है | HTML Form Elements के बारे में आपको निचे detail से बताया गया है इसलिए आर्टिकल को आगे पढ़ते रहें क्योंकि अधूरे ज्ञान से बेहतर है पूरा ज्ञान |

HTML Form Elements In Hindi

(HTML Form In Hindi) – HTML Form Elements में काफी elements हैं जिनका काम है form को तैयार करना और आपको पता होना चाहिए की कोन-कोनसे elements हैं | HTML Form In Hindi के आर्टिकल में आपको सभी जानकारी detail से मिलनें वाली है |

निचे आपको HTML Form Elements के नाम और उनकी description बताई गई है |

1. <input>
2. <label>
3. <select>
4. <textarea>
5. <button>
6. <fieldset>
7. <legend>
8. <datalist>
9. <option>
10. <optgroup>

Input Element

(HTML Form In Hindi) – सबसे ज्यादा काम में लिए जाने वाले form elements में से <input> element एक है इसका उपयोग सबसे ज्यादा किया जाता है क्योंकि <input> element को type attribute के जरिये अलग-अलग तरह से काम में लिया जा सकता है |

दोस्तों <input> element जो है type attribute पर निर्भर करता है, इसके अलग-अलग type हैं जिनके बारे में आगे बताया गया है |

यहाँ निचे आपको एक input का उदहारण दिया गया है |

<form>
	<label for="first-name">First name:</label>
	<input type="text" id="first-name" name="first-name">
</form>

HTML Input Types – HTML Form In Hindi

यहाँ निचे आपको अनेक प्रकार के types बताए गए हैं जिनका उपयोग आप html form बनाते समय कर सकते हैं |

Note :- दोस्तों input का default type “text” ही रहेगा यानि की अगर आप input में कोई type add नहीं करते हैं तो default type “text” ही रहेगा |

HTML Input Types के बारे में ज्यादा जानकारी के लिए आप official वेबसाइट पर चेक कर सकते हैं |

label Element

दोस्तों label element का उपयोग एक या एक से ज्यादा form elements को दर्शानें के लिए किया जाता है इसके आलावा label Element का उपयोग screen-reader users के लिए भी किया जाता है |

label Element उन tags को या elements को आसान बनाता है जिसमें क्लिक करना मुस्किल है या फिर element काफी छोटा है जैसे अगर कहीं radio बटन है या फिर कोई checkbox है जिन पर क्लिक करनें में user को परेशानी होती है उस जगह पर label element काफी अच्छे तरीके से काम करता है | क्योंकि अगर आप label के टेक्स्ट को क्लिक करेंगे तो भी element select या toggle हो जायेगा |

label को इस्तेमाल करनें के लिए आपको एक बात ध्यान में रखनीं है आपको label के अंदर एक for attribute add करना है जो input की id के बराबर होना चाहिए |

label Element का एक अच्छा उदहारण आप निचे देख सकते हैं |

<form>
	<div>
		<label for="first-name">First name:</label>
		<input type="text" id="first-name" name="first-name">
	</div><br>
	<div>
		<label for="last-name">Last name:</label>
		<input type="text" id="last-name" name="last-name">
	</div>
</form>

Select Element

Select Element के इस्तेमाल से हम एक drop down लिस्ट बना सकते हैं जिसके इस्तेमाल से user एक क्लिक से जानकारी दे सकता है और लिस्ट बनानें के लिए option की जरूरत होती है जिन्हें user select कर सकता है और option बनानें के लिए <select> टैग के अंदर <option> टैग लगाया जाता है |

select का एक साधारण उदहारण निचे आप देख सकते हैं |

<form>
	<label>Please select one option</label>
	<select>
	  <option disabled>Please select one</option>
	  <option>A</option>
	  <option>B</option>
	  <option>C</option>
	</select>
</form>

HTML textarea

दोस्तों textarea जो है वो multiple लाइन लिखनें के लिए इस्तेमाल किया जाता है जिसका default साइज़ सभी फील्ड से अधिक होता है | textarea element को मेसेज जैसे फील्ड के लिए इस्तेमाल किया जाता क्योंकि मेसेज की लम्बाई कितनीं भी हो सकती है |

इसमें आप fix height भी दे सकते हैं, इसके भी 2 तरीके हैं पहले तरीके में आप attribute का इस्तेमाल कर सकते हैं जो आपको निचे दिखाई दे रहे होंगे और दूसरा है आप CSS के जरिये भी height कर सकते हैं |

<form>
	<label>Share Your Feedback</label><br><br>
	<textarea placeholder="Message" cols="10" rows="10"></textarea>
</form>

Button Element

Button Element क्लिक करनें के लिए एक बटन तैयार करता है जिसके जरिये user किसी स्पेसिफिक टेक्स्ट पर क्लिक कर सकता है |

दोस्तों बटन में type attribute का इस्तेमाल किया जाता है ताकि browser को बताया जा सके की हमारा बटन किस purpose से है |

simple बटन बनानें के लिए आप निचे उदहारण देख सकते हैं |

<form>
	<label for="first-name">First Name</label>
	<input type="text" name="first-name" id="first-name"><br><br>
	<button type="submit">Submit</button>
	<button type="reset">Reset</button>
</form>

Fieldset Element

दोस्तों Fieldset Element का काम है किसी form के बाहर बॉर्डर को लगाना ताकि form का एक ग्रुप बन जाए ये सब काम एक या एक से अधिक form के लिए किया जा सकता है ताकि form का ग्रुप अलग-अलग दिखाई दे |

Fieldset Element के अंदर ही legend element का उपयोग किया जाता है |

Legend Element

Fieldset Element के अंदर legend element का उपयोग किया जाता है ताकि legend के अंदर का टेक्स्ट एक कैप्शन बन सके |

निचे आपको Fieldset Element और Legend Element का simple उदहारण दिख रहा होगा |

<form action="">
  <fieldset>
    <legend>Put Your Info..:</legend>
    <label for="first-name">First name:</label><br>
    <input type="text" id="first-name" name="fname" value="Vikash"><br><br>
    <label for="last-name">Last name:</label><br>
    <input type="text" id="last-name" name="lname" value="Pareek"><br><br>
    <input type="submit" value="Submit">    
  </fieldset>
</form>

Datalist Element

दोस्तों datalist element में predefine option बनें होते हैं जो user को select करनें होते हैं | इसमें user data input करते ही options की एक ड्रॉप-डाउन list देखेंगे जो की predefine होते हैं |

दोस्तों datalist element को इस्तेमाल करनें के लिए आपको input element के अंदर list attribute का इस्तेमाल करना है और list attribute को datalist की id में रखना है |

जैसे की आप निचे उदहारण देख सकते हैं |

<form>
  <input list="fruits">
  <datalist id="fruits">
    <option value="Apple">
    <option value="Banana">
    <option value="Mango">
    <option value="Orange">
  </datalist>
</form>

Option Element

option element के बारे में आपको मैंने पहले ही बता दिया है और इसका एक simple उदहारण भी दिया है जिसको आप ऊपर देख सकते हैं |

option element को drop-down लिस्ट के लिए डिफाइन किया जाता है |

Optgroup Element

जैसे की आपनें ऊपर पढ़ लिया होगा की select element से हम एक drop-down लिस्ट बना सकते हैं ठीक उसी प्रकार optgroup element से हम ग्रुप लिस्ट बना सकते हैं |

Optgroup Element का इस्तेमाल लंबी लिस्ट बनानें के लिए किया जाता है ताकि user को लिस्ट के ग्रुप में कोई confusion ना हो |

इसका एक simple उदहारण आप निचे देख सकते हैं |

<form action="">
  <select>
      <optgroup label="Group 1">
        <option>Option 1.1</option>
      </optgroup>
      <optgroup label="Group 2">
        <option>Option 2.1</option>
        <option>Option 2.2</option>
      </optgroup>
      <optgroup label="Group 3">
        <option>Option 3.1</option>
        <option>Option 3.2</option>
        <option>Option 3.3</option>
      </optgroup>
  </select>
</form>

दोस्तों HTML Form In Hindi के आर्टिकल में हमनें Form Tag के बारे में बात कर ली और HTML Form Attributes के बारे में जान लिया इनके आलावा HTML Form Elements के बारे में भी बात कर ली लेकिन form के अंदर input के types काफी important होते हैं उनके बारे में हमनें ज्यादा बात नहीं की है अभी तक इसलिए अब बात करते हैं उन types की जो सबसे ज्यादा काम में लिए जाते हैं |

HTML Input Types

html form में input के types और attribute काफी हैं जिनकी मदद से हम एक वेब form बना सकते हैं | HTML Form In Hindi के आर्टिकल में पहले बात करेंगे html Input Types के बारे में |

Input Type Text

दोस्तों Input Type Text के जरिये हम एक field बना सकते हैं जिसमें user टेक्स्ट इनफार्मेशन लिख सकता है और Input Type Text का ये फील्ड काफी important है |

इसका simple उदहारण आप निचे देख सकते हैं |

<form action="">
  <label for="text">Input Type Text Example: </label>
  <input id="text" type="text">
</form>

Input Type Password

पासवर्ड user की पहली privacy होती है जिसको लिखते समय hide रखना होता है इसलिए user privacy के लिए ये सब काम input element में default होते हैं लेकिन उसके लिए हमें input का type पासवर्ड रखना है, जैसे की आप निचे देख सकते हैं |

<form action="">
  <label for="text">Input Type Password Example: </label>
  <input id="text" type="password">
</form>

Input Type Submit

submit बटन के बिना form के डेटा को submit करवाना मुस्किल है क्योंकि submit बटन form-handler का काम करता है जैसे ही submit बटन पर user क्लिक करता है ठीक उसी टाइम submit जो है form के डेटा को action को पास करता है और आगे का काम action attribute से होता है |

दोस्तों submit का type हम input में या बटन टैग में भी दे सकते हैं |

<form action="">
    <div>
      <label for="email">Email :</label>
      <input id="email" type="email">
    </div><br>
  <div>
    <label for="text">Password</label>
    <input id="text" type="password">
  </div>
</form>

Input Type Reset

Input Type Reset का काम होता है सभी form की value को उसकी default value में वापस लाना | इसे आप 2 तरीकों से इस्तेमाल कर सकते हैं form के अंदर

1. <input type=”reset”>
2. <button type=”reset”></button>

यहाँ निचे आप उदहारण देख सकते हैं |

<form action="">
    <div>
      <label for="email">Email :</label>
      <input id="email" type="email">
    </div><br>
  <div>
    <label for="text">Password</label>
    <input id="text" type="password">
  </div>
  <br>
  <button type="Submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Input Type Radio

radio type के जरिये user multiple विकल्पों में से किसी एक को select कर सकता है |

दोस्तों एक साथ एक से ज्यादा radio बटन लगा सकते हैं लेकिन उनमें से किसी एक को select करवानें के लिए अभी input में name attribute का उपयोग करना होगा और name attribute के अंदर आप एक ही value को add करेंगे जैसे की आप निचे उदहारण में देख सकते हैं |

<form>
  <input type="radio" id="html" name="language">
  <label for="html">HTML</label><br>

  <input type="radio" id="css" name="language">
  <label for="css">CSS</label><br>

  <input type="radio" id="wordpress" name="language">
  <label for="wordpress">WordPress</label>
</form>

Input Type Checkbox

Input Type Checkbox से user एक या एक से ज्यादा option select कर सकता है और चेकबॉक्स लगानें से user एक क्लिक से दिए हुए option को select कर सकता है |

निचे इसका आप code देख सकते हैं |

<form>
  <fieldset>   

      <legend>What are you interested in </legend> 

      <input type="checkbox" name="interest" id="designing">
      <label for="designing">Designing</label><br>

      <input type="checkbox" name="interest" id="development">
      <label for="development">Development</label><br>

      <input type="checkbox" name="interest" id="graphic">
      <label for="graphic">Graphic</label> 

  </fieldset>  
</form>

HTML Form In Hindi Conclusion

आज आपनें HTML Form In Hindi के बारे में पढ़ा जिसमें हमनें बात की HTML Form tag के बारे में HTML Form Elements के बारे में HTML Form attributes के बारे में तो दोस्तों मुझे उम्मीद है HTML Form In Hindi के आर्टिकल से आज आपनें कुछ नया सिखा होगा.

अगर आपको HTML Form In Hindi का ये आर्टिकल helpful लगा है तो इसे अपनें दोस्तों के साथ share जरुर करें और ताज़ा अपडेट पानें के लिए आप मेरे साथ social media से जुड़ सकते हैं.

FAQs