مدخلات نموذج التمهيد
ضوابط النموذج المدعومة
يدعم Bootstrap عناصر التحكم في النموذج التالية:
- إدخال
- منطقة النص
- خانة الاختيار
- مذياع
- تحديد
إدخال Bootstrap
يدعم Bootstrap جميع أنواع إدخال HTML5: النص وكلمة المرور والوقت والوقت المحلي والتاريخ والشهر والوقت والأسبوع والرقم والبريد الإلكتروني وعنوان url والبحث والهاتف واللون.
ملاحظة: لن يتم تنسيق المدخلات بشكل كامل إذا لم يتم التصريح عن نوعها بشكل صحيح!
يحتوي المثال التالي على عنصرين من عناصر الإدخال ؛ واحد من نوع النص وآخر من نوع كلمة المرور:
مثال
<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="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
استخدم .checkbox-inlineالفصل إذا كنت تريد أن تظهر مربعات الاختيار على نفس السطر:
مثال
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
أزرار راديو Bootstrap
يتم استخدام أزرار الاختيار إذا كنت تريد قصر المستخدم على اختيار واحد فقط من قائمة الخيارات المحددة مسبقًا.
يحتوي المثال التالي على ثلاثة أزرار اختيار. يتم تحديد الخيار الأول افتراضيًا ويتم تعطيل الخيار الأخير:
مثال
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
استخدم .radio-inlineالفصل الدراسي إذا كنت تريد أن تظهر أزرار الاختيار على نفس السطر:
مثال
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
قائمة تحديد التمهيد
يتم استخدام قوائم التحديد إذا كنت تريد السماح للمستخدم بالاختيار من بين خيارات متعددة.
يحتوي المثال التالي على قائمة منسدلة (اختر القائمة):
مثال
<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>