Styling form elements w3-input In hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में, w3-input क्लास वेब डेवलपर को फॉर्म इनपुट फील्ड एलिमेंट का यूज़ करके एक वेबपेज बेस्ड फॉर्म लेआउट स्ट्रक्चर में टेक्स्ट इनपुट एम्प्टी बॉक्स, पासवर्ड इनपुट फ़ील्ड, लार्ज इन्फो के लिए टेक्स्टएरिया, मल्टीप्ल आइटम सिलेक्शन के लिए ड्रॉपडाउन और बटन जैसे फ़ॉर्म एलिमेंट को स्टाइल और यूज़ करने का एक इजी मेथड प्रोवाइड करता है। w3-input क्लास आज के समय में एक समान्य यूजर को मिनमम CSS सोर्स कोड के साथ एक इजी मॉडर्न, क्लियर, और एक कम्पलीट रिस्पॉन्सिव फ़ॉर्म क्रिएट करने में हेल्प करता हैं।
So, let’s look at how to style a commercial form design using the w3-input class in W3.CSS scripts.
Basic Text Input in W3.CSS.
W3.CSS वेब डेवलपमेंट में w3-input क्लास का यूज़ किसी फॉर्म लेआउट के लिए टेक्स्ट इनपुट जैसे स्टैंडर्ड इनपुट फ़ील्ड को इन्सर्ट स्टाइल या डिस्प्ले करने में किया जाता है। वेब डेवलपर अपने बेसिक फ़ॉर्म का लुक बिहैवियर को इम्प्रूव करने के लिए और भी फॉर्म इनपुट क्लास स्टाइल को अप्लाई कर सकते हैं।
Example of a basic text input 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 Text Form Input 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”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Employee Name”>
</div>
<div class=”w3-container w3-margin-top”>
<label for=”age”>Employee Age</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”age” placeholder=”Enter Employee Age”>
</div>
</body>
</html>
Explanation of a basic text input in W3.CSS.
- w3-input – यह क्लास फॉर्म टेक्स्ट इनपुट एलिमेंट के लिए एक इनपुट फ़ील्ड पर बेसिक स्टाइलिंग को अप्लाई करता है।
- w3-border – यह क्लास फॉर्म टेक्स्ट इनपुट एलिमेंट के लिए इनपुट फ़ील्ड के चारों ओर एक बॉर्डर को ऐड करता है।
- w3-round – यह क्लास फॉर्म टेक्स्ट इनपुट एलिमेंट के लिए इनपुट फ़ील्ड के कार्नर को राउंड में डिस्प्ले करता है।
Password form input in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर w3-input फॉर्म क्लास को अप्लाई करके फॉर्म पासवर्ड इनपुट के लिए एक फॉर्म फील्ड को इनेबल या स्टाइल कर सकते हैं। यह मौजूदा फॉर्म में टेक्स्ट इनपुट फील्ड की तरह बिहेव करता है. लेकिन फॉर्म में यह फिक्स करता है कि मौजूदा फॉर्म में एंटर पासवर्ड टेक्स्ट इन्फो कंटेंट एस्टरिस्क स्टार सिंबल के रूप में डिस्प्ले हो।
Example of password form input 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 Password Form Input 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”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Name”>
</div>
<div class=”w3-container w3-margin-top”>
<label for=”password”>Password</label>
<input class=”w3-input w3-border w3-round” type=”password” id=”password” placeholder=”Enter password”>
</div>
</body>
</html>
Explanation of password form input in W3.CSS.
- type=”password” – यह मौजूदा फॉर्म में फिक्स करता है कि यूजर द्वारा फॉर्म में एंटर किए गए टेक्स्ट इन्फो कैरेक्टर डॉट्स, एस्टेरिक्स या स्टार सिंबल के रूप में हाईड रहें।
Textarea form input in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर मल्टी-लाइन फॉर्म टेक्स्ट इनपुट इन्फो (जैसे, कमेंट्स या डिस्क्रिप्शन मैसेज) के लिए, <textarea> फॉर्म इनपुट फील्ड एलिमेंट का यूज़ कर सकते हैं। इसमें आप एक जैसी फॉर्म स्टाइलिंग इफ़ेक्ट के लिए w3-input क्लास का भी यूज़ कर सकते है।
Example of a textarea form input 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 Textarea Form Input 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”>
<label for=”description”>Description</label>
<textarea class=”w3-input w3-border w3-round” id=”description” rows=”4″ placeholder=”Enter your description”></textarea>
</div>
</body>
</html>
Explanation of a textarea form input in W3.CSS.
- w3-input – यह आपके मौजूदा फॉर्म में टेक्स्टएरिया इनपुट पर स्टाइलिंग इफ़ेक्ट को अप्लाई करता है।
- rows=”4″ – यह मौजूदा फॉर्म टेक्स्टएरिया इनपुट की रो (हाइट) नंबर्स को फिक्स करता है।
- w3-border and w3-round – यह क्लास फॉर्म इनपुट में स्मूद, मॉडर्न लुक इंटरफ़ेस के लिए टेक्स्टएरिया फॉर्म फील्ड में बॉर्डर और राउंड कार्नर इफ़ेक्ट को ऐड करता है।
Dropdown select input in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर ड्रॉपडाउन मेनू क्रिएट करने के लिए <select> फॉर्म इनपुट मेथड एलिमेंट को w3-input क्लास के साथ यूज़ करके अपने अनुसार कस्टमाइज और स्टाइल भी कर सकते है।
Example of a dropdown select 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 Select Dropdown Form Input 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”>
<label for=”ev”>Select Your Ev</label>
<select class=”w3-input w3-border w3-round” id=”ev”>
<option value=”Tata Nexon EV”>Tata Nexon EV</option>
<option value=”Tata Punch EV”>Tata Punch EV</option>
<option value=”Tata Tiago EV”>Tata Tiago EV</option>
<option value=”MG Windsor EV”>MG Windsor EV</option>
<option value=”Mahindra BE 6 & XEV 9e”>Mahindra BE 6 & XEV 9e</option>
</select>
</div>
</body>
</html>
Explanation of a dropdown select in W3.CSS.
- w3-input – यह इस एक्साम्प्ल में <select> ड्रॉपडाउन आइटम सिलेक्शन में एक जैसी इनपुट स्टाइलिंग इफ़ेक्ट को ऐड करता है।
- w3-border and w3-round – यह क्लास <select> ड्रॉपडाउन आइटम में फिक्स करता है कि ड्रॉपडाउन सलेक्ट बॉर्डर और राउंड कार्नर के साथ मॉडर्न डिस्प्ले हो।
Radio buttons and checkboxes in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर रेडियो बटन और चेकबॉक्स फॉर्म इनपुट फील्ड को एक जैसा अपीयरेंस लुक बिहैवियर प्रोवाइड करने के लिए w3-check क्लास का यूज़ करके इसे अप्लाई या स्टाइल कर सकते है।
Example of a radio button 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 Radio Buttons Form Input 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”>
<label>Select Your Course:</label><br>
<input class=”w3-check” type=”radio” id=”machine learning” name=”course” value=”machine learning”>
<label for=”machine learning”>Machine Learning</label><br>
<input class=”w3-check” type=”radio” id=”Artificial Intelligence” name=”course” value=”Artificial Intelligence”>
<label for=”Artificial Intelligence”>Artificial Intelligence</label><br>
<input class=”w3-check” type=”radio” id=”fullstack development” name=”course” value=”fullstack development”>
<label for=”fullstack development”>Fullstack Development</label><br>
<input class=”w3-check” type=”radio” id=”nielit course” name=”course” value=”nielit course”>
<label for=”nielit course”>Nielit Course</label>
</div>
</body>
</html>
Explanation of a radio button in W3.CSS.
- w3-check – यहाँ इस एक्साम्प्ल में यह फॉर्म रेडियो बटन इनपुट फील्ड को एक जैसे मॉडर्न डिज़ाइन लुक के साथ इफ़ेक्ट और ऐट्रिब्यूट्स में स्टाइल अप्लाई करता है।
- फॉर्म रेडियो बटन इनपुट फील्ड में लेबल for एट्रिब्यूट का यूज़ करके फॉर्म इनपुट फ़ील्ड से कनेक्टेड होते हैं, जिससे मौजूदा फॉर्म की एक्सेसिबिलिटी इम्प्रूव होती है।
Checkbox form input in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर रेडियो बटन की तरह, चेकबॉक्स फॉर्म इनपुट फील्ड को w3-check क्लास से मौजूदा वेबपेज में अप्लाई या स्टाइल कर सकते है।
Example of a form checkbox input 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 Checkboxes Form Input 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”>
<label for=”country”>Select Your Country:</label><br>
<input class=”w3-check” type=”checkbox” id=”India” name=”India” value=”yes”>
<label for=”India”>India</label>
<input class=”w3-check” type=”checkbox” id=”usa” name=”usa” value=”yes”>
<label for=”usa”>Usa</label>
<input class=”w3-check” type=”checkbox” id=”UK” name=”UK” value=”yes”>
<label for=”usa”>UK</label>
<input class=”w3-check” type=”checkbox” id=”China” name=”China” value=”yes”>
<label for=”usa”>China</label><br>
<label for=”membership”>Membership:</label>
<input class=”w3-check” type=”checkbox” id=”membership” name=”membership” value=”yes”>
<label for=”membership”>Yes, I want membership</label>
</div>
</body>
</html>
Explanation of a form checkbox input in W3.CSS.
- w3-check – यहाँ इस एक्साम्प्ल फॉर्म में डिफाइन चेकबॉक्स फॉर्म इनपुट फील्ड को अधिक कमर्शियल बिहैवियर लुक और अपीयरेंस प्रोवाइड करने के लिए स्टाइल करता है।
Button form input in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर w3-button क्लास का यूज़ कर फॉर्म बटन क्रिएट कर सकते है, फॉर्म इनपुट बटन का यूज़ आप फ़ॉर्म में बटन को इफेक्टिव और स्टाइल करने के लिए कर सकते हैं। वेब डेवलपर अपने वेबपेज मे मल्टीप्ल इंडिविजुअल बटन स्टाइल एक साथ अप्लाई और यूज़ कर सकते हैं. जैसे प्राइमरी, सक्सेस, डेंजर, आदि, फॉर्म स्टाइल है।
Example of a submit button form input 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 Multiple Button Form Input 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”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Employee Name”>
</div>
<div class=”w3-container w3-margin-top”>
<label for=”age”>Employee Age</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”age” placeholder=”Enter Employee Age”>
</div>
<div class=”w3-container w3-margin-top”>
<button class=”w3-button w3-pink”>Submit Data </button>
</div>
</body>
</html>
Explanation of a submit button form input in W3.CSS.
- w3-button w3-blue – यहाँ इस एक्साम्प्ल में ये एक सबमिट फॉर्म बटन क्रिएट करता है. इसमें W3.CSS के बिल्ट-इन स्टाइल के साथ पिंक कलर का बटन डिफाइन है।
- W3.CSS वेब डेवलपर मल्टीप्ल इंडिविजुअल बटन कलर्स के लिए w3-indigo को w3-green, w3-red, या w3-yellow जैसी अन्य दूसरी कलर क्लास से रिप्लेस कर सकते हैं।
A complete form layout structure in W3.CSS.
W3.CSS फार्म डेवलपमेंट में वेब डेवलपर मल्टीप्ल फ़ॉर्म इनपुट फील्ड एलिमेंट को ग्रुप कर सकते हैं, और किसी वेबपेज में मल्टी-कॉलम या रिस्पॉन्सिव फ़ॉर्म इनपुट फील्ड क्रिएट करने के लिए W3.CSS ग्रिड क्लास का भी यूज़ कर सकते हैं।
Example of a form with multiple inputs 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 Multiple Responsive Form Input 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”>
<div class=”w3-half”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Employee Name”>
</div>
<div class=”w3-half”>
<label for=”contact”>Contact Number</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”contact” placeholder=”Enter Contact”>
</div>
<div class=”w3-half”>
<label for=”email”>Enter Email</label>
<input class=”w3-input w3-border w3-round” type=”email” id=”email” placeholder=”Enter email”>
</div>
</div>
<label>Select Your Medium:</label><br>
<input class=”w3-check” type=”radio” id=”hindi” name=”medium” value=”hindi”>
<label for=”hindi”>Hindi</label>
<input class=”w3-check” type=”radio” id=”english” name=”medium” value=”english”>
<label for=”english”>English</label><br>
<div class=”w3-row-padding w3-margin-top”>
<div class=”w3-half”>
<label for=”description”>Description</label>
<textarea class=”w3-input w3-border w3-round” id=”description” rows=”4″ placeholder=”Enter your Description”></textarea>
</div>
<div class=”w3-half”>
<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>
<button class=”w3-button w3-indigo w3-margin-top”>Submit Data </button>
</form>
</div>
</body>
</html>
Explanation of a form with multiple inputs in W3.CSS.
- w3-row-padding – यह फॉर्म क्लास मौजूदा फ़ॉर्म इनपुट फील्ड एलिमेंट के बीच स्पेसिंग को ऐड करता है।
- w3-half – यह फॉर्म क्लास मौजूदा फ़ॉर्म इनपुट फील्ड एलिमेंट को लार्ज स्क्रीन पर फॉर्म लेआउट को दो कॉलम (हर एक आधी चौड़ाई का) के रूप में डिस्प्ले करता है।
