BS4 formalar
Bootstrap 4’ning standart sozlamalari
Bootstrap’da forma elementlari avtomatik ravishda ba’zi umumiy stillarni oladi:
.form-control klassiga ega barcha matnli <input>, <textarea> va <select> elementlarining kengligi 100% bo‘ladi.
Bootstrap 4 forma maketlari
Bootstrap forma maketlarining ikki turini taqdim etadi:
- Ustma-ust joylashgan (to‘liq kenglikdagi) forma
- Bir qatordagi (inline) forma
Bootstrap 4 ustma-ust joylashgan forma
Quyidagi misolda ikkita kiritish maydoni, bitta checkbox va yuborish tugmasiga ega ustma-ust joylashgan forma yaratiladi.
To‘g‘ri tashqi chekinishlarni ta’minlash uchun har bir forma elementini .form-group ga ega o‘rovchi element bilan o‘rang:
Misol
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
O‘zingiz sinab ko‘ring »
Bootstrap bir qatordagi (inline) formasi
Bir qatordagi (inline) formada barcha elementlar bir qatorda joylashadi va chapga tekislanadi.
Eslatma: Bu faqat kengligi kamida 576px bo‘lgan viewport’lardagi formalarga tegishli. 576px dan kichik ekranlarda elementlar gorizontal qatorlar bo‘lib ustma-ust joylashadi.
Bir qatordagi (inline) forma uchun qo‘shimcha qoida:
<form>elementiga.form-inlineklassini qo‘shing
Quyidagi misolda ikkita kiritish maydoni, bitta checkbox va bitta yuborish tugmasiga ega bir qatordagi (inline) forma yaratiladi:
Misol
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
O‘zingiz sinab ko‘ring »
Yordamchi klasslar qo‘llanilgan bir qatordagi forma
Yuqoridagi bir qatordagi forma "siqilgan" ko‘rinadi va Bootstrap’ning oraliq (spacing) yordamchi klasslari bilan ancha chiroyli ko‘rinadi. Quyidagi misolda barcha qurilmalarda (small va undan kattalarida) har bir kiritish maydoniga o‘ng tashqi chekinish (.mr-sm-2) qo‘shiladi. Pastki tashqi chekinish klassi (.mb-2) esa kiritish maydoni keyingi qatorga o‘tganda (joy/kenglik yetarli bo‘lmagani sababli gorizontal holatdan vertikal holatga o‘tganda) uni bezash uchun ishlatiladi:
Misol
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">Email address:</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
O‘zingiz sinab ko‘ring »
Oraliq (spacing) va boshqa "yordamchi" klasslar haqida Bootstrap 4 yordamchi klasslar bobida batafsil bilib olasiz.
Forma qatori/grid
Oraliq yordamchi klasslaridan foydalanmasdan, forma kiritish maydonlarining kengligi va tekislanishini boshqarish uchun ustunlardan (.col) ham foydalanishingiz mumkin. Faqat ularni .row konteyneri ichiga joylashtirishni unutmang.
Quyidagi misolda yonma-yon ko‘rinadigan ikkita ustundan foydalanamiz. Ustunlar va qatorlar haqida Bootstrap grid bobida ancha ko‘proq bilib olasiz.
Misol
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
O‘zingiz sinab ko‘ring »
Agar grid oraliqlari kichikroq bo‘lishini istasangiz (ustunlar orasidagi standart bo‘shliqni (gutter) qayta belgilash uchun), .row o‘rniga .form-row dan foydalaning:
Misol
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
O‘zingiz sinab ko‘ring »
Formani tekshirish (validatsiya)
Foydalanuvchilarga foydali fikr-mulohaza (feedback) berish uchun turli validatsiya klasslaridan foydalanishingiz mumkin. Validatsiya natijasini formani yuborishdan oldin yoki keyin ko‘rsatmoqchi ekaningizga qarab, <form> elementiga .was-validated yoki .needs-validation ni qo‘shing. Formada nima yetishmayotganini ko‘rsatish uchun kiritish maydonlari yashil (to‘g‘ri) yoki qizil (noto‘g‘ri) chegaraga ega bo‘ladi. Shuningdek, formani yuborishdan oldin nima yetishmayotgani yoki nima qilish kerakligini foydalanuvchiga aniq aytish uchun .valid-feedback yoki .invalid-feedback xabarini qo‘shishingiz mumkin.
Misol
Ushbu misolda formani yuborishdan oldin nima yetishmayotganini ko‘rsatish uchun .was-validated dan foydalanamiz:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
O‘zingiz sinab ko‘ring »
Misol
Ushbu misolda .needs-validation dan foydalanamiz — u validatsiya effektini forma yuborilganidan KEYIN qo‘shadi (agar biror narsa yetishmayotgan bo‘lsa). E’tibor bering, bu misol to‘g‘ri ishlashi uchun biroz jQuery kodini ham qo‘shishingiz kerak bo‘ladi:
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!