BS4 kiritish maydonlari
Qo‘llab-quvvatlanadigan forma elementlari
Bootstrap quyidagi forma elementlarini qo‘llab-quvvatlaydi:
- input
- textarea
- checkbox
- radio
- select
Bootstrap input (kiritish maydoni)
Bootstrap barcha HTML5 input turlarini qo‘llab-quvvatlaydi: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel va color.
Eslatma: Agar kiritish maydonlarining turi (type) to‘g‘ri e’lon qilinmasa, ular to‘liq BEZALMAYDI!
Quyidagi misolda ikkita input elementi bor: biri type="text" turida, ikkinchisi type="password" turida. Formalar bobida aytib o‘tganimizdek, kiritish maydonlarini to‘liq kenglikda, to‘g‘ri ichki chekinish (padding) va h.k. bilan bezash uchun .form-control klassidan foydalanamiz:
Misol
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
O‘zingiz sinab ko‘ring »
Bootstrap textarea
Quyidagi misolda textarea mavjud:
Misol
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap checkbox’lari
Checkbox’lar foydalanuvchiga oldindan belgilangan variantlar ro‘yxatidan istalgan miqdordagi variantni tanlash imkonini berish kerak bo‘lganda ishlatiladi.
Quyidagi misolda uchta checkbox bor. Oxirgi variant nofaol:
Misol
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
Label va checkbox’lar uchun to‘g‘ri tashqi chekinishlarni ta’minlash uchun class="form-check" ga ega o‘rovchi elementdan foydalaning.
.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.
Bir qatordagi (inline) checkbox’lar
Agar checkbox’lar bitta qatorda ko‘rinishini istasangiz, .form-check-inline klassidan foydalaning:
Misol
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap radio tugmalari
Radio tugmalar foydalanuvchini oldindan belgilangan variantlar ro‘yxatidan faqat bittasini tanlash bilan cheklash kerak bo‘lganda ishlatiladi.
Quyidagi misolda uchta radio tugma bor. Oxirgi variant nofaol:
Misol
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
O‘zingiz sinab ko‘ring »
Checkbox’lardagi kabi, agar radio tugmalar bitta qatorda ko‘rinishini istasangiz, .form-check-inline klassidan foydalaning:
Misol
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap tanlash ro‘yxati (select list)
Tanlash ro‘yxatlari foydalanuvchiga bir nechta variantdan tanlash imkonini berish kerak bo‘lganda ishlatiladi.
Quyidagi misolda ochiluvchi ro‘yxat (select list) mavjud:
Misol
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
O‘zingiz sinab ko‘ring »
Forma elementlari o‘lchami
Forma elementining o‘lchamini .form-control-sm yoki .form-control-lg yordamida o‘zgartiring:
Misol
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
O‘zingiz sinab ko‘ring »
Oddiy matn ko‘rinishidagi forma elementi
Agar kiritish maydonini oddiy matn ko‘rinishida bezamoqchi bo‘lsangiz, .form-control-plaintext dan foydalaning:
File va range forma elementlari
Diapazon (range) elementini yoki fayl maydonini to‘liq kenglikda bezash uchun input type"range" ga .form-control-range klassini yoki input type"file" ga .form-control-file ni qo‘shing:
Misol
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!