W3.CSS इनपुट
इनपुट फॉर्म
शीर्ष लेबल
इनपुट फॉर्म
उदाहरण
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
नीचे के लेबल
इनपुट फॉर्म
उदाहरण
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
इनपुट कार्ड
हैडर
उदाहरण
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div>
रंगीन लेबल
अपने लेबलों को रंगने के लिए किसी भी w3-पाठ-रंग वर्ग का उपयोग करें:
उदाहरण
<form class="w3-container">
<label
class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form>
सीमाबद्ध इनपुट
सीमाबद्ध इनपुट बनाने के लिए w3-सीमा वर्ग जोड़ें :
उदाहरण
<input class="w3-input w3-border"
type="text">
गोल सीमाएं
गोलाकार बॉर्डर बनाने के लिए किसी भी w3-राउंड वर्ग का उपयोग करें:
उदाहरण
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">
सीमा रहित इनपुट
डिफ़ॉल्ट रूप से w3-इनपुट वर्ग की निचली सीमा होती है। यदि आप एक सीमाहीन इनपुट चाहते हैं, तो w3-border-0 वर्ग जोड़ें:
उदाहरण
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form>
रंग की
अपनी पसंदीदा शैलियों और रंगों का उपयोग करने के लिए स्वतंत्र महसूस करें:
इनपुट फॉर्म
उदाहरण
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form>
होवर करने योग्य इनपुट
w3-hover- रंग वर्ग माउस-ओवर पर इनपुट फ़ील्ड में पृष्ठभूमि रंग जोड़ता है:
उदाहरण
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
एनिमेटेड इनपुट्स
w3- चेतन-इनपुट वर्ग फोकस होने पर इनपुट फ़ील्ड की चौड़ाई को 100% में बदल देता है:
उदाहरण
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
उदाहरण
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<input class="w3-check"
type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>
उदाहरण
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label>
विकल्प चुनो
उदाहरण
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select>
सीमावर्ती चयन मेनू
उदाहरण
<select class="w3-select w3-border" name="option">
ग्रिड में फॉर्म एलिमेंट्स
इस उदाहरण में, हम इनपुट को एक ही लाइन पर प्रदर्शित करने के लिए W3.CSS 'रिस्पॉन्सिव ग्रिड सिस्टम का उपयोग करते हैं (छोटी स्क्रीन पर, वे क्षैतिज रूप से 100% चौड़ाई के साथ ढेर हो जाएंगे)। आप इसके बारे में बाद में और जानेंगे।
उदाहरण
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>
लेबल के साथ ग्रिड
उदाहरण
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>