Form validation and layout organization in hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में फ़ॉर्म डिज़ाइन डेवलप करते समय, वेब डेवलपर को न सिर्फ़ एक क्लियर, स्ट्रक्चर्ड, रिस्पॉन्सिव फॉर्म लेआउट डेवलपमेंट की आवश्यकता होती है. जबकि इसमें आपको यह भी मैनेज करना ज़रूरी है कि वेब इंटरनेट यूज़र मौजूदा फॉर्म में एक्जैक्ट प्रॉपर करेक्ट डाटा और इनफार्मेशन को इन्सर्ट करे। यह टास्क W3.CSS वेब डेवलपर को अपने मौजूदा फ़ॉर्म को मैनेज स्टाइल और कट्रोल करने में हेल्प करता है, साथ ही मौजूदा फ़ॉर्म एलिमेंट कॉम्पोनेन्ट वैलिडेशन और फॉर्म लेआउट ऑर्गनाइज़ेशन को इंटीग्रेट करने के मल्टीप्ल स्टेप्स को इंडीकेट करता है। इस पोस्ट में, हम फॉर्म डिज़ाइन डेवलपमेंट में दोनों कांसेप्ट को एक्स्प्लोर करेंगे और W3.CSS स्क्रिप्ट का यूज़ करके इन फॉर्म फीचर्स और फंक्शन को इफेक्टिव आर्डर में अप्लाई किया जाए, इसे डिटेल में जानेंगे।
Basic Form Layout Organization Methods in W3.CSS.
W3.CSS क्रिएटेड फ़ॉर्म एलिमेंट के लिए एक प्रॉपर आर्डर में ऑर्गनाइज़्ड वेब लेआउट यह मैनेज करता है, जिससे कि इंटरनेट यूज़र इजीली और बिना किसी इश्यूज या कन्फ्यूजन के मौजूदा फॉर्म में डाटा और इनफार्मेशन को एंटर कर सकें। W3.CSS वेब डेवलपमेंट स्क्रिप्ट में फॉर्म आपको एक ग्रिड सिस्टम प्रोवाइड करता है. जो वेब डेवलपर को फ़ॉर्म फ़ील्ड कॉम्पोनेन्ट एलिमेंट को रिस्पॉन्सिव वेब लेआउट में ऑर्गनाइज़ या अरेंज करने में हेल्प करता है।
Example of a two-column organized form layout in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Responsive Form Layout Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<form action=”/submit_form”>
<div class=”w3-row-padding w3-margin-bottom”>
<!– Here we create first form column for name and email address –>
<div class=”w3-half”>
<label for=”name”> Name:</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter name” required>
<label for=”contact”>Contact:</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”contact” placeholder=”Enter contact” required>
<label for=”email”>Email:</label>
<input class=”w3-input w3-border w3-round” type=”email” id=”email” placeholder=”Enter email” required>
</div><br>
<div class=”w3-halfr”>
<label for=”country”> Country:</label>
<p>
<input class=”w3-check” type=”checkbox” name=”country” value=”india”>
<label>India</label>
</p>
<p>
<input class=”w3-check” type=”checkbox” name=”country” value=”Usa”>
<label>Usa</label>
</p>
<p>
<input class=”w3-check” type=”checkbox” name=”country” value=”china”>
<label>China</label>
</p><br>
<div class=”w3-half”>
<label for=”country”> Gender:</label>
<p>
<input class=”w3-radio” type=”radio” name=”gender” value=”male”>
<label>Male</label>
</p>
<p>
<input class=”w3-radio” type=”radio” name=”gender” value=”female”>
<label>Female</label>
</p><br>
</div>
<!– Here we create second column for description and Checkbox element –>
<div class=”w3-half”>
<label for=”description”>Description:</label>
<textarea class=”w3-input w3-border w3-round” id=”description” rows=”7″ placeholder=”Enter description here” required></textarea>
<label for=”membership”>Membership:</label>
<input class=”w3-check” type=”checkbox” id=”membership” name=”membership” value=”yes”>
<label for=”membership”>Do you want, membership</label>
</div>
</div>
<!– here we create submit form data button –>
<button class=”w3-button w3-indigo w3-margin-top” type=”submit”>Submit</button> <button class=”w3-button w3-blue w3-margin-top” type=”reset”>Reset</button>
</form>
</div>
</body>
</html>
Explanation of a two-column organized form layout in W3.CSS.
- w3-row-padding – यहाँ इस एक्साम्प्ल में यह क्लास फॉर्म कॉलम के बीच पैडिंग के साथ एक रिस्पॉन्सिव ग्रिड लेआउट को क्रिएट करता है।
- w3-half – यह क्लास फॉर्म इनपुट फ़ील्ड के लिए फ़ॉर्म को दो इक्वल कॉलम में डिवाइड कर डिस्प्ले करता है।
- w3-margin-bottom – यह क्लास फ़ॉर्म रो के बीच स्पेस को ऐड करता है।
- required – यह फॉर्म ऐट्रिब्यूट्स इनपुट फ़ील्ड को ज़रूरत के अनुसार मार्क करता है।
W3.CSS Form Validation Concepts Using HTML5 Attributes.
W3.CSS क्रिएटेड फ़ॉर्म एलिमेंट में HTML5, required, pattern, min, max, type, और email जैसे इम्पोर्टेन्ट फॉर्म एट्रिब्यूट्स का यूज़ करके बिल्ट-इन फ़ॉर्म वैलिडेशन को मैनेज कर सकते है। किसी वेबपेज में फ़ॉर्म डाटा इनफार्मेशन को सबमिट करने से पहले क्लाइंट साइड वेब ब्राउज़र पर यूज़र इनपुट डाटा इन्फो को वैलिडेट करने के लिए इन फॉर्म एट्रिब्यूट्स फीचर्स का यूज़ किया जाता हैं।
Example of a form with HTML5 validation in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Form Validation Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<form action=”/submit_form” method=”POST” onsubmit=”return validateForm()”>
<div class=”w3-row-padding w3-margin-bottom”>
<div class=”w3-half”>
<label for=”name”>Employee Name:</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter name” required>
<label for=”contact”>Employee Contact:</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”contact” placeholder=”Enter contact” required>
<label for=”email”>Email:</label>
<input class=”w3-input w3-border w3-round” type=”email” id=”email” placeholder=”Enter email” required>
</div>
<div class=”w3-half”>
<label for=”description”>Description:</label>
<textarea class=”w3-input w3-border w3-round” id=”description” rows=”7″ placeholder=”Enter description here” required></textarea>
<label for=”membership”>Membership:</label>
<input class=”w3-check” type=”checkbox” id=”membership” name=”membership” value=”yes”>
<label for=”membership”>Do you want, membership</label>
</div>
</div>
<!– here we create submit and reset form data button –>
<button class=”w3-button w3-lime w3-margin-top” type=”submit”>Submit</button> <button class=”w3-button w3-teal w3-margin-top” type=”reset”>Reset</button>
</form>
</div>
<script>
function validateForm() {
const name = document.getElementById(‘name’).value;
const contact = document.getElementById(‘contact’).value;
const email = document.getElementById(’email’).value;
const message = document.getElementById(‘membership’).value;
if (!name || !contact || !email || !membership) {
alert(“All form fields are essential”);
return false;
}
return true;
}
</script>
</body>
</html>
Explanation of a form with HTML5 validation in W3.CSS.
- required – यह फॉर्म एट्रिब्यूट यह फिक्स करता है कि मौजूदा वेबपेज में फ़ॉर्म डाटा इन्फो को सबमिट करने से पहले सभी इनपुट फ़ील्ड अवश्य भरे जाने चाहिए।
- type=”email” – यह फॉर्म ऐट्रिब्यूट्स यह फिक्स करता है कि फॉर्म में इन्सर्ट किया गया टेक्स्ट, ईमेल, एड्रेस, के फ़ॉर्मेट प्रॉपर आर्डर सिंटेक्स में करेक्ट हो।
- onsubmit=”return validateForm()” – यहाँ W3.CSS फॉर्म में जावास्क्रिप्ट फ़ंक्शन सबमिट बटन पर क्लिक करने पर फ़ॉर्म डाटा एलिमेंट को वैलिडेट करता है। यदि मौजूदा फॉर्म में कोई फ़ील्ड एम्प्टी है, तो यह फ़ॉर्म को डेडिकेटेड सर्वर लोकेशन पर सबमिट होने से स्टॉप करता है, और फॉर्म सबमिशन परोसे में अलर्ट को डिस्प्ले करता है।
