Form elements: form, input, textarea, button, select, option in html hindi
एचटीएमएल वेब पेज डेवलपमेंट में फ़ॉर्म एक प्री-प्रिंटेड ब्लॉक ऑफ़ टेक्स्ट बॉक्स, लेबल, रेडियो बटन, चेकबॉक्स, लिस्ट, सलेक्ट, और टेक्स्ट एरिया कण्ट्रोल, से बना एक डिजिटल ऑनलाइन डॉक्यूमेंट फॉर्मेट है, एचटीएमएल में फॉर्म पर्टिकुलर डाटा और इनफार्मेशन यूजर, वेब विजिटर, इंटरनेट सर्फर, से मैन्युअल इनपुट या कैप्चर करने में उपयोग होता है। समान्यता एचटीएमएल में यूजर रजिस्ट्रेशन फॉर्म, कंपनी फॉर्म, आर्गेनाइजेशन फॉर्म, ऑनलाइन सर्वे फॉर्म, यूजर इनफार्मेशन कैप्चर फॉर्म, और अन्य कई प्रकार के कस्टम फॉर्म डेवलप करने में होता है.
So, let’s understand the form and form element in HTML better.
Form elements: form
Form Tag – एचटीएमएल वेब डवेलपमेंट में <form> <form> टैग का उपयोग यूजर कस्टम फॉर्म डेवलप करने में होता है, एक फॉर्म ऑनलाइन यूजर से वेबसाइट द्वारा मांगी गई जरूरी डाटा और इनफार्मेशन को यूजर से इनपुट करवाता है। फॉर्म ऐट्रिब्यूट्स में फॉर्म एक्शन या फॉर्म ऑनलाइन सर्वर लोकेशन जहा फॉर्म इनफार्मेशन स्टोर होती है। एचटीएमएल वेब पेज वेब पेज में गेट पोस्ट और मेथड का उपयोग पर्टिकुलर वेबसाइट द्वारा मांगी गई डिजिटल डाटा और इनफार्मेशन को डेडिकेटेड सर्वर लोकेशन में स्टोर और प्रोसेस करने में होता है. जब वेब विजिटर इन फॉर्म में डाटा और इनफार्मेशन को भरता है, और सबमिट बटन पर क्लिक करता है, तो ये सारी डिजिटल इनफार्मेशन ऑनलाइन डिजिटल फॉर्मेट में डेडिकेटेड होस्ट या सर्वर में स्टोर हो जाती है.
Form Tag Example in HTML Web Development.
<form action=”/submit” method=”post”>
<!—Write your desire form field control here –>
</form>
Form <input> Tag – एचटीएमएल वेब डवेलपमेंट में इनपुट <input> टैग का उपयोग फ़ॉर्म के अंदर इंटरैक्टिव यूजर इनपुट फॉर्म फ़ील्ड क्रिएट करने में होता है। एचटीएमएल वेब डवेलपमेंट में इनपुट फील्ड को विशेष रूप से विभिन्न प्रकार के कस्टम यूजर इनपुट फ़ील्ड क्रिएट करने में होता है। एचटीएमएल वेब डवेलपमेंट में आप अपनी फॉर्म डेवलपमेंट जरूरत के अनुसार इनपुट टाइप फील्ड में (टेक्स्ट फील्ड, फॉर्म पासवर्ड, यूजर ईमेल, नंबर फील्ड, चेकबॉक्स बटन, रेडियो बटन, सबमिट बटन ) आदि इनपुट फील्ड बनाने में होता है। इनपुट फील्ड पर्टिकुलर यूजर से मैन्युअल डाटा और इनपुट करने के लिए डेवलप होते है.
Form Input Fields Default Attributes.
- Input value – इनपुट वैल्यू से आप एचटीएमएल फॉर्म में इनपुट के लिए डिफ़ॉल्ट वैल्यू डिफाइन कर सकते है।
- Input placeholder – इनपुट होने वाले फॉर्म फील्ड इनपुट फील्ड वैल्यू या इनफार्मेशन को डिफाइन कर सकते है।
- Input required – यह इम्पोर्टेन्ट फॉर्म फील्ड को फॉर्म में भरते समय रिक्वायर्ड इनपुट फील्ड के तोर पर इंडीकेट करते है।
- Input disabled – यह फॉर्म में क्रिएटेड इनपुट फॉर्म फील्ड को डिसएबल कर देता है।
Input Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<input type=”submit” value=”Upload”>
<input type=”checkbox” name=”Follow us” value=”Follow us”> Follow us
</form>
</body>
</html>
Form <textarea> tag – यदि आप अपने एचटीएमएल वेब पेज फॉर्म में यूजर से मल्टी-लाइन टेक्स्ट इनफार्मेशन इनपुट या एंटर करवाना चाहते है, तब आप फॉर्म टेक्स्टएरिया फॉर्म फील्ड का उपयोग एक से अधिक टेक्स्ट इनफार्मेशन या मल्टी-लाइन यूजर टेक्स्ट इनपुट करने में कर सकते है।
Form Textarea Fields Default Attributes.
- Textarea name – कस्टम यूजर टेक्स्टएरिया फॉर्म फील्ड का नाम डिफाइन कर सकते है,ये कस्टम फॉर्म टेक्स्टएरिया नाम फॉर्म को ऑनलाइन सर्वर पर उपलोड करने में होता है।
- TextArea rows – टेक्स्टएरिया फॉर्म फील्ड में नंबर ऑफ़ इनपुट टेक्स्ट लाइनों की नंबर्स को इंडीकेट करता है।
- TextArea columns – टेक्स्टएरिया फील्ड एरिया में इनपुट नंबर ऑफ़ टेक्स्टएरिया विड्थ में करैक्टर को इंडीकेट करता है।
- TextArea placeholder – इनपुट टेक्स्टएरिया में किस प्रकार के ऑब्जेक्ट या इनफार्मेशन को इनपुट करना है, यह इंडीकेट करता है।
- TextArea required – यह फॉर्म टेक्स्टएरिया में इनपुट फील्ड को रिक्वायर्ड या मस्ट कर देगा। जिसे फॉर्म में भरना ही होगा।
- TextArea maxlength – टेक्स्टएरिया में इनपुट टेक्स्ट या इनफार्मेशन ऑब्जेक्ट की मैक्सिमम लेंथ को फॉर्म में लिमिट करता है।
Textarea Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<input type=”submit” value=”Upload”>
<input type=”checkbox” name=”Follow us” value=”Follow us”> Follow us
</form>
</body>
</html>
Form <button> – एचटीएमएल वेब पेज में फॉर्म बटन टैग का उपयोग विभिन्न प्रकार के फॉर्म बटन बनाने में किया जाता है, सामान्यता आप किसी वेब पेज में सबमिट,रिसेट, ओके,केंसल, और अन्य कई प्रकार के एक्टिव एक्शनेबल क्लिक करने योग्य फॉर्म बटन क्रिएट कर सकते है।
Form Button Fields Default Attributes.
- button type – फॉर्म में क्रिएट होने वाले बटन के प्रकार को डिफाइन करते है। सामान्यता आप फॉर्म में ओके, कैंसिल, सबमिट, रीसेट, आदि और अन्य कई प्रकार के कस्टम फॉर्म बटन बना सकते है।
- button name – फॉर्म में क्रिएटेड फॉर्म बटन का नाम डिफाइन करता है, यह नाम फ़ॉर्म में डेटा और इनफार्मेशन को ऑनलाइन सबमिट करते में होता है।
- button value – फॉर्म बटन में इनपुट वैल्यू को सर्वर में स्टोर करने में बटन वैल्यू का उपयोग होता है।
- button disabled – वेब डेवलपर द्वारा फॉर्म में क्रिएटेड बटन वैल्यू को डिसएबल करने में होता है।
Button Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<button type=”upload”>Upload</button>
<button type=”Cancel”>Cancel</button>
<button type=”button” onclick=”alert(‘You clicked!’)”>Let Click</button>
<input type=”checkbox” name=”Follow us” value=”Follow us”> Follow us
</form>
</body>
</html>
Form <select> – एचटीएमएल वेब पेज फॉर्म डेवलपमेंट में सलेक्ट टैग का उपयोग ड्राप डाउन फॉर्म लिस्ट सिलेक्शन आइटम को क्रिएट करने में होता है, यूजर इस सलेक्ट लिस्ट आइटम सिलेक्शन में क्लिक कर सिंगल फॉर्म आइटम को सबमिट कर सकता है।
Form Select Fields Default Attributes.
- Select Name – फॉर्म सलेक्ट फील्ड के डिफ़ॉल्ट नाम को डिफाइन करता है, ये कस्टम फॉर्म सलेक्ट नाम का उपयोग फ़ॉर्म डेटा सबमिट या अपलोड करने में होता है।
- Select Multiple – यदि आप फॉर्म सलेक्ट टैग में मल्टीप्ल ऐट्रिब्यूट्स इनेबल करते है, तो आप सलेक्ट ड्रॉपडाउन लिस्ट में मल्टीप्ल सलेक्शन इनेबल कर सकते है।
Select Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<br>
<label>Select Country</label><select name=”country” required>
<option value=”India”>India</option>
<option value=”England”>England</option>
<option value=”Japan”>Japan</option>
<option value=”China”>China</option>
<option value=”United Kingdom”>United Kingdom</option>
</select>
<br>
<br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<br>
<button type=”upload”>Upload</button>
</form>
</body>
</html>
Form <option> Tag – एचटीएमएल वेब पेज में ऑप्शन टैग का उपयोग ड्रॉपडाउन ऑप्शन फॉर्म लिस्ट आइटम क्रिएट करने के साथ एक से अधिक रेडियो ऑप्शन बटन क्रिएट करने में होता है।
Form Option Fields Default Attributes.
- Option value – ऑप्शन बटन में एक से अधिक फॉर्म ऑप्शन सिलेक्शन के साथ अपलोड सर्वर लोकेशन ऑप्शन वैल्यू को इंडीकेट करता है।
- Option selected – यदि आप किसी पर्टिकुलर फॉर्म ऑप्शन वैल्यू को सलेक्ट रखना चाहते है। तो डिफ़ॉल्ट उसमे फॉर्म सिलेक्टेड ऐट्रिब्यूट्स को इनेबल कर दे.
- Option disabled – फॉर्म में क्रिएटेड ऑप्शन बटन आइटम को डिसएबल कर देगा।
Option Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<br>
<label>Select Medium</label><select name=”Medium”>
<option value=”Hindi”>Hindi</option>
<option value=”English” selected>English</option>
<option value=”Regional”>Regional</option>
<option value=”Other” disabled>Other Not available</option>
</select>
<br>
<br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<br>
<button type=”upload”>Upload</button>
</form>
</body>
</html>
<checkbox> Tag – एचटीएमएल वेब पेज में चेकबॉक्स एक बिल्ट-इन फ़ॉर्म कण्ट्रोल है, इंटरनेट यूजर को सिंगल टाइम में एक या एक से अधिक चेकबॉक्स आइटम सिलेक्शन में सहायता करता है। चेकबॉक्स फॉर्म फील्ड का उपयोग करके आप एक से अधिक फॉर्म आइटम सिलेक्शन चॉइस क्रिएट कर सकते है.
Form Checkbox Fields Default Attributes.
- Checkbox name Tag – एचटीएमएल वेब पेज क्रिएटेड फॉर्म चेकबॉक्स नाम को डिफाइन कर सकते है, जिसका उपयोग फॉर्म आइटम ऑब्जेक्ट वैल्यू को सर्वर में अपलोड करने में होता है।
- Checkbox value Tag – क्रिएटेड चेकबॉक्स वैल्यू को इंडीकेट या होल्ड करता है, जिसे क्लाइंट द्वारा ऑनलाइन वैल्यू अपलोड में होगा।
- Checkbox <label> tag – एचटीएमएल वेब पेज फॉर्म में लेबल एक टेक्स्ट इनफार्मेशन क्रिएटर है। सामान्यता लेबल किसी भी फॉर्म कण्ट्रोल के आगे एक टेक्स्ट या लेबल इनफार्मेशन को डिस्प्ले करता है।
Checkbox Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<br>
<label>Web Development Course</label><br>
<label>
<input type=”checkbox” name=”Css” value=”Css”>
Css
</label>
<label>
<input type=”checkbox” name=”Html” value=”Html”>
Html
</label>
<label>
<input type=”checkbox” name=”Php” value=”Php”>
Php
</label>
<label>
<input type=”checkbox” name=”Javascript” value=”Javascript”>
Javascript
</label>
<br>
<br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<br>
<button type=”upload”>Upload</button>
</form>
</body>
</html>
All Form Field Control Examples in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Form </title>
</head>
<body>
<h1>Registration Form</h1>
<form action=”/submit-form” method=”post”>
<label for=”name”>Name -</label>
<input type=”text” id=”name” name=”name” placeholder=”Fiil name” required>
<br><br>
<label for=”contact”>Contact -</label>
<input type=”text” id=”contact” name=”contact” placeholder=”Fiil contact” required>
<br><br>
<label for=”email”>Email – </label>
<input type=”email” id=”email” name=”email” placeholder=”Fill email” required>
<br><br>
<label for=”comments”>Short Description -</label>
<textarea id=”description” name=”description” rows=”3″ cols=”30″ placeholder=”Input Description”></textarea>
<br><br>
<label>Follow Us – </label>
<input type=”checkbox” id=”follow us” name=”follow us” value=”follow us”>
<label for=”follow us”>Click To Follow Us</label>
<br><br>
<label for=”city”>Select City – </label>
<select id=”city” name=”city”>
<option value=”delhi”>Delhi</option>
<option value=”jaipur”>Jaipur</option>
<option value=”jodhpur”>Jodhpur</option>
<option value=”udaipur”>Udaipur</option>
</select>
<br><br>
</label>
<label>Language –
<input type=”checkbox” name=”English” value=”English”>
English
</label>
<label>
<input type=”checkbox” name=”Hindi” value=”Hindi”>
Hindi
</label>
<label>
<input type=”checkbox” name=”Regional” value=”Regional”>
Regional
</label>
<br>
<br>
<button type=”ok”>Ok</button>
<button type=”cancel”>Cancel</button>
<button type=”reset”>Reset</button>
</form>
</body>
</html>
Form Field Explanation.
- <form> tag – सामान्यता एचटीएमएल वेब पेज में फॉर्म टैग फॉर्म को स्टार्ट या क्रिएट करता है।
- <input> tag – एचटीएमएल वेब पेज में मल्टीप्ल इनपुट फॉर्म फील्ड आइटम को क्रिएट करता है।
- <textarea> tag – एचटीएमएल वेब पेज में मल्टीप्ल फॉर्म टेक्स्ट इनफार्मेशन को क्रिएट करता है।
- <button> tag – एचटीएमएल वेब पेज में फ़ॉर्म इनफार्मेशन अपलोड के लिए क्लिकएबल बटन क्रिएट करता है।
- <select> tag – एचटीएमएल वेब पेज में एक ड्रॉपडाउन सिलेक्शन लिस्ट आइटम क्रिएट करता है।
- <option> tag – एचटीएमएल वेब पेज में फॉर्म सिलेक्शन ऑप्शन रेडियो बटन <चयन> क्रिएट करता है।
- <checkbox> tag – फॉर्म में चेकबॉक्स आइटम क्रिएट करने में होता है, चेकबॉक्स सिंगल टाइम यूजर को मल्टीप्ल फॉर्म सिलेक्शन प्रोवाइड करता है।
