Bootstrap/input group

توسعة عناصر التحكّم في الاستمارات بسهولة بإضافة نصوص، و أزرار أو مجموعات أزرار على أيّ من جانبيْ حقول الإدخال النصيّة، و قوائم اختيّار مُخصَّصة وحقول تصفّح ملفات مُخصَّصة.

مثال قاعديّ

ضع حقلًا إضافيًّا أو زرًّا على أي من جانبيْ حقل الإدخال. كما يمكن وضع أحدهما على جانبيْ حقل الإدخال. كما يجب أن تكون اللافتات (<label>) خارج مجموعة حقول الإدخال.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="اسم المستخدم" aria-label="اسم المستخدم" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="اسم المستخدم الخاصّ بالمستلم" aria-label="'اسم المستخدم الخاصّ بالمستلم" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="المقدار (القيمة بالدولار)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">صندوق نصّي</span>
  </div>
  <textarea class="form-control" aria-label="صندوق نصّي"></textarea>
</div>

الالتفاف

تلتفّ مجموعات الإدخال افتراضيًا عبر flex-wrap: wrap بُغية استيعاب حقل التصديق المُخصص داخل مجموعة الإدخال. يمكنك تعطيل هذا السلوك بإضافة ‎.flex-nowrap.

<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input type="text" class="form-control" placeholder="اسم المستخدم" aria-label="اسم المستخدم" aria-describedby="addon-wrapping">
</div>

تحديد الأبعاد

أضف أصناف تحديد الأبعاد إلى العنصُر حيث يوجد الصنف ‎.input-group وستُحدَّد أبعاد المحتوى تلقائيًّا. لا حاجة لتكرار أصناف تحديد الأبعاد على كلّ عنصُر تحكّم في الاستمارة.

لا يدعم إطار العمل Bootstrap تطبيق أبعاد على العناصر منفردة إذا كانت ضمن مجموعة حقول إدخال.

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">صغير</span>
  </div>
  <input type="text" class="form-control" aria-label="صغير" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">مبدئي</span>
  </div>
  <input type="text" class="form-control" aria-label="مبدئيّ" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">كبير</span>
  </div>
  <input type="text" class="form-control" aria-label="كبير" aria-describedby="inputGroup-sizing-sm">
</div>

صناديق التأشير وأزرار الانتقاء

يمكن وضع صندوق تأشير أو زرّ انتقاء مكان النصّ ضمن مجموعة حقول إدخال.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label=”صندوق تأشير لحقل الإدخال النصيّ التالي">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="حقل نصّي مع صندوق تأشير">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
    <input type="radio" aria-label="زرّ انتقاء لحقل الإدخال النصيّ التاليّ">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="حقل إدخال نصيّ مع زرّ انتقاء">
</div>

حقول إدخال متعدّدة

على الرغم من أنّ إطار العمل Bootstrap يدعم عرض عناصر (<input>) عدّة؛ إلّا أنّ أنماط التنسيق لا تتوفّر إلّا لمجموعات الإدخال التي لا يوجد فيها سوى عنصُر <input> واحد.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">الاسم الشخصيّ والاسم العائليّ</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

حقول إضافيّة متعدّدة

تُدعَم الحقول الإضافيّة ويمكن مزجها مع صناديق التأشير وأزرار الانتقاء.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
<input type="text" class="form-control" aria-label="المقدار (بالدولار)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="المقدار (بالدولار)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

الأزرار الإضافيّة

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">زر</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="مثال على زر إضافي" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="اسم المستخدم الخاصّ بالمستلم" aria-label="اسم المستخدم الخاصّ بالمستلم" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">زر</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">زر</button>
    <button class="btn btn-outline-secondary" type="button">زر</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="مثال مع زرين إضافيين" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="اسم المستخدم الخاصّ بالمستلم" aria-label="اسم المستخدم الخاصّ بالمستلم مع زرين إضافيين" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">زر</button>
    <button class="btn btn-outline-secondary" type="button">زر</button>
  </div>
</div>

أزرار بقوائم منسدلة

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">قائمة منسدلة</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">إجراء</a>
      <a class="dropdown-item" href="#">إجراء آخر</a>
      <a class="dropdown-item" href="#">أمر آخر هنا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">رابط منفصل</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ بقائمة منسدلة">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ بقائمة منسدلة">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">قائمة منسدلة</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">إجراء</a>
      <a class="dropdown-item" href="#">إجراء آخر</a>
      <a class="dropdown-item" href="#">أمر آخر هنا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">رابط منفصل</a>
    </div>
  </div>
</div>

أزرار مُجزَّأة

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">إجراء</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">يفتح القائمة المنسدلة</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">إجراء</a>
      <a class="dropdown-item" href="#">إجراء آخر</a>
      <a class="dropdown-item" href="#">أمر آخر هنا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">رابط منفصل</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ مُجزّأ ذي قائمة منسدلة">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="حقل إدخال نصّي مع زرّ مُجزّأ ذي قائمة منسدلة">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">إجراء</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">يفتح القائمة المنسدلة</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">إجراء</a>
      <a class="dropdown-item" href="#">إجراء آخر</a>
      <a class="dropdown-item" href="#">أمر آخر هنا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">رابط منفصل</a>
    </div>
  </div>
</div>

الاستمارات المُخصَّصة

تتضمّن مجموعات حقول الإدخال دعم قوائم الاختيّار المُخصَّصة وحقول تصفّح الملفات المُخصَّصة. لا يتوفّر دعم نسخ هذه الحقول المبدئيّة المُضمّنة في المتصفّحات.

قوائم الاختيّار المُخصَّصة

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">الخيّارات</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>اختر...</option>
    <option value="1">واحد</option>
    <option value="2">اثنان</option>
    <option value="3">ثالث</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>اختر...</option>
    <option value="1">واحد</option>
    <option value="2">اثنان</option>
    <option value="3">ثلاثة</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">الخيّارات</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">زرّ</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>اختر</option>
    <option value="1">واحد</option>
    <option value="2">اثنان</option>
    <option value="3">ثلاثة</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04">
    <option selected>اختر...</option>
    <option value="1">واحد</option>
    <option value="2">اثنان</option>
    <option value="3">ثلاثة</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">زرّ</button>
  </div>
</div>

حقول تصفّح ملفات مُخصَّصة

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">حمل</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">اختر ملفا</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">اختر ملفا</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">حمل</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">زر</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">اختر ملفا</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">اختر ملفا</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">زر</button>
  </div>
</div>

سهولة الوصول

ستواجه قارئات الشاشة مشاكل مع الاستمارات إنْ لم تُضمَّن فيها لافتة لكلّ حقل إدخال. تأكّد من أنّ كلّ لافتة أو وظيفة إضافيّة في مجموعات حقول الإدخال تُنقَل إلى التقنيّات المساعدة.

تختلف الآليّة المُستخدَمة في توصيل المعنى للتقنيّات المساعدة (عناصر <label> مخفيّة باستخدام الصنف ‎.sr-only أو استخدام الخاصيّتيْن aria-label و aria-labelledby، أحيانًا مع الخاصيّة aria-describedby) والوظائف المنقولة إليها حسب نوعيّة مكوِن الواجهة المرغوب فيه.

مصادر

• صفحة Input group في توثيق Bootstrap.