Forms in JavaScript in Hindi
Forms in JavaScript in Hindi
Table of Contents
Forms in JavaScript in Hindi
JavaScript में Forms का उपयोग वेबसाइटों पर उपयोगकर्ता से जानकारी प्राप्त करने के लिए किया जाता है। जब हम किसी वेबसाइट पर कोई इनपुट देते हैं, जैसे कि नाम, ईमेल, पासवर्ड, तो वह डेटा एक फॉर्म के रूप में भेजा जाता है। JavaScript का इस्तेमाल इन फॉर्म्स को नियंत्रित करने और यूज़र द्वारा दी गई जानकारी की वैधता की जांच करने के लिए किया जाता है।
What is a Form in JavaScript?
JavaScript में फॉर्म एक HTML element होता है, जिसका इस्तेमाल यूज़र से जानकारी प्राप्त करने के लिए किया जाता है। फॉर्म्स में आमतौर पर कई तरह के input elements होते हैं, जैसे कि टेक्स्ट बॉक्स, चेकबॉक्स, रेडियो बटन, और सबमिट बटन। JavaScript के द्वारा इन input elements के डेटा को प्राप्त किया जा सकता है और उसके साथ कार्य किया जा सकता है।
Important Form Elements in JavaScript
- Text Input: यह एक साधारण टेक्स्ट बॉक्स होता है, जिसमें यूज़र कुछ भी लिख सकता है।
- Radio Button: रेडियो बटन का इस्तेमाल चयन करने के लिए किया जाता है। इसमें एक बार में केवल एक विकल्प चुना जा सकता है।
- Checkbox: चेकबॉक्स का इस्तेमाल विकल्प को चुनने या न चुनने के लिए किया जाता है।
- Submit Button: यह बटन फॉर्म को सबमिट करने के लिए उपयोग किया जाता है।
How to Create a Form in JavaScript?
फॉर्म को JavaScript में बनाने के लिए HTML के साथ JavaScript का प्रयोग किया जाता है। HTML में फॉर्म का निर्माण करके, आप JavaScript का उपयोग डेटा प्राप्त करने और उसे प्रोसेस करने के लिए कर सकते हैं।
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
Handling Form Data with JavaScript
जब उपयोगकर्ता फॉर्म भरकर सबमिट करता है, तो JavaScript की मदद से हम उस डेटा को प्राप्त कर सकते हैं और उसे प्रोसेस कर सकते हैं। यह डेटा आमतौर पर सर्वर पर भेजा जाता है या किसी अन्य क्रिया के लिए इस्तेमाल किया जाता है।
<script>
document.getElementById("userForm").onsubmit = function(event) {
event.preventDefault();
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
alert("Name: " + name + ", Email: " + email);
};
</script>
Form Validation in JavaScript in Hindi
Form Validation का मतलब है यह सुनिश्चित करना कि उपयोगकर्ता द्वारा भरा गया डेटा सही और वैध है। यदि उपयोगकर्ता ने गलत या अधूरी जानकारी डाली है, तो उसे एरर मैसेज दिखाना आवश्यक होता है। JavaScript का इस्तेमाल इनपुट डेटा को चेक करने के लिए किया जाता है।
Why is Form Validation Important?
Form validation यूज़र द्वारा दी गई जानकारी को सही तरीके से प्रोसेस करने के लिए बहुत जरूरी है। यह सुनिश्चित करता है कि उपयोगकर्ता ने सही फॉर्मेट में जानकारी दी है, जैसे कि ईमेल सही ढंग से दिया है या पासवर्ड में न्यूनतम कैरेक्टर की सीमा पूरी हुई है।
How to Perform Form Validation in JavaScript?
- Required Fields: यह चेक करता है कि कोई फील्ड खाली न हो।
- Email Validation: यह सुनिश्चित करता है कि ईमेल का फॉर्मेट सही हो।
- Password Strength: यह चेक करता है कि पासवर्ड में न्यूनतम लंबाई और विशेष अक्षर हों।
- Numeric Validation: यह चेक करता है कि कोई फील्ड सिर्फ संख्याओं के लिए हो।
Basic Example of Form Validation in JavaScript
यह उदाहरण दर्शाता है कि कैसे JavaScript का उपयोग करके फॉर्म डेटा को वेलिडेट किया जा सकता है।
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("myForm").onsubmit = function(event) {
var email = document.getElementById("email").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address!");
event.preventDefault();
}
};
</script>
Common Validation Techniques in JavaScript
- Regular Expressions (Regex): यह एक पावरफुल टूल है जो पत्ते, फोन नंबर, ईमेल जैसी चीजों को वेलिडेट करता है।
- Preventing Form Submission: जब तक डेटा सही न हो, फॉर्म को सबमिट होने से रोकना।
- Displaying Error Messages: उपयोगकर्ता को एरर मैसेज दिखाना जब इनपुट सही न हो।
Advanced Form Validation Example
यह उदाहरण बताता है कि कैसे हम अधिक जटिल और व्यक्तिगत validation कर सकते हैं।
<form id="advancedForm">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("advancedForm").onsubmit = function(event) {
var password = document.getElementById("password").value;
if (password.length < 8) {
alert("Password must be at least 8 characters long!");
event.preventDefault();
}
};
</script>
