Web, Tutorial

HTML मे form कैसे बनाये । HTML me form kaise banaye

hindilish
HTML me form kaise banaye | HTML मे form कैसे बनाये |  HTML form kya hai | Registration form kaise banaye

HTML me form kaise banaye | HTML मे form कैसे बनाये |  HTML form kya hai | Registration form kaise banaye | how to make form in html 

HTML me form kaise banaye | HTML मे form कैसे बनाये |  HTML form kya hai - how to make form in html | Registration form kaise banaye
HTML me form kaise banaye

HTML में टेबल कैसे बनाये

HTML form kya hai

HTML फॉर्म एक दस्तावेज है जो इंटरैक्टिव नियंत्रणों का उपयोग करके वेब सर्वर पर उपयोगकर्ता की जानकारी संग्रहीत करता है। एक HTML फॉर्म में विभिन्न प्रकार की जानकारी होती है जैसे उपयोगकर्ता नाम, पासवर्ड, संपर्क नंबर, ईमेल आईडी आदि। HTML फॉर्म में उपयोग किए जाने वाले तत्व चेक बॉक्स, इनपुट बॉक्स, रेडियो बटन, सबमिट बटन आदि हैं। इन तत्वों का उपयोग करके उपयोगकर्ता की जानकारी वेब सर्वर पर सबमिट किया जाता है। फॉर्म टैग का उपयोग HTML फॉर्म बनाने के लिए किया जाता है।

User इनपुट एकत्र करने के लिए एक HTML फॉर्म का उपयोग किया जाता है।जब आप साइट विज़िटर से कुछ डेटा Collect करना चाहते हैं, तो HTML फॉर्म की आवश्यकता होती है। उदाहरण के लिए, उपयोगकर्ता Registration के दौरान आप नाम, ईमेल पता, क्रेडिट कार्ड आदि जैसी जानकारी  करते है ।

आप रेगुलर Websites  खोलते हि होंगे, आपको Websites में HTML Forms कई रूपों में मिल जाऐंगे , जैसे Sign Up Forms, Log in Forms, Payment Details Forms, Survey Forms ,product review आदि के रूप में देख सकते हैं

एक फॉर्म साइट विज़िटर से इनपुट लेगा और फिर इसे CGI, ASP Script or PHP script etc बैक-एंड एप्लिकेशन पर पोस्ट करेगा।

Sr.NoAttribute & Description
1actionUser द्वारा Form Submit करने के बाद जो कार्य आप Server से करवाना चाहते हैं  उस फाइल क पाथ  action Attribute द्वारा Define किया जाता हैं
2methodआप Form Data को जिस Method से Submit करवाना चाहते हैं उसे Method Attribute से Define किया जाता हैं. यदि आपका Data में संवेदनशील या निजि जानकारी शामिल हैं तो आपको Post Method Define करनी चाहिए. नही तो आप Get Method को Use कर सकते हैं.
3targetआप Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं. जैसे  _blank, _self, _parent etc
4enctypeआप यह निर्दिष्ट करने के लिए enctype विशेषता का उपयोग कर सकते हैं कि ब्राउज़र डेटा को सर्वर पर भेजने से पहले कैसे एन्कोड करता है।application/x-www-form-urlencoded − यह मानक विधि अधिकांश रूपों सरल परिदृश्यों में इस्तेमाल करते हैं। mutlipart/form-data − इसका उपयोग तब किया जाता है जब आप बाइनरी डेटा को इमेज, वर्ड फाइल आदि जैसी फाइलों के रूप में अपलोड करना चाहते हैं।

html form hindi me-how to make form in html

html ka upyog karke form kaise banayenge

<!DOCTYPE html>
<html>
<body>

<form method='post' action=''>
Username:<br>
<input type="text" name="username">
<br>
Email id:<br>
<input type="text" name="email_id">
<br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

The <form> Element

उपयोगकर्ता इनपुट के लिए HTML फॉर्म बनाने के लिए HTML <form> Element का उपयोग किया जाता 

<form>

.

form elements

.

</form>

<form> element विभिन्न प्रकार के इनपुट तत्वों के लिए एक कंटेनर है

HTML Form Controls– HTML Form Input Types

विभिन्न प्रकार के HTML Controls जिनका उपयोग आप HTML control का उपयोग करके डेटा एकत्र करने के लिए कर सकते हैं  −

  • Text Input Controls
  • Checkboxes Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select boxes
  • Submit and Reset Button
type=” “Description
textएक-पंक्ति टेक्स्ट इनपुट फ़ील्ड को परिभाषित करता है
passwordएक-पंक्ति पासवर्ड इनपुट फ़ील्ड को परिभाषित करता है
submitसर्वर पर फ़ॉर्म सबमिट करने के लिए सबमिट बटन
resetFORM में सभी मानों को रीसेट करने के लिए रीसेट बटन को परिभाषित करता है।
radioरेडियो बटन को परिभाषित करता है जो एक विकल्प का चयन करने की अनुमति देता है।
checkboxकई विकल्प फॉर्म का चयन करने की अनुमति देता है।
buttonजिसे किसी ईवेंट पर कार्य करने के लिए प्रोग्राम किया जा सकता है।
fileडिवाइस भंडारण से फ़ाइल का चयन करने के लिए परिभाषित करता है।

Text Input Controls

पाठ इनपुट के तीन प्रकार रूपों पर उपयोग किया जाता है

Single-line text input controls:

इस नियंत्रण का उपयोग उहा किया जता है जहा  के लिए उपयोगकर्ता इनपुट की केवल एक पंक्ति की आवश्यकता होती है, जैसे search box  या नाम। वे HTML <input> टैग का उपयोग करके बनाए गए हैं। 

<!DOCTYPE html>
<html>
<h3>Example Of Single-line text input </h3>
<body>
    <form>
        <label for="EMAIL ID">Email Id:</label><br>
        <input type="text" name="Email id" id="Email id">
    </form>
</body>
</html>

Password input controls

यह एक सिंगल-लाइन टेक्स्ट इनपुट भी है लेकिन जैसे ही यूजर इसमें प्रवेश करता है, यह कैरेक्टर को मास्क कर देता है। वे HTML <input> टैग का उपयोग करके भी बनाए जाते हैं। 

<!DOCTYPE html>
<html>
<h3>Example of Password Field</h3>
<body>
	<form>
		<label for="user-password">Password:
		</label><br>
		<input type="password" name="user-pwd"
							id="user-password">
	</form>
</body>
</html>

Multi-line text input controls

इसका उपयोग तब किया जाता है जब उपयोगकर्ता को विवरण देने की आवश्यकता होती है जो एक वाक्य से अधिक लंबा हो सकता है। बहु-पंक्ति इनपुट नियंत्रण HTML <textarea> टैग का उपयोग करके बनाए जाते हैं।

<!DOCTYPE html>
<html>
<h3>Example of a Text Area Box</h3>
<body>
    <form>
        <label for="Description">Description:</label>
        <textarea rows="5" cols="50" name="Description"
                            id="Description"></textarea>
    </form>
</body>
</html>

Checkboxes in HTML Form


चेकबॉक्स का उपयोग उपयोगकर्ता को विकल्पों के पूर्व-निर्धारित सेट से एक या अधिक विकल्पों का चयन करने के लिए किया जाता है। चेकबॉक्स इनपुट नियंत्रण “इनपुट” तत्व का उपयोग करके “चेकबॉक्स” के रूप में मान वाले प्रकार विशेषता के साथ बनाए जाते हैं।

<!DOCTYPE html>
<html>
<h3>Example of HTML Checkboxes</h3>
<body>
    <form>
        <b>SELECT SUBJECTS</b>
        <br>
        <input type="checkbox" name="subject" id="maths">
        <label for="maths">Maths</label>
        <input type="checkbox" name="subject" id="science">
        <label for="science">Science</label>
        <input type="checkbox" name="subject" id="english">
        <label for="english">English</label>
    </form>
</body>
</html>

Radio Buttons in HTML Form

रेडियो बटन का उपयोग उपयोगकर्ता को पूर्वनिर्धारित विकल्पों की सूची से ठीक एक विकल्प का चयन करने के लिए किया जाता है। रेडियो बटन इनपुट नियंत्रण “इनपुट” तत्व का उपयोग करके एक प्रकार की विशेषता के साथ “रेडियो” के रूप में मूल्य के साथ बनाए जाते हैं।

<!DOCTYPE html>
<html>
<h3>Example of Radio Buttons</h3>
<body>
    <form>
       Select Your Gender
        <br>
        <input type="radio" name="gender" id="male">
        <label for="male">Male</label><br>
        <input type="radio" name="gender" id="female">
        <label for="female">Female</label>
    </form>
</body>
</html>

Select Boxes in HTML Forms

Select Box का उपयोग उपयोगकर्ताओं को विकल्पों की पुल-डाउन सूची से एक या एक से अधिक विकल्प चुनने की अनुमति देने के लिए किया जाता है। चुनिंदा बॉक्स दो तत्वों का उपयोग करके बनाए जाते हैं जो “चयन” और “विकल्प” हैं। सूची आइटम चुनिंदा तत्व के भीतर परिभाषित किए जाते हैं।

<!DOCTYPE html>
<html>
<h3>Example of a Select Box</h3>
<body>
    <form>
        <label for="country">Country:</label>
        <select name="country" id="country">
            <option value="India">India</option>
            <option value="Sri Lanka">Sri Lanka</option>
            <option value="Nepal">Nepal</option>
        </select>
    </form>
</body>
</html>

File select boxes in HTML Forms

फ़ाइल चयन बॉक्स का उपयोग उपयोगकर्ता को एक स्थानीय फ़ाइल का चयन करने और इसे वेब सर्वर के लिए एक अनुलग्नक के रूप में भेजने की अनुमति देने के लिए किया जाता है। यह एक बटन के साथ एक टेक्स्ट बॉक्स के समान है जो उपयोगकर्ता को एक फ़ाइल के लिए ब्राउज़ करने की अनुमति देता है। फ़ाइल, पथ और फ़ाइल का नाम भी लिखा जा सकता है। फ़ाइल चयन बॉक्स “इनपुट” तत्व का उपयोग करके एक प्रकार की विशेषता के साथ “FILE” के रूप में मूल्य के साथ बनाए जाते हैं

<!DOCTYPE html>
<html>
<h3>Example of a File Select Box</3>
	<body>
	<form>
		<label for="fileselect">Upload:</label>
		<input type="file" name="upload" id="fileselect">
	</form>
</body>
</html>

Reset And Submit Buttons 

Submit Buttons उपयोगकर्ता को वेब सर्वर पर form का डेटा भेजने की अनुमति देता है। Reset Buttons का उपयोग Form डेटा को रीसेट करने और डिफ़ॉल्ट मानों का उपयोग करने के लिए किया जाता है।


<!DOCTYPE html>
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
    <form action="test.php" method="post" id="users">
        <label for="username">Username:</label>
        <input type="text" name="username" id="Username">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

Name Attribute in Html Forms 

प्रत्येक इनपुट फ़ील्ड के लिए नाम विशेषता आवश्यक है। यदि इनपुट फ़ील्ड में नाम विशेषता निर्दिष्ट नहीं है, तो उस फ़ील्ड का डेटा बिल्कुल भी नहीं भेजा जाएगा।

<!DOCTYPE html>
<html>
<body>

<form action="/test.php" target="_blank">
Username:<br>
<input type="text">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

NOTE:उपरोक्त कोड में, सबमिट बटन पर क्लिक करने के बाद, फॉर्म डेटा होगा
/test.php नामक पृष्ठ पर भेजा जाए। भेजे गए डेटा में शामिल नहीं होगा
उपयोगकर्ता नाम इनपुट फ़ील्ड डेटा चूंकि नाम विशेषता छोड़ी गई है।

The Method Attribute

इसका उपयोग फॉर्म जमा करते समय डेटा भेजने के लिए उपयोग की जाने वाली HTTP विधि को निर्दिष्ट करने के लिए किया जाता है। दो प्रकार के HTTP तरीके हैं, जो GET और POST हैं।

The GET Method –

<!DOCTYPE html>
<html>
<body>
 
<form action="/check.php" target="_blank" method="GET">
  Username:<br>
  <input type="text" name="username">
  <br>
  Password:<br>
  <input type="password" name="password">
  <br><br>
  <input type="submit" value="Submit">
</form>
 
</body>
</html>

NOTE:GET विधि में, फॉर्म जमा करने के बाद, Form Value
नए ब्राउज़र टैब के एड्रेस बार में दिखाई देगा।

The Post Method 

<!DOCTYPE html>
<html>
<body>

<form action="/check.php" target="_blank" method="post">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

NOTE:POST विधि में, फॉर्म जमा करने के बाद, फॉर्म मान
नए ब्राउज़र टैब के पता बार में दिखाई नहीं देगा जैसा वह था
GET विधि में दिखाई देता है।

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

HTML वेबपेजों की नींव है, वेबसाइटों और वेब ऐप्स को संरचित करके वेबपेज विकास के लिए उपयोग किया जाता है

आज हम यिस पोस्ट मे सिखे HTML me form kaise banaye. आप को कोइ पश्न हो तो आप comment कर सकते है

Q. HTML में फॉर्म का क्या उपयोग है?

वेब पेज पर वेबफॉर्म, वेब फॉर्म या एचटीएमएल फॉर्म उपयोगकर्ता को डेटा दर्ज करने की अनुमति देता है जो प्रसंस्करण के लिए सर्वर को भेजा जाता है। प्रपत्र कागज़ या डेटाबेस FORM से मिलते-जुलते हो सकते हैं क्योंकि वेब उपयोगकर्ता चेकबॉक्स, रेडियो बटन या टेक्स्ट फ़ील्ड का उपयोग करके FORM भरते हैं।

Q.HTML फॉर्म कैसे काम करता है?

1.Visitors अपने वेब ब्राउज़र में प्रपत्र पृष्ठ लोड करता है। ब्राउज़र वेब सर्वर को एक अनुरोध भेजता है।
2. Visitors फॉर्म भरता है और उसे जमा करता है।
3. FORM Fill करने के बाद डेटा वेब सर्वर को भेजा जाता है।
4.वेब सर्वर अनुरोध को संसाधित करता है।
5.एक प्रतिक्रिया ब्राउज़र को वापस भेज दी जाती है।

Q.हमें HTML फॉर्म सीखने की आवश्यकता क्यों है?

HTML FORM की आवश्यकता तब पड़ती है जब आप अपनी वेबसाइट पर आने वाले व्यक्ति से कुछ डेटा एकत्र करना चाहते हैं। उदाहरण के लिए, जब आप उबेर, नेटफ्लिक्स, या फेसबुक जैसे एप्लिकेशन के लिए पंजीकरण/लॉगिन(registration/login) करते हैं, तो आप एचटीएमएल फॉर्म के माध्यम से नाम, ईमेल और पासवर्ड जैसी जानकारी दर्ज करते हैं।

Related Posts

One thought on “HTML मे form कैसे बनाये । HTML me form kaise banaye”

  1. Pingback: HTML kya hai HTML sikhe hindi me HTML क्या है और कैसे काम करता है?

Leave a Reply