مدخلات نموذج Bootstrap 4
ضوابط النموذج المدعومة
يدعم Bootstrap عناصر التحكم في النموذج التالية:
- إدخال
- منطقة النص
- خانة الاختيار
- مذياع
- تحديد
إدخال Bootstrap
يدعم Bootstrap جميع أنواع إدخال HTML5: النص وكلمة المرور والوقت والوقت المحلي والتاريخ والشهر والوقت والأسبوع والرقم والبريد الإلكتروني وعنوان url والبحث والهاتف واللون.
ملاحظة: لن يتم تنسيق المدخلات بشكل كامل إذا لم يتم التصريح عن نوعها بشكل صحيح!
يحتوي المثال التالي على عنصرين من عناصر الإدخال ؛ واحد من type="text"وواحد من
type="password". كما ذكرنا في فصل النماذج ، فإننا نستخدم .form-controlالفئة لتصميم المدخلات بالعرض الكامل والحشو المناسب ، إلخ:
مثال
<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>
Bootstrap Textarea
يحتوي المثال التالي على منطقة نصية:
مثال
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
مربعات اختيار التمهيد
يتم استخدام مربعات الاختيار إذا كنت تريد أن يقوم المستخدم بتحديد أي عدد من الخيارات من قائمة الخيارات المحددة مسبقًا.
يحتوي المثال التالي على ثلاثة مربعات اختيار. الخيار الأخير معطل:
مثال
<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>
شرح المثال
استخدم عنصر غلاف مع class="form-check"لضمان الهوامش المناسبة للتسميات ومربعات الاختيار.
أضف .form-check-labelالفئة إلى عناصر التسمية ، وإلى .form-check-inputنمط مربعات الاختيار بشكل صحيح داخل .form-checkالحاوية.
مربعات اختيار مضمنة
استخدم .form-check-inlineالفصل إذا كنت تريد أن تظهر مربعات الاختيار على نفس السطر:
مثال
<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>
أزرار راديو Bootstrap
يتم استخدام أزرار الاختيار إذا كنت تريد قصر المستخدم على اختيار واحد فقط من قائمة الخيارات المحددة مسبقًا.
يحتوي المثال التالي على ثلاثة أزرار اختيار. الخيار الأخير معطل:
مثال
<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>
كما هو الحال مع مربعات الاختيار ، استخدم .form-check-inlineالفئة إذا كنت تريد أن تظهر أزرار الاختيار على نفس السطر:
مثال
<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>
قائمة تحديد التمهيد
يتم استخدام قوائم التحديد إذا كنت تريد السماح للمستخدم بالاختيار من بين خيارات متعددة.
يحتوي المثال التالي على قائمة منسدلة (اختر القائمة):
مثال
<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>
تحجيم التحكم في النموذج
تغيير حجم عنصر تحكم النموذج باستخدام .form-control-smأو .form-control-lg:
مثال
<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">
التحكم في النموذج بنص عادي
استخدم .form-control-plaintextإذا كنت تريد نمط حقل الإدخال كنص عادي:
مثال
<input type="text" class="form-control-plaintext">
ملف التحكم في النموذج والنطاق
أضف .form-control-rangeالفئة إلى أو input type"range"لتصميم عنصر تحكم في النطاق أو حقل ملف بالعرض الكامل:.form-control-fileinput type"file"
مثال
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">