نماذجBootstrap 5

نموذج مرتفع

جميع العناصر <input> و <textarea> التي تم تعيين كلاس .form-control يمكنها الحصول على النمط الصحيح للنموذج:

مثال

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">البريد الإلكتروني：</label>
    <input type="email" class="form-control" id="email" placeholder="الرجاء إدخال عنوان البريد الإلكتروني" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">كلمة المرور：</label>
    <input type="password" class="form-control" id="pwd" placeholder="الرجاء إدخال كلمة المرور" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> تذكرني
    </label>
  </div>
  <button type="submit" class="btn btn-primary">إرسال</button>
</form>

جرب بنفسك

بالإضافة إلى ذلك، يرجى ملاحظة أننا أضفنا .form-label لضمان التعبئة الصحيحة.

الصناديق المحددة لها علامات مختلفة. يتم تعيينها .form-check العنصر المضمن لصيغة الصناديق المحددة. .form-check-label استخدم صيغة، بينما يتم استخدام .form-check-input。

Textarea

مثال

<label for="comment">تعليق：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

جرب بنفسك

شريط النموذج / شبكة (نموذج داخلي)

إذا كنت ترغب في عرض عناصر النموذج بشكل متوازي، يرجى استخدام .row و .col：

مثال

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="الرجاء إدخال عنوان البريد الإلكتروني" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="الرجاء إدخال كلمة المرور" name="pswd">
    </div>
  </div>
</form>

جرب بنفسك

سوف تتمكن من شبكة Bootstrap لإيجاد مزيد من المعلومات حول الأعمدة والصفوف في هذا الفصل.

حجم عنصر النموذج

يمكنك استخدام .form-control-lg أو .form-control-sm تغيير .form-control حجم عناصر الإدخال:

مثال

<input type="text" class="form-control form-control-lg" placeholder="عنصر إدخال كبير">
<input type="text" class="form-control" placeholder="عنصر إدخال عادي">
<input type="text" class="form-control form-control-sm" placeholder="عنصر إدخال صغير">

جرب بنفسك

معطل وقراءة فقط

استخدم خصائص disabled و/أو readonly لإيقاف تشغيل حقل الإدخال:

مثال

<input type="text" class="form-control" placeholder="عنصر إدخال عادي">
<input type="text" class="form-control" placeholder="عنصر إدخال معطل" disabled>
<input type="text" class="form-control" placeholder="عنصر إدخال قابس" readonly>

جرب بنفسك

إدخال نصي نقي

استخدم .form-control-plaintext استخدم النوع .form-control لضبط نمط حقل الإدخال بدون حواف، ولكن احتفظ بالهوامش الخارجية والداخلية المناسبة:

مثال

<input type="text" class="form-control-plaintext" placeholder="إدخال نصي نقي">
<input type="text" class="form-control" placeholder="عنصر إدخال عادي">

جرب بنفسك

مستشعر اللون

لإعداد نمط الإدخال من نوع type="color" بشكل صحيح، يرجى استخدام .form-control-color النوع:

مثال

<input type="color" class="form-control form-control-color" value="#CCCCCC">

جرب بنفسك