BS5 checkbox va radio tugmalar
Checkbox’lar (belgilash katakchalari)
Checkbox’lar foydalanuvchiga oldindan belgilangan variantlar ro‘yxatidan istalgan miqdordagi variantni tanlash imkonini berish kerak bo‘lganda ishlatiladi.
Misol
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
<label class="form-check-label">Option 1</label>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
Checkbox’larni bezash uchun label va checkbox’lar uchun to‘g‘ri tashqi chekinishlarni ta’minlaydigan, class="form-check" ga ega o‘rovchi elementdan foydalaning.
So‘ngra .form-check konteyneri ichidagi checkbox’larni to‘g‘ri bezash uchun label elementlariga .form-check-label klassini, checkbox’larga esa .form-check-input ni qo‘shing.
Agar checkbox standart holatda belgilangan bo‘lishini istasangiz, checked atributidan foydalaning.
Radio tugmalar
Radio tugmalar foydalanuvchini oldindan belgilangan variantlar ro‘yxatidan faqat bittasini tanlash bilan cheklash kerak bo‘lganda ishlatiladi.
Misol
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>Option 3
<label class="form-check-label"></label>
</div>
O‘zingiz sinab ko‘ring »
Almashtirgichlar (toggle switch)
Agar checkbox’ingiz almashtirgich (toggle switch) ko‘rinishida bo‘lishini istasangiz, .form-check konteyneri bilan birga .form-switch klassidan foydalaning:
Misol
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!