W3.CSS kiritish maydonlari
W3.CSS forma boshqaruv elementlari
w3-input klassi matn maydonlari, email maydonlari, textarea’lar va boshqa forma boshqaruv elementlarini bezaydi.
W3.CSS’da checkbox’lar, radio tugmalar va tanlash menyulari uchun ham klasslar bor.
Oddiy kiritish maydoni
Kiritish maydonini bezash uchun w3-input klassidan foydalaning.
Misol
<form class="w3-container">
</p>
<p>
<label>Name</label>
<input class="w3-input" type="text">
</p>
<p>
<label>Email</label>
<input class="w3-input" type="email">
</p>
<p>
<label>Message</label>
<textarea class="w3-input"></textarea>
</p>
</form>
Kiritish maydoni chegaralari
Kiritish maydoni atrofida to‘liq chegara yaratish uchun w3-border klassini qo‘shing.
Yorliqlar (label)
Yorliqlarni kiritish maydonining ustiga yoki ostiga joylashtirish mumkin.
Yuqoridagi yorliqlar
Pastdagi yorliqlar
Yuqoridagi yorliqlar
<label>First Name</label>
<input class="w3-input" type="text">
Pastdagi yorliqlar
<input class="w3-input" type="text">
<label>First Name</label>
Kartochkadagi kiritish maydonlari
Formani W3.CSS kartochkasi ichiga joylashtiring.
Checkbox’lar
Checkbox’larni bezash uchun w3-check klassidan foydalaning.
Misol
<input class="w3-check" type="checkbox" checked>
<label>Milk</label>
<input class="w3-check" type="checkbox">
<label>Sugar</label>
Radio tugmalar
Radio tugmalarni bezash uchun w3-radio klassidan foydalaning.
Misol
<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>
Tanlash menyulari
Tanlash menyusini bezash uchun w3-select klassidan foydalaning.
Misol
<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>
Chegarali tanlash menyusi uchun w3-border qo‘shing:
Grid ichidagi forma elementlari
Forma boshqaruv elementlarini yonma-yon joylashtirish uchun w3-grid dan foydalaning.
Joy yetarli bo‘lmaganda ustunlar avtomatik ravishda ustma-ust joylashadi.
Misol
<div class="w3-grid"
style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px">
<input class="w3-input w3-border" type="text" placeholder="One">
<input class="w3-input w3-border" type="text" placeholder="Two">
<input class="w3-input w3-border" type="text" placeholder="Three">
</div>
Yorliqli grid
Misol
<div class="w3-grid"
style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px">
<div>
<label>First Name</label>
<input class="w3-input w3-border" type="text">
</div>
<div>
<label>Last Name</label>
<input class="w3-input w3-border" type="text">
</div>
</div>
Effektni ko‘rish uchun ekran o‘lchamini o‘zgartiring.
Qatordagi forma elementlari
Bu misolda kiritish maydonlarini bitta qatorda ko‘rsatish uchun w3-row klassidan (Responsive Row — moslashuvchan qator) foydalanamiz.
Kichikroq ekranlarda ular 100% kenglikda ustma-ust joylashadi.
Misol
<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>
O‘zingiz sinab ko‘ring »
Ranglar
O‘zingizga yoqqan uslub va ranglardan bemalol foydalaning:
Input Form
Misol
<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>
O‘zingiz sinab ko‘ring »
Rangli yorliqlar
Yorliqlarni bo‘yash uchun matn rangi klasslaridan foydalaning.
Ikonkali yorliqlar
Ikonkalar va forma boshqaruv elementlarini birlashtiring.
Bir qatorda ikkita kiritish maydoni
Bu misolda kiritish maydonlarini bitta qatorda ko‘rsatish uchun w3-row klassidan (Responsive Row — moslashuvchan qator) foydalanamiz.
Kichikroq ekranlarda ular 100% kenglikda ustma-ust joylashadi.
Misol
<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>
O‘zingiz sinab ko‘ring »
Hover effektli kiritish maydonlari
Kiritish maydoniga hover rangini qo‘shing.
Yumaloq burchakli kiritish maydoni
Chegara klasslarini round klasslari bilan birlashtirish mumkin:
Misol
<input class="w3-input w3-border w3-round" type="text">
<input class="w3-input w3-border w3-round-large" type="text">
Animatsiyali kiritish maydonlari
w3-animate-input klassi kiritish maydoni kengligini 100% gacha animatsiya qiladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!