Textual description of firstImageUrl

HTML in Hindi : Forms

HTML Forms 

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

Introduction to HTML Forms 

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

Forms यूज़र से input प्राप्त करने का सबसे common तरीका होता है। कोई भी form यूज़र से input लेता है और जब यूज़र उस form को submit करता है तो ये सारी information किसी database में store कर ली जाती है। User से information input करवाने के लिए आप कई प्रकार के form elements यूज़ कर सकते है। जैसे की text-box, radio button, drop-down list आदि।

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


 Attribute 
Explanation  
action  
इस attribute से आप define करते है की form submit होने पर क्या करना है। जैसे की यूज़र के form submit करते ही आप कोई दूसरे webpage में thank you message शो कर सकते है या कोई php script execute करवा सकते है।     
method  
इस attribute से आप data को store करने का method define करते है। इस attribute की केवल 2 values GET या POST हो सकती है।    
target 
इससे आप form submission के बाद जो window show होगी वह define करते है।   

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


 Attribute 
Explanation  
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 देना होगा। इसका उदाहरण नीचे दिया जा रहा है।   

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

<body>

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

</body>

</html> 

ऊपर दी गयी script निचे दिया गया web page generate करेगी।

HTML-form-example-output


Creating Buttons     

HTML में आप 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 देते है। 

<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> 

ऊपर दी गयी script निचे दिया गया web page generate करती है।

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 को एक ही नाम देते है। इसका उदाहरण नीचे दिया जा रहा है।

<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> 

ऊपर दी गयी script निचे दिया गया web page generate करती है।

HTML-radio-button-example-output


   

Creating Drop Down List 

Drop down list create करने के लिए आप <select> tag इस्तेमाल करते है। इस tag को 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 किया जाता है। इसका उदाहरण नीचे दिया गया है।    

<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> 

ऊपर दी गयी script निचे दिया गया web page generate करती है।

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 में check box value देते है और Name attribute में check-box का नाम देते है। Value attribute की value भी आप दे सकते है। इसका उदाहरण नीचे दिया गया है।

<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> 

ऊपर दी गयी script निचे दिया गया web page generate करती है।

HTML-checkbox-example-output

      DMCA.com Protection Status

12  Replies so far - Add your comment

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

    उत्तर देंहटाएं
  2. उत्तर
    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.

      हटाएं
  3. sir aapka tutorial/lecture bahut useful hai lekin jo example hai wo copy kyun ni hoti h

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

    उत्तर देंहटाएं
    उत्तर
    1. 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??

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

    उत्तर देंहटाएं
    उत्तर
    1. 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);

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

    उत्तर देंहटाएं
    उत्तर
    1. 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);
      }

      हटाएं