نماذج

ملخص

تتوسع عناصر التحكم في نموذج Bootstrap في أنماط النماذج المعاد تمهيدها مع الفئات. استخدم هذه الفئات للاشتراك في شاشات العرض المخصصة الخاصة بهم للحصول على عرض أكثر تناسقًا عبر المتصفحات والأجهزة.

تأكد من استخدام typeسمة مناسبة في جميع المدخلات (على سبيل المثال ، emailلعنوان البريد الإلكتروني أو numberللمعلومات الرقمية) للاستفادة من عناصر التحكم الجديدة في الإدخال مثل التحقق من البريد الإلكتروني واختيار الرقم والمزيد.

إليك مثال سريع لإظهار أنماط نماذج Bootstrap. استمر في القراءة للحصول على وثائق حول الفئات المطلوبة وتخطيط النموذج والمزيد.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

نص النموذج

يمكن إنشاء نص على مستوى الكتلة أو على مستوى مضمّن باستخدام .form-text.

يمكن تنسيق نص النموذج الموجود أسفل المدخلات باستخدام .form-text. إذا تم استخدام عنصر على مستوى الكتلة ، فسيتم إضافة هامش علوي لتسهيل التباعد من المدخلات أعلاه.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

يمكن أن يستخدم النص المضمن أي عنصر HTML مضمن نموذجي (سواء كان ذلك <span>، <small>أو أي شيء آخر) بدون أي شيء أكثر من .form-textالفئة.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

أشكال المعوقين

أضف disabledالسمة المنطقية على الإدخال لمنع تفاعلات المستخدم وجعلها تبدو أفتح.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

أضف disabledالسمة إلى <fieldset>لتعطيل جميع عناصر التحكم داخل. تعامل المستعرضات جميع عناصر تحكم النموذج الأصلية ( <input>، <select>والعناصر <button>) داخل a على <fieldset disabled>أنها معطلة ، مما يمنع تفاعلات لوحة المفاتيح والماوس عليها.

ومع ذلك ، إذا كان النموذج الخاص بك يتضمن أيضًا عناصر تشبه الأزرار المخصصة مثل <a class="btn btn-*">...</a>، فسيتم منحها نمطًا فقط pointer-events: none، مما يعني أنها لا تزال قابلة للتركيز وقابلة للتشغيل باستخدام لوحة المفاتيح. في هذه الحالة ، يجب عليك تعديل عناصر التحكم هذه يدويًا عن طريق الإضافة tabindex="-1"لمنعها من تلقي التركيز aria-disabled="disabled"والإشارة إلى حالتها للتقنيات المساعدة.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

إمكانية الوصول

تأكد من أن جميع عناصر التحكم في النموذج لها اسم مناسب يمكن الوصول إليه بحيث يمكن نقل الغرض منها إلى مستخدمي التقنيات المساعدة. إن أبسط طريقة لتحقيق ذلك هي استخدام <label>عنصر ، أو - في حالة الأزرار - لتضمين نص وصفي كافٍ كجزء من <button>...</button>المحتوى.

في المواقف التي يتعذر فيها تضمين <label>محتوى نصي مرئي أو مناسب ، توجد طرق بديلة للاستمرار في توفير اسم يمكن الوصول إليه ، مثل:

• <label>العناصر المخفية باستخدام .visually-hiddenالفصل
• الإشارة إلى عنصر موجود يمكن أن يكون بمثابة تسمية باستخدامaria-labelledby
• توفير titleسمة
• تعيين الاسم الذي يمكن الوصول إليه بشكل صريح على عنصر باستخدامaria-label

إذا لم يكن أي من هذه العناصر موجودًا ، فقد تلجأ التقنيات المساعدة إلى استخدام placeholderالسمة كعنصر احتياطي للاسم والعناصر التي يمكن الوصول <input>إليها <textarea>. توفر الأمثلة في هذا القسم بعض الأساليب المقترحة الخاصة بكل حالة.

أثناء استخدام المحتوى المخفي بصريًا ( .visually-hidden، aria-labelوحتى placeholderالمحتوى ، الذي يختفي بمجرد احتواء حقل النموذج على محتوى) سيفيد مستخدمي التكنولوجيا المساعدة ، قد لا يزال نقص نص التسمية المرئي يمثل مشكلة لبعض المستخدمين. بعض أشكال الملصقات المرئية هي عمومًا أفضل نهج ، سواء من حيث سهولة الوصول أو الاستخدام.

ساس

يتم تعيين العديد من متغيرات النموذج على مستوى عام لإعادة استخدامها وتوسيعها بواسطة مكونات النموذج الفردية. سترى هذه في أغلب الأحيان كمتغيرات $input-btn-*.$input-*

المتغيرات

$input-btn-*المتغيرات هي متغيرات عالمية مشتركة بين أزرارنا ومكونات النموذج الخاصة بنا. ستجد هذه المعاد تعيينها بشكل متكرر كقيم لمتغيرات أخرى خاصة بالمكون.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;