Bootstrap 4 أشكال
الإعدادات الافتراضية لـ Bootstrap 4
تتلقى عناصر التحكم في النموذج تلقائيًا بعض الأنماط العامة باستخدام Bootstrap:
يبلغ عرض كل العناصر النصية <input>والعناصر <textarea>التي
<select>بها فئة .form-control100٪.
Bootstrap 4 تخطيطات النموذج
يوفر Bootstrap نوعين من تخطيطات النموذج:
- شكل مكدس (كامل العرض)
- شكل مضمّن
Bootstrap 4 نموذج مكدس
ينشئ المثال التالي نموذجًا مكدسًا يحتوي على حقلي إدخال ، ومربع اختيار واحد ، وزر إرسال.
أضف عنصر غلاف .form-groupحول كل عنصر تحكم في النموذج لضمان الهوامش المناسبة:
مثال
<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>
Bootstrap Inline Form
في نموذج مضمن ، تكون جميع العناصر مضمنة ومحاذاة إلى اليسار.
ملاحظة: ينطبق هذا فقط على النماذج الموجودة في إطارات العرض التي لا يقل عرضها عن 576 بكسل. على الشاشات التي يقل حجمها عن 576 بكسل ، سيتم تكديسها أفقيًا.
قاعدة إضافية للنموذج المضمن:
- أضف فئة
.form-inlineإلى<form>العنصر
ينشئ المثال التالي نموذجًا مضمّنًا مع حقلي إدخال ، ومربع اختيار واحد ، وزر إرسال واحد:
مثال
<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>
نموذج مضمن مع أدوات مساعدة
يبدو النموذج المضمن أعلاه "مضغوطًا" وسيبدو أفضل بكثير مع أدوات التباعد في Bootstrap. يضيف المثال التالي الهامش الأيمن ( .mr-sm-2) لكل إدخال على جميع الأجهزة (صغير وما فوق). ويتم استخدام فئة الهامش السفلي ( .mb-2) لتصميم حقل الإدخال عندما ينكسر (ينتقل من أفقي إلى عمودي بسبب عدم وجود مساحة / عرض كافية):
مثال
<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>
سوف تتعلم المزيد حول التباعد وفصول "المساعدة" الأخرى في الفصل الخاص بالمرافق Bootstrap 4 .
صف النموذج / الشبكة
يمكنك أيضًا استخدام الأعمدة ( .col) للتحكم في عرض ومحاذاة مدخلات النموذج دون استخدام أدوات التباعد. فقط تذكر أن تضعهم داخل .rowوعاء.
في المثال أدناه ، نستخدم عمودين سيظهران جنبًا إلى جنب. سوف تتعلم المزيد عن الأعمدة والصفوف في فصل Bootstrap Grids .
مثال
<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>
إذا كنت تريد تقليل هوامش الشبكة (تجاوز مزاريب العمود الافتراضية) ، فاستخدم .form-rowبدلاً من .row:
مثال
<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>
التحقق من صحة النموذج
يمكنك استخدام فئات تحقق مختلفة لتقديم ملاحظات قيمة للمستخدمين. أضف أيًا من العناصر .was-validatedأو .needs-validationإلى <form>العنصر ، بناءً على ما إذا كنت تريد تقديم ملاحظات التحقق من الصحة قبل إرسال النموذج أو بعده. سيكون لحقول الإدخال حد أخضر (صالح) أو أحمر (غير صالح) للإشارة إلى ما هو مفقود في النموذج. يمكنك أيضًا إضافة رسالة
.valid-feedbackأو .invalid-feedbackرسالة لإخبار المستخدم صراحة بما هو مفقود أو يجب القيام به قبل إرسال النموذج.
مثال
في هذا المثال ، نستخدمه .was-validatedللإشارة إلى ما هو مفقود قبل إرسال النموذج:
<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>
مثال
في هذا المثال ، نستخدم .needs-validation، والذي سيضيف تأثير التحقق من الصحة بعد إرسال النموذج (إذا كان هناك أي شيء مفقود). لاحظ أنه سيتعين عليك أيضًا إضافة بعض أكواد jQuery لهذا المثال لتعمل بشكل صحيح:
<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>