النماذج (Forms)

نظرة عامة

توسع عناصر التحكم في النماذج الخاصة بـ Bootstrap بناءً على أنماط النماذج المعاد تشغيلها (Rebooted form styles) باستخدام الفئات (classes). استخدم هذه الفئات (classes) للاستفادة من عروضها المخصصة لضمان تقديم أكثر اتساقاً عبر المتصفحات والأجهزة المختلفة.

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

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

<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>

النماذج المعطلة

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

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

أضف سمة disabled إلى عنصر <fieldset> لتعطيل جميع عناصر التحكم بداخله. تعامل المتصفحات جميع عناصر التحكم الأصلية في النماذج (عناصر <input> و <select> و <button>) داخل <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> مخفية باستخدام الفئة (class) .visually-hidden
• الإشارة إلى عنصر موجود يمكن أن يعمل كتسمية باستخدام aria-labelledby
• توفير سمة title
• تعيين الاسم المتاح صراحةً على العنصر باستخدام aria-label

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

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

الـ (CSS)

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

متغيرات الـ (Sass)

متغيرات $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:         $focus-ring-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;
$input-btn-focus-color:         $focus-ring-color;
$input-btn-focus-blur:          $focus-ring-blur;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow;

$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:      var(--#{$prefix}border-width);