Loading...

HTML in Hindi – Forms

  • Introduction to HTML forms in Hindi 
  • <form> tag in HTML forms in Hindi 
  • <input> tag in HTML forms in Hindi

Introduction to HTML Forms 

किसी भी webpage पर यदि आप यूज़र से कोई information लेना चाहते है तो इसके लिए आप HTML forms का इस्तेमाल करते है। उदाहरण के लिए जब भी आप कोई नयी email id create करते है तो सबसे पहले sign up form भरते है। ऐसा करके आप अपनी information webpage के द्वारा provide करते है।

Get Information From User

Forms यूज़र से input प्राप्त करने का सबसे common तरीका होता है। कोई भी form यूज़र से input लेता है और जब यूज़र उस form को submit करता है तो ये सारी information किसी database में store कर ली जाती है।

User से information input करवाने के लिए आप कई प्रकार के form elements यूज़ कर सकते है। जैसे की text-box, radio button, drop-down list आदि।

<form> Tag

किसी भी webpage में forms create करने के लिए आप <form> tag यूज़ करते है। ये container tag होता है जो की पुरे HTML form की beginning और ending define करता है। इस tag के अंदर अलग अलग form elements define किये जाते है।

action

इस attribute से आप define करते है की form submit होने पर क्या करना है। जैसे की यूज़र के form submit करते ही आप कोई दूसरे HTML webpage में thank you message शो कर सकते है या कोई php script execute करवा सकते है।

method

इस attribute से आप data को store करने का method define करते है। इस attribute की केवल 2 values GET या POST हो सकती है। 

target

इससे आप form submission के बाद जो window show होगी वह define करते है।

<input> Tag Attributes

Form elements आप HTML <input> tag के द्वारा define करते है। इस tag के कुछ attributes होते है जो आप elements को configure करने के लिए यूज़ करते है।

name

इस attribute से particular form element का नाम define किया जाता है। बाद में यही नाम server पर values को store करने के लिए यूज़ किया जाता है।   

type

ये element का type show करता है। इससे ये भी पता चलता है की किस तरह की value input की जा सकती है। जैसे text-boxes के लिए type text होता है।

size

इससे आप किसी form element की size width में define करते है। जैसे की आप किसी text-box को अपने according width दे सकते है।

value

ये किसी element की default value हो सकती है। जैसे की आप किसी text box के अंदर first name लिखा हुआ देखते है। आइये अब देखते है की इन tags और attributes को यूज़ करते हुए आप कैसे एक complete form create कर सकते है।

Creating Text Boxes

HTML में forms के लिए text-boxes क्रिएट करना बहुत ही easy है। इसके लिए आप <input> tag के type attribute में text value define करते है।

कोई भी default value देने के लिए जो text-box के अंदर show होगी आप value attribute यूज़ कर सकते है। यदि आप password input करने के लिए text-box बना रहे है तो type password देना होगा।  

Example

<!DOCTYPE html>

<html>

<head> 
<title>Text box demo</title> 
</head>

<body> 

<form> 
Enter your email :<input type="text" value="Email..." size=" 20"> <br><br> 
Enter your password :<input type="password" value="Password..." size="20"> 
</form> 
 
</body>

</html> 

Output

HTML-form-example-output

Creating Buttons     

HTML forms में आप 4 तरह से buttons क्रिएट कर सकते है। इन्हे आप type attribute के द्वारा define करते है।

  • Submit – ये button form submit करने के लिए यूज़ किया जाता है। ये button पुरे form के सभी elements की values को एक साथ server पर send कर देता है। आप type attribute में submit value define करके इस तरह का button क्रिएट कर सकते है।   
  • Reset – इस button को पुरे form के सभी fields की values को reset करने के लिए यूज़ किया जाता है। Reset button create करने के लिए आप type attribute में reset value define करते है। 
  • Normal button – ये एक normal button होता है जिस पर click होते ही आप कोई भी action ले सकते है। इस तरह का button क्रिएट करने लिए आप type attribute के value button देते है। 
  • Image button – इस तरह के button में आप button के background में कोई image दे सकते है। इस तरह का button create करने के लिए आप type attribute की value image देते है। 
<!DOCTYPE html>

<html> 

<head> 
<title>Button demo</title> 
</head> 

<body> 

<form> 
<input type="submit">
<input type="reset"> 
<input type="button" value="Click here"> 
<input type="image" src="image URL" alt="text to show"> 
</form> 

</body> 
</html> 

Output

HTML-button-example-output

Creating Radio Buttons

Radio buttons के द्वारा यूज़र बिना keyboard के webpage को information provide करता है। Radio button एक गोल box होता है जिसे choose करके user अपनी choice बताता है।

जैसे की यदि आप user के gender के बारे में जानना चाहते है तो आप 2 radio buttons create करके उनके नाम male और female दे सकते है। यूजर इनमे से कोई भी choose करके अपना gender बता सकता है।

आप 2 या 2 से अधिक radio buttons को name attribute के द्वारा connect कर देते है ताकि user एक समय पर केवल एक ही radio button select सके। जिन radio buttons को आप आपस में connect करना चाहते उनके आप name same देते है। Radio button क्रिएट करने के लिए आप <input> tag के type attribute की value radio देते है। Name attribute में radio button का नाम दिया जाता है।

जैसा की मैने ऊपर बताया यदि आप Radio buttons का group बनाना चाहते है ताकि user एक बार में सिर्फ एक ही radio button select कर सके तो ऐसी situation में आप सभी radio buttons को एक ही नाम देते है।

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Radio Button Demo </title>
</head> 

<body> 

<form> 
Select your Gender: <br> 
<input type="radio" name="gender"> Male  
<input type="radio" name="gender"> Female 
</form> 

</body> 
</html> 

Output

HTML-radio-button-example-output

Creating Drop Down List 

Drop down list create करने के लिए आप <select> tag इस्तेमाल करते है। इस tag को HTML form tag के अंदर define किया जाता है। ये tag drop down list का structure क्रिएट करता है।

Drop down list की values define करने के लिए <option> tag को define किया जाता है। आप जितने list item add करना चाहते है उतने ही <option> tag define करते है। <option> tag को <select> tag में define किया जाता है।

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Drop down list demo </title>
</head> 

<body> 

<form> 
<select> 
<option>Select</option>
<option value="Male">Male</option> 
<option value="Female">Female</option> 
</select>
</form> 
 
</body>

</html> 

Output

HTML-drop-down-list-example-output

Creating Check Boxes 

Check boxes के द्वारा किसी भी user को multiple options को choose करने के facility दी जाती है। जैसे की यदि आप चाहते है की user multiple courses choose करे तो आप check boxes create कर सकते है और user उन्हें select कर सकता है।

Check boxes क्रिएट करना बहुत ही आसान होता है। इसके लिए आप <input> tag के type attribute में checkbox value देते है और Name attribute में checkbox का नाम देते है। Value attribute की value भी आप दे सकते है।

Example

<!DOCTYPE html>

<html> 

<head> 
<title>Check box demo </title> 
</head> 

<body> 

<form> 
<input type="checkbox" name="MCA" > MCA  
<input type="checkbox" name="BTECH"> Btech  
<input type="checkbox" name="BCA">BCA 
<input type="checkbox" name="BCA">M. tech
</form> 

</body> 
</html>

Output

HTML-checkbox-example-output

Previous: HTML Blocks
Next: HTML <font> Tag

12 thoughts on “HTML in Hindi – Forms”

  1. बहोत ही अच्छा आर्टिकल है।
    लेकिन अगर सब्मिट बोटोन पे लिंक डालना हो तो कैसे डालेंगे

    • iske liye aapko ek scripting language use karni hogi jo database or html form dono ke beech kaam kare or form se information lekar database me store kare jese ki PHP (Hypertext Preprocessor). ye kaam aap HTML (Hypertext Markup Lanuage) ya CSS (Cascading Style Sheet) dvara nahi kar sakte h.

  2. जो इनफार्मेशन सामने वाला के द्वारा फॉर्म में भरा गया ओ हमें मिलता है।उसके साथ ही साथ जो coding है ओ भी मिलता है ।।ऐसा कुछ कोड है क्या जिससे केवल उनके द्वारा भरा गया जानकारी फ़िल्टर हो के हमारे द्वारा दिया गया लिंक में स्टोर हो जाए।।कोडिंग न आये जरूर बताये कोडिंग को plz

    • Koi bhi jaankari kis link me store nahi hoti h. Yedi aap form me submit ki gyi jaankari ko store karna chahte h to iske liye aapko database use karna hoga. HTML form me bhar gyi jaankari ko database me store karne ke liye aapko ek server side scripting language ki aavshyakta hogi jese ki PHP.jab aap form submit karte h to form ka data hi submit hota coding submit nahi hoti h. Kya aap yehi puchana chahte the??

  3. मेने एक html में इंडेक्स बनाया है वर्तमान में अगर मुझे उस इंडेक्स में नै इंट्री करनी होती है तो में कोड ऐड करता हो पर में चाहता हूँ की डॉम JavaScript की मदद से इंट्री करो मेने डॉम के कुछ कोड तो सिख लिए ह पर मुझे यह समझ नहीं आ रहा है की x.setAttribute("id","id neme")
    इस में जो id नाम है में उसे इनपुट टाइप ="टेक्स्ट" से लिंक करना चाहता हूँ ताकि में अपने अनुसार id को javascript में पंहुचा सकू मेरी मदद करे |

    • Please explain more. What you are asking is not clear to me. If you want to access value of a textbox using DOM than you can do this.

      input type="text" name="FirstName"

      and then in javascript use below code

      var entry = getElementByName("FirstName").value;

      document.write(entry);

  4. var h = document.createElement("div");
    h.setAttribute("id","xxx")
    .
    इस में जो id है वो हर बार xxx ही क्रिएट हो रही है में चाहता हूँ कि html पेज पर एक input id="abc" जिसमे में अपने अनुसार id लिखू और यह अपने आप ही javascript detect कर ले

    • Try this..

      form
      input type="text" name="Id";
      button type="button" onclick="myFunction()"
      /form

      function myFunction()
      {
      var customId = getElementByName("Id").value;

      var h = document.createElement("div");

      h.setAttribute("id",customId);
      }

Comments are closed.