الاستمارات Forms في إطار العمل Bootstrap

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

أمثلة على مكوِّن الاستمارات Forms في إطار العمل Bootstrap وقواعد عامّة لاستخدامه لتنسيق عناصر التحكّم في الاستمارات وخيّارات التخطيط، إضافةً لتقديم مكوِّنات مُخصَّصة لإنشاء أنواع مختلفة من الاستمارات.

نظرة عامة

تُبنى الاستمارات في إطار العمل Bootstrap عبر أصناف تمدّد تنسيق الاستمارات في Reboot. استخدم هذه الأصناف لاختيّار تنسيقاتِها المُخصَّصة للحصول على عرض متناسق على جميع الأجهزة والمتصفّحات.

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

في ما يلي مثال سريع لتوضيح تنسيقات الاستمارات في إطار العمل Bootstrap. واصل القراءة لمعلومات عن الأصناف المطلوبة، ومُخطَّطات الاستمارات وأمور أخرى. 

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">البريد الإلكترونيّ</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="أدخل عنوان البريد الإلكترونيّ">
    <small id="emailHelp" class="form-text text-muted">لن نتشارك بريدك الإلكترونيّ مع أيّ كان</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">كلمة السرّ</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="كلمة السرّ">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">أشّر عليّ</label>
  </div>
  <button type="submit" class="btn btn-primary">أرسل</button>
</form>

التحكّم في الاستمارات

تُنسَّق العناصر النصيّة في الاستمارات - مثل <input> و <select> و <textarea> - بالصنف ‎.form-control. يتضمّن الصنف تنسيقاتٍ للمظهر العام، وحالة التركيز Focus (تلقّي المؤشّر)، وتحديد الأبعاد، وغيرها.

تأكّد من الاطّلاع على فقرة "الاستمارات المُخصَّصة" أدناه لتخصيص تنسيق العناصر <select>. 

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">البريد الإلكترونيّ</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">مثال على قائمة اختيّار </label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">مثال على قائمة اختيّار متعدّد</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">مثال على مربّع نصّي متعدّد الأسطر</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

استخدم الصنف ‎.form-control-file بدلًا من ‎.form-control بالنسبة لحقول إدخال الملفّات: 

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">مثال على إدخال ملفّ</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

تحديد الأبعاد في الاستمارات

تُستخدَم أصناف مثل ‎.form-control-lg و ‎.form-control-sm لتعيين الارتفاعات. 

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="حقل إدخال مبدئي">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>قائمة خيّارات كبيرة</option>
</select>
<select class="form-control">
  <option>قائمة خيّارات مبدئيّة</option>
</select>
<select class="form-control form-control-sm">
  <option>قائمة خيّارات صغيرة</option>
</select>

حقول للقراءة فقط

أضف الخاصيّة المنطقيّة readonly إلى حقل إدخال لمنع التعديل على قيمة الحقل. تظهر حقول القراءة فقط أكشف لونًا قليلًا (مثل حقول الإدخال المُعطَّلة)، إلّا أنّها تحتفظ بالمؤشّر. 

<input class="form-control" type="text" placeholder="حقل إدخال للقراءة فقط …" readonly>

قيم نصيّة بسيطة في حقول إدخال للقراءة فقط

إن أردت تنسيق حقول إدخال للقراءة فقط (<input readonly>) في الاستمارة على شكل قيمة نصيّة بسيطة فيمكنك إضافة الصنف ‎.form-control-plaintext لحذف التنسيق المبدئي لهذه الحقول في الاستمارات والمحافظة على الهوامش والحاشيّات الصحيحة. 

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">البريد الإلكترونيّ</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">كلمة السرّ</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="كلمة السرّ">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">البريد الإلكترونيّ</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="كلمة السرّ">
  </div>
  <button type="submit" class="btn btn-primary mb-2">أكّد الهويّة</button>
</form>

عناصر إدخال المجالات

يمكنك تعيين عناصر إدخال مجالات أفقية عبر استخدام الصنف ‎.form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">مثال على عنصر إدخال مجال</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

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

يُحسَّن تنسيق صناديق التأشير وأزرار الانتقاء المبدئيّة بمساعدة الصنف ‎.form-check، وهو صنف واحد لكلا نوعيْ حقول الإدخال، يحسّن مُخطَّط وسلوك عناصر HTML المسؤولة عنهما. تُعدّ صناديق التأشير (checkboxs) لتحديد خيّار واحد أو خيّارات عدّة ضمن لائحة، بينما تُستخدَم أزرار الانتقاء (radio button) لتحديد خيّار واحد من خيّارات متعدّدة.

يدعم مكوِّن الاستمارات في Bootstrap تعطيل صناديق التأشير وأزرار الانتقاء، لكن تجب إضافة الخاصيّة disabled إلى الصنف ‎.form-check-input. تطبّق خاصيّة التعطيل لونًا أكثر إضاءة للمساعدة في الإشارة إلى حالة حقل الإدخال.

تُستخدَم صناديق التأشير وأزرار الانتقاء في إطار العمل Bootstrap لدعم تصديق الاستمارات المعتمد على HTML، ولتوفير لافتات دقيقة ويسهُل الوصول إليها. لهذا السبب فإنّ العنصُريْن <input> و <label> في Bootstrap يوجدان على نفس المستوى، بدلًا من وضع <input> داخل <label>. لهذا السبّب فإنه يتعيّن تحديد قيمتيْ الخاصيّتيْن id و for لربط حقل الإدخال (<input>) واللافتة (<label>).

الوضعيّة المبدئيّة (رأسيّة)

تتموضع صناديق التأشير أو أزرار الانتقاء الموجودة على نفس المستوى تتموضع عموديًّا وتُباعَد باستخدام الصنف ‎.form-check. 

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    صندوق تأشير مبدئي
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    صندوق تأشير مبدئي مُعطَّل
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    زرّ انتقاء مبدئيّ
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    زر انتقاء مبدئي ثان
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    زرّ انتقاء مُعطَّل
  </label>
</div>

التموضع على السطر

تتموضع مجموعة من صناديق التأشير أو أزرار الانتقاء أفقيًّا بمجرّد إضافة الصنف ‎.form-check-inline إلى أيّ ‎.form-check. 

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (مُعطّل)</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (مُعطّل)</label>
</div>

بدون لافتات

أضف الصنف ‎.position-static إلى حقول الإدخال داخل الصنف ‎.form-check التي ليست لديها لافتات نصيّة. تذكّر توفير نوع من أنواع اللافتات للتقنيّات المساعدة (استخدام aria-label على سبيل المثال). 

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

تخطيط الاستمارات

تتموضع جميع الاستمارات في إطار العمل Bootstrap عموديًّا نظرًا لاستخدام الخاصيّتيْن display: block و width: 100% على الغالبيّة العظمى من عناصر الاستمارات. يمكن تطبيق أصناف إضافيّة على مستوى الاستمارة للتنويع على هذا المُخطَّط

مجموعات الاستمارات

يعدّ استخدام الصنف ‎.form-group أسهل طريقة لإضافة هيكليّة إلى الاستمارات. يوفّر هذا الصنف وسيلةً مرنة تشجّع على تجميع اللافتات على نحو صحيح، وتتيح عناصر للتحكّم، ونصًّا مساعدًا اختيّاريًا ونوعًا من رسائل تصديق الاستمارات. لا يطبّق هذا الصنف مبدئيًّا سوى هامش سفليّ (margin-bottom)، إلّا أنّه يستعين بأنماط إضافيّة من الصنف‎.form-inline حسب الحاجة. استخدم هذا الصنف مع العناصر <fieldset>، أو <div> أو أيّ عنصُر آخر تقريبًا. 

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">مثال على لافتة</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="مثال على حقل إدخال">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">لافتة أخرى</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="حقل إدخال آخر">
  </div>
</form>

استمارات ذات تخطيط مُعقَّد

يمكن بناء استماراتٍ أكثر تعقيدًا باستخدام أصناف الشبكة في إطار العمل Bootstrap. استخدم هذه الأصناف لمُخطَّطات الاستمارات التي تتطلّب أعمدةً عدّة، وقياسات عرض مختلفة وخيّارات إضافيّة للمحاذاة. 

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="الاسم الشخصيّ">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="الاسم العائليّ">
    </div>
  </div>
</form>

استمارة على سطر

يمكن استخدام الصنف ‎.form-row بدلًا من صنف سطر الشبكة الاعتياديّ (‎.row) الذي يلغي الخنادق (gutters) حول الأعمدة للحصول على مُخطَّطات أضيق وأكثر كثافة. 

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="الاسم الشخصيّ">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="الاسم العائليّ">
    </div>
  </div>
</form>

كما يمكن استخدام أصناف الشبكة لإنشاء مُخطّطات أكثر تعقيدًا للاستمارات. 

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">البريد الإلكترونيّ</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">كلمة السر</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">العنوان</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">العنوان 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">المدينة</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">الولاية</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">الرمز البريدي</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        أشّر علي
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">سجل الدخول</button>
</form>

الاستمارات الأفقيّة

أنشئ استماراتٍ أفقيّة عن طريق تخطيط الشبكة بإضافة الصنف ‎.row لإنشاء مجموعات حقول واستخدام الأصناف ‎.col-*‎-‎*‎ لتحديد عرض اللافتات وعناصر التحكّم في الاستمارات. تأكّد من إضافة الصنف ‎.col-form-label إلى اللافتات (<label>) لكي تتوسّط عموديًّا بمحاذاة عناصر الاستمارة المرتبطة بها.

قد تحتاج من حين لآخر إلى استخدام أدوات الهامش والحاشيّة لإنشاء المحاذاة المثاليّة التي ترغب فيها. تُحذَف مبدئيًّا الحاشية في الأعلى (padding-top) من لافتات أزرار الانتقاء الرأسيّة لمحاذاتها على نحو أنسب مع الخط القاعديّ للنصّ. 

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">البريد الإلكتروني</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">كلمة السر</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">أزرار الانتقاء</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            زر الانتقاء الأول
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            زر الانتقاء الثاني
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            زر انتقاء ثالث معطل
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          مثال على صندوق تأشير
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">سجل الدخول</button>
    </div>
  </div>
</form>
أبعاد اللافتات في الاستمارات الأفقيّة

تأكّد من تطبيق الصنف ‎.col-form-label-sm أو ‎.col-form-label-lg على العناصر <label> أو <legend> بحيث تتبع قياس الصنف المُطبَّق على حقل الإدخال (‎.form-control-lg أو ‎.form-control-sm). 

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">البريد الإلكتروني</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">البريد الإلكتروني</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">البريد الإلكتروني</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

أبعاد الأعمدة

يتيح نظام الشبكة وضع أيّ عدد من الأعمدة (‎.col) داخل الأسطُر (‎.row أو ‎.form-row) كما في الأمثلة السابقة. تتقاسم الأعمدةُ المساحةَ المتوفّرة بالتساوي. يمكن باستخدام أصناف مُخصَّصة مثل ‎.col-7 تحديد مساحة أعرض - أو أقلّ - لبعضٍ من الأعمدة وترك البقيّة تتقاسم المساحة المتبقيّة بالتساوي.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="المدينة">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="الدولة">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="الرمز البريديّ">
    </div>
  </div>
</form>

تحديد الأبعاد تلقائيّا

يستخدم المثال أدناه أدوات Flexbox لتوسيط المحتوى عموديًّا ويُبدِل ‎.col-auto مكان ‎.col لكي لا تأخذ الأعمدة سوى المساحة التي تحتاجها. بمعنى آخر فإنّ حجم الأعمدة يتحدّد بمحتواها. 

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">الاسم</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">اسم المستخدم</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="اسم المستخدم">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          تذكرني
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">سجل الدخول</button>
    </div>
  </div>
</form>

كما يمكن المزج بين الطريقتيْن واستخدام أصناف ذات عرض مُحدَّد: 

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">الاسم</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="عبد الرحمن">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">اسم المستخدم</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="اسم المستخدم">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          تذكرني
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">سجل الدخول</button>
    </div>
  </div>
</form>

لا ننسى أنّ عناصر الاستمارات المُخصَّصة مدعومة. 

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">التفضيلات</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>اختر...</option>
        <option value="1">واحد</option>
        <option value="2">اثنان</option>
        <option value="3">ثلاثة</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">تذكّر تفضيلاتي</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">أرسل</button>
    </div>
  </div>
</form>

الاستمارات السطريّة

استخدم الصنف ‎.form-inline لعرض سلسلة من اللافتات، وعناصر الاستمارات والأزرار في سطر أفقيّ واحد. تختلف عناصر الإدخال في الاستمارات السطريّة قليلًا عن حالتها المبدئيّة.

  • تُطبَّق الخاصيّةdisplay: flex على عناصر التحكّم في الاستمارة، ممّا يقلّص الفراغات في عناصر HTML ويسمح باستخدام أدوات التباعد وأدوات Flex لمحاذاة العناصر.
  • تُطبَّق على عناصر التحكّم ومجموعات الإدخال الخاصيّة width: auto لإلغاء مفعول الخاصيّة width: 100% المبدئيّة في Bootstrap.
  • لا تظهر عناصر التحكّم على السطر إلّا في إطارات العرض التي تتجاوز 576 بكسل، لأخذ إطارات العرض الضيّقة على الأجهزة الجوّالة في الحسبان.

قد تحتاج لاستخدام أدوات التباعد لتعديل محاذاة وعرض عناصر تحكّم على نحو منفرد (كما هو موضَّح في المثال أدناه). تأكّد من إدراج لافتة (<label>) مع كلّ عنصُر تحكّم في الاستمارة، حتى إنْ كنت تحتاج لإخفائه عن الزوّار الذين لا يستخدمون قارئات شاشة بالصنف ‎.sr-only. 

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">الاسم</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="عبد الرحمن">

  <label class="sr-only" for="inlineFormInputGroupUsername2">اسم المستخدم</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="اسم المستخدم">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      تذكّرني
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">أرسل</button>
</form>

عناصر التحكّم وقوائم الاختيّار المُخصَّصة مدعومة كذلك. 

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">التفضيلات</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>اختر ...</option>
    <option value="1">واحد</option>
    <option value="2">اثنان</option>
    <option value="3">ثلاثة</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">تذكّر تفضيلاتي</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">أرسل</button>
</form>
بدائل عن اللافتات المخفيّة

ستواجه التقنيّات المساعدة مثل قارئات الشاشة مشاكل مع الاستمارات إنْ لم تضع لافتة لكلّ حقل إدخال. يمكن إخفاء اللافتات في الاستمارات السطريّة باستخدام الصنف ‎.sr-only. توجد طرق أخرى بديلة لتوفير لافتات للتقنيّات المساعدة، مثل الخاصيّة aria-label، أو aria-labelledby أوtitle. قد تلجأ التقنيّات المساعدة في غيّاب الخاصيّات المذكورة إلى قراءة محتوى الخاصيّة placeholder إنْ وُجد؛ إلّا أنّه لا يُنصَح باستخدام الخاصيّة placeholder بديلًا عن الطرق السابقة.

النصوص المساعدة

يمكن إنشاء نصوص مساعدة على مستوى الكتل في الاستمارات باستخدام الصنف ‎.form-text (بدلًا من ‎.help-block المُستخدَم في الإصدار الثالث من إطار العمل Bootstrap). تساعد الأصناف الخدميّة مثل ‎.text-muted على إضافة نص مساعد على السطر بمرونة.

ربط النصّ المساعد بعناصر التحكّم في الاستمارة

يجب أن تظهر علاقة النص المساعد صراحةً بالعناصر التي يرتبط بها في الاستمارة باستخدام الخاصيّة aria-describedby. يضمن هذا الأمر أنّ التقنيّات المساعدة - مثل قارئات الشاشة - ستعالج النصّ المساعد عندما يتلقى حقلُ الإدخال المؤشّر أو عندما يبدأ المستخم الكتابة فيه.

ينسّق الصنف ‎.form-text النصّ المساعد المصاحب لحقول الإدخال في الاستمارة أدناه. يحتوي هذا الصنف على الخاصيّة display: block ويضيف هامشًا علويًّا لتباعد مريح مع حقول الإدخال أعلى النص. 

<label for="inputPassword5">كلمة السرّ</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  يجب أن يكون طول كلمة السرّ بين 8 و20 محرفًا، وأن تحتوي على أحرف وأعداد وألّا تحتوي على مسافات بيضاء، أو محارف خاصّة أو أيقونات.
</small>

يمكن إنشاء نصوص مساعدة على السطر بأي عنصُر سطريّ في HTML (سواء كان <small>، أو <span> أو أي عنصُر آخر) بدون زيادة، سوى صنف خدمي. 

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">كلمة السرّ</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
       يجب أن يكون طول كلمة السرّ بين 8 و20 محرفا.
    </small>
  </div>
</form>

الاستمارات المُعطَّلة

أضف الخاصيّة المنطقيّة disabled إلى حقل إدخال لمنع المستخدم من التفاعل معه وجعله يظهر أقلّ إضاءة قليلاً. 

<input class="form-control" id="disabledInput" type="text" placeholder="حقل إدخال مُعطّل" disabled>

تُعطَّل جميع العناصر التابعة للعنصُر <fieldset> عند إضافة الخاصيّة disabled إليها. 

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">عنصُر إدخال مُعطّل</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="عنصُر إدخال مُعطّل">
    </div>
    <div class="form-group">
      <label for="disabledSelect">قائمة اختيّار مُعطّلة</label>
      <select id="disabledSelect" class="form-control">
        <option>اختيّار معطّل</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        لا يمكن التأشير هنا
      </label>
    </div>
    <button type="submit" class="btn btn-primary">أرسل</button>
  </fieldset>
</form>

تنبيه بخصوص الروابط في الاستمارات المُعطّلة

تتعامل المتصفّحات مبدئيًّا مع جميع عناصر التحكّم الأصيلة (<input> و <select> و <button> ) الموجودة داخل <fieldset disabled> على أنّها عناصر مُعطّلة، ممّا يمنع التفاعل معها سواء عن طريق المؤشّر أو لوحة المفاتيح. رغم ذلك، تُطبَّق الخاصيّة pointer-events: none على العناصر <a ... class="btn btn-*‎"‎> إذا كانت موجودة داخل الاستمارة. كما أشارت الفقرة الزرّ المُعطَّل من توثيق الأزرار في Bootstrap (وخصوصًا التنبيه بخصوص وظيفة الرابط) فإنّ الخاصيّة المذكورة ليست معياريّة بعد، وغير مدعومة تمامًا في الإصدار 18 من المتصفّح Opera والإصدارات التي سبقته ولا في الإصدار 10 من المتصفّح Internet Explorer؛ وبالتالي لن تمنع مستخدمي لوحات المفاتيح من الانتقال إلى الروابط وتفعيلها. لذا استخدم شفرة JavaScript مُخصَّصة لتعطيل تلك النوعيّة من الروابط.

الدعم على المتصفّحات المختلفة

على الرغم من أنّ Bootstrap يُطبَّق التنسيقات المُشار إليها على جميع المتصفّحات؛ إلّا أنّ الإصدار 11 من Internet Explorer والإصدارات التي سبقته لا تدعم تمامًا الخاصيّة disabled على العنصُر <fieldset>. لذا استخدم شفرة JavaScript مُخصَّصة لتعطيل <fieldset> العنصُر على تلك المتصفّحات.

التصديق (Validation)

وفّر تغذيّة راجعة مفيدة لمستخدمي موقعك باستخدام تصديق الاستمارات في HTML5، والمتوفّر على جميع المتصفّحات المدعومة. اختر التغذيّة الراجعة (validation feedback) المبدئيّة التي يوفّرها المتصفّح أو قدّم رسائل مُخصَّصَة باستخدام أصناف CSS المُضمَّنة مسبقًا مع شيفرة JavaScript.

تنبيه: ينصح مطوّرو Bootstrap بشدّة باستخدام الأنماط المُخصَّصة للتصديق إذ أنّ قارئات الشاشة لا تحصُل على التغذيّة الراجعة المبدئيّة من المتصفّحات (خصوص كروم على سطح المكتب والجوال).

تنبيه بخصوص تصديق مجموعات الإدخال: تواجه مجموعات الإدخال للأسف صعوبة بخصوص أنماط التصديق. نوصي بوضع رسائل ملاحظات كعناصر شقيقة لعناصر ‎.input-group التي لها ‎.‎is-{valid|invalid}‎‎‎‎‎. يؤدي وضع رسائل الملاحظات داخل مجموعات الإدخال إلى كسر شعاع الإطار. شاهد حل هذه المشكلة في الأسفل.

كيف يعمل التصديق؟

في ما يلي آليّة عمل تصديق الاستمارات في إطار العمل Bootstrap:

  • تُطبَّق آليّة التصديق في HTML عبر صنفيْ CSS مزيَّفيْن : ‎:invalid و ‎:valid. تُطبَّق هذه الآليّة على العناصر <input> و <select> و <textarea>.
  • يحدّد Bootstrap مجال تطبيق تنسيقات الصنفيْن المزيَّفيْن ‎:invalid و‎:valid بصنف ‎.was-validated الأب، الذي يُطبَّق عادةً على العنصُر <form>. في ما عدا ذلك يظهر أيّ حقل مطلوب لا توجد به قيمة يظهُر أنّه غير مُصدَّق عند تحميل الصفحة. يمكنك بهذه الطريقة اختيّار متى تفعِّل الصنفيْن (عادةً بعد محاولة إرسال الاستمارة).
  • لإعادة تعيين مظهر الاستمارة (مثلًا في حالة إرسال بيانات الاستمارة باستخدام AJAX) ، عليك إزالة الصنف ‎.was-validated من الوسم <form> مرة أخرى بعد الإرسال.
  • يمكن استخدام حلّ بديل يتمثّل في الصنفيْن ‎.is-invalid و‎.is-valid بدلًا من الصنفيْن الزائفين ‎:invalid و‎:valid لإجراء التصديق على مستوى الخادم (server side validation). لا يتطلّب هذان الصنفان استخدام صنف ‎.was-validated أب.
  • لا يمكن - حاليًّا - تطبيق تنسيقات على لافتة (<label>) تأتي قبل عنصُر تحكّم في كائن المستند DOM بدون استخدام شفرة JavaScript مُخصَّصة، نظرًا للتقييدات الناتجة عن آليّة عمل CSS.
  • تدعم المتصفّحات الحديثة جميعها واجهة التحقّق من القيود (constraint validation API) هي سلسلة من توابع JavaScript للتصديق على عناصر التحكّم في الاستمارات.
  • يمكن استخدام رسائل التغذيّة الراجعة المبدئيّة في المتصفّح (تختلف من متصفّح لآخر ولا يمكن تنسيقها بأنماط CSS) أو الأنماط المُخصَّصة للتغذيّة الراجعة في إطار العمل Bootstrap التي تستخدم عناصر HTML و CSS إضافيّة.
  • يمكن عبر التابع setCustomValidity توفير رسائل تصديق مُخصَّصة في JavaScript.

تأمّل - مع استحضار ما سبق - الأمثلة التوضيحيّة التاليّة لتنسيقات مُخصَّصة لتصديق الاستمارات، وأصناف التصديق على مستوى الخادم والرسائل المبدئيّة في المتصفّحات.

الأنماط المُخصَّصة

يتطلّب استخدام الأنماط المُخصَّصة لتصديق الاستمارات في Bootstrap إضافة الخاصيّة المنطقيّة novalidate إلى الاستمارة (<form>). تعطّل هذه الخاصيّة تلميحات التغذيّة الراجعة المبدئيّة في المتصفّحات، مع الإبقاء على إمكانيّة الوصول عبر JavaScript إلى واجهة التصديق على الاستمارات. عند محاولة إرسال الاستمارة أدناه فإن مُلحَق JavaScript الذي يقدّمه إطار العمل Bootstrap سيعترض زرّ الإرسال ويُظهر التغذيّة الراجعة للزائر. تظهر تنسيقات الصنفيْن الزائفيْن ‎:invalid و ‎:valid على عناصر التحكّم في الاستمارة عند محاولة إرسالها بدون إدخال قيم.

تُطبَّق أنماط رسائل التغذيّة الراجعة المخصصة ألوانًا وإطارات، وأنماط تركيز ، وأيقونات خلفية لإيصال رسائل التغذية الراجعة بصورة أفضل. لا تتوفر أيقونات الخلفية لـعناصر <select> إلا عند استخدام ‎.custom-select وليس ‎.form-control. 

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">الاسم الشخصيّ</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="الاسم الشخصيّ" value="محمد" required>
      <div class="valid-feedback">
       جيّد!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">الاسم العائليّ</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="الاسم العائليّ" value="أحمد" required>
      <div class="valid-feedback">
        جيّد!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">اسم المستخدم</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="اسم المستخدم" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          رجاءً اختر اسم مستخدم.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">المدينة</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="المدينة" required>
      <div class="invalid-feedback">
        رجاءً اختر مدينة مقبولة.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">الدولة</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="الدولة" required>
      <div class="invalid-feedback">
        رجاءً اختر دولة مقبولة.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">الرمز البريديّ</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="الرمز البريديّ" required>
      <div class="invalid-feedback">
        رجاءً اختر رمزًا بريديًّا صحيحا.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        أوافق على الشروط.
      </label>
      <div class="invalid-feedback">
        يجب أن توافق على الشروط.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">أرسل الاستمارة</button>
</form>

<script>
// مثال على شفرة JavaScritp تعطّل إرسال الاستمارة في حال وجود حقول غير مُصدّقة
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // البحث عن جميع الاستمارات التي نريد تطبيق تنسيقات التصديق المُخصّصة في Bootstrap عليها
    var forms = document.getElementsByClassName('needs-validation');
    // المرور عليها ومنع الإرسال
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

الرسائل المبدئيّة في المتصفّحات

إنْ لم تكن مهتمًّا بعرض رسائل تغذيّة راجعة مُخصَّصَة أو بكتابة JavaScript لتغيير سلوك الاستمارات فيمكنك اللجوء إلى الرسائل المبدئيّة في المتصفّح. تظهر عند محاولة إرسال الاستمارة التاليّة دون إدخال قيّم في عناصر التحكّم رسائل تختلف حسب المتصفّح ونظام التشغيل. رغم أنّه لا يمكن تنسيق رسائل التغذيّة الراجعة هذه باستخدام CSS إلّا أنّه يمكن تخصيص نصّ الرسائل باستخدام JavaScript. 

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">الاسم الشخصيّ</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="الاسم الشخصيّ" value="محمد" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">الاسم العائليّ</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="الاسم العائليّ" value="أحمد" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">اسم المستخدم</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="اسم المستخدم" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">المدينة</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="المدينة" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">الدولة</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="الدولة" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">الرمز البريديّ</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="الرمز البريديّ" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        أوافق على شروط الاستخدام
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">أرسل  الاستمارة</button>
</form>

التصديق على مستوى الخادم

ينصح مطوّرو Bootstrap باستخدام التصديق على مستوى العميل، لكن في حالة تطلّب مشروعك التصديق على مستوى الخادم (server side validation) فيمكن الإشارة إلى الاستمارات المُصدَّق بأحد الصنفيْن ‎.is-valid أو ‎.is-invalid لتصديقها أو عدمه. تجدُر الإشارة إلى أنّ الصنف ‎.invalid-feedback مدعوم كذلك. 

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">الاسم الأول</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="عمر" required>
      <div class="valid-feedback">
        حسنا
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">الاسم الأخير</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="صالح" required>
      <div class="valid-feedback">
        ممتاز
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">المدينة</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        فضلا أدخل اسم مدينة صالح
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">الولاية</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">... اختر</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        فضلا أدخل اسم ولاية صالح
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">الرمز البريدي</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        المرجو إدخال رمز بريد صالح
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        الموافقة على الشروط والأحكام
      </label>
      <div class="invalid-feedback">
        عليك الموافقة قبل الإرسال
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">إرسال</button>
</form>

العناصر المدعومة

تظهرفي الأمثلة أعلاه عناصر إدخال أصيلة (<input>)، إلّا أنّ تنسيقات التصديق على الاستمارات تتوفّر أيضًا لعناصر التحكّم التالية.

  • <input> و <textarea> ذات الصنف ‎.form-control
  • <select> ذات الصنف ‎.form-control أو  ‎.custom-select
  • ‎.form-checks
  • ‎.custom-checkboxs و ‎.custom-radios
  • ‎.custom-file
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">مربع نص</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      المرجو كتابة رسالة في مربع النص
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">أشر على مربع التأشير المخصص التالي</label>
    <div class="invalid-feedback">مثال على رسالة تغذية راجعة غير صحيحة</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">بدل زر الانتقاء التالي</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">أو بدل هذا الزر</label>
    <div class="invalid-feedback">مثال آخر على رسالة تغذية راجعة غير صحيحة</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">... اختر</option>
      <option value="1">واحد</option>
      <option value="2">اثنان</option>
      <option value="3">ثلاثة</option>
    </select>
    <div class="invalid-feedback">مثال على رسالة تغذية راجعة غير صحيحة</div> 
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">اختر 
... ملفا</label>
    <div class="invalid-feedback">مثال على رسالة تغذية راجعة غير صحيحة لاختيار الملف</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      رسالة على رسالة تغذية راجعة غير صحيحة لمجموعةإدخال
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">... اختر</option>
        <option value="1">الأول</option>
        <option value="2">الثاني</option>
        <option value="3">الثالث</option>
      </select>
    </div>
    <div class="invalid-feedback">
      رسالة على رسالة تغذية راجعة غير صحيحة لمجموعةإدخال
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">... اختر ملفا</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    رسالة على رسالة تغذية راجعة غير صحيحة لمجموعةإدخال
  </div>
</form>

التلميحات

يمكن - حسب ما يسمح به تخطيط الاستمارات - إحلال الصنفيْن ‎.{valid|invalid}-tooltip محلَّ الصنفيْن ‎.{valid|invalid}-feedback لعرض التغذيّة الراجعة المتعلّقة بالتصديق منُسَّقة بهيئة تلميحات (tooltips). تأكّد من وجود عنصُر أب بالخاصيّة position: relative لمحاذاة التلميحات. تُطبَّق هذه الخاصيّة مسبقًا على أصناف الأعمدة كما في المثال التالي، إلّا أن مشروعك قد يتطلّب إعدادًا مختلفًا. 

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">الاسم الشخصيّ</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="الاسم الشخصيّ" value="محمد" required>
      <div class="valid-tooltip">
        جيّد!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">الاسم العائليّ</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="الاسم العائليّ" value="أحمد" required>
      <div class="valid-tooltip">
        جيّد!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">اسم المستخدم</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="اسم المستخدم" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          رجاءً اختر اسم مستخدم صالحًا وفريدا.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">المدينة</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="المدينة" required>
      <div class="invalid-tooltip">
        رجاءً اكتب اسم مدينة مقبولا.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">الدولة</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="الدولة" required>
      <div class="invalid-tooltip">
         رجاءً اكتب اسم دولة مقبولا.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">الرمز البريديّ</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="الرمز البريديّ" required>
      <div class="invalid-tooltip">
        رجاءً اكتب رمزًا بريديّا مقبولا.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">أرسل الاستمارة</button>
</form>

التخصيص

يمكن تخصيص حالات التصديق عبر Sass باستخدام القاموس  ‎$form-validation-states الذي يقع في ملف‎_variables.scss، يمرّ Sass على عناصر هذا القاموس لتوليد حالات التحقق الافتراضية الصالحة / غير الصالحة valid/invalid. مع تضمين قاموس متداخل لتخصيص لون وأيقونة كل حالة. رغم أنّ المتصفحات لا تدعم الحالات الأخرى، يمكن للحالات التي تستخدم أنماطًا مخصصة أن تضيف رسائل تغذية راجعة أكثر تعقيدًا.

يرجى ملاحظة أننا لا نوصي بتخصيص هذه القيم دون تعديل المخلوط form-validation-state.

//  `_variables.scss` قاموس في الملف
// لتوليد حالات مختلفة Sass أعد تعريفه ثم أعد تصريف 
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// `_forms.scss` التمرير على 
// CSS أي تعديلات على القاموس ستنعكس في الإصدار المصرف من
// 
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

حلول لعلل تصديق مجموعات الإدخال

يتعذر علينا حل علة border-radius الخاصة بتصديق مجموعات الإدخال بسبب قيود المحدِّدات ، لذا يلزم إجراء تجاوزات يدوية. عند استخدام مجموعة إدخال قياسية وعدم تخصيص قيمة شعاع الإطار الافتراضية، أضف ‎.rounded-right إلى العناصر ذات شعاع الإطار المكسور.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    فضلا اختر اسم مستخدم
  </div>
</div>

عند استخدام مجموعة إدخال صغيرة أو كبيرة أو تخصيص قيم border-radius ، أضف أنماط CSS مخصّصة للعنصر ذو شعاع الإطار المكسور.

/* غير القيم لتطابق الشعاع في الاستمارة */

.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
   فضلا اختر اسم مستخدم
  </div>
</div>

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

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

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

يُغلَّف كل صندوق تأشير أو زرّ بعنصُر <div> مصحوب بعنصُر <span> على نفس المستوى (عنصُر أخ) لإنشاء عنصُر تحكّم مُخصَّص، ولافتة (<label>) تحوي النصّ المصاحب له. تشبه هذه الطريقة بنية الصنف المبدئيّ ‎.form-check.

يُستخدَم محدِّد العناصر الإخوة (~) للحصول على حالات عنصُر الإدخال (<input>) جميعها (مثل ‎:checked) بهدف تنسيق مؤشّر الاستمارة المُخصَّص بنمط مناسب. يمكن كذلك تنسيق النص المصاحب لكلّ عنصُر إدخال بناء على حالة العنصُر (<input>) عند إضافة الصنف ‎.custom-control-label إليه.

يُخفى عنصُر <input> المبدئيّ باستخدام الخاصيّة opacity ويُستخدَم الصنف ‎.custom-control-label لإنشاء مؤشّر استمارات مُخصَّص جديد مكان <input> باستخدام ‎::before و‎::after. للأسف لا يمكن إنشاء مؤشّر استمارات مُخصَّص انطلاقًا من العنصُر <input> لوحده نظرًا لكون خاصيّة content في CSS لا تعمل على العنصُر.

تُستخدَم أيقونات SVG مُرمَّزة على الأساس 64 Base64 من موقع Open Iconic في حالة التأشير على الصناديق؛ الأأمر الذي يتيح تحكّمًا مثاليًّا في التنسيق والمحاذاة على المتصفّحات والأجهزة المختلفة.

صناديق التأشير

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">أشّر على صندوق التأشير المُخصَّص هذا</label>
</div>

يمكن تطبيق الصنف الزائف ‎:indeterminate على صناديق التأشير المُخصَّصة عند استخدام شفرة JavaScript لتعيين حالة وسط بين التأشير وعدم التأشير (لا توجد خاصيّة HTML لتعيين هذه القيمة).

إنُ كنت تستخدم jQuery فيمكنك كتابة شفرة على النحو التالي: 

$('.your-checkbox').prop('indeterminate', true)

أزرار الانتقاء

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">انقر على زرّ الانتقاء المُخصَّص هذا</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">أو انقر على هذا الزرّ radio</label>
</div>

وضع العناصر على نفس السطر

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">انقر على زرّ الانتقاء المُخصَّص هذا</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">أو انقر على هذا الزرّ</label>
</div>

العناصر المُعطَّلة

يمكن كذلك تعطيل صناديق التأشير وأزرار الانتقاء المُخصَّصة. يُنسَّق المؤشّر المُخصَّص واللافتة تلقائيًّا عند إضافة الخاصيّة المنطقيّة disabled إلى عنصُر الإدخال (<input>). 

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">أشّر على صندوق التأشير المُخصّص هذا</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">انقر على زرّ الانتقاء المُخصّص هذا</label>
</div>

مفاتيح التبديل

مفاتيح التبديل لها نفس وسم مربعات الاختيار المخصصة، بيد أنّها تستخدم الصنف ‎.custom-switch، كما أنّها تدعم السمة disabled.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Tمفتاح تبديل</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">تعطيل مفتاح التبديل</label>
</div>

قوائم الاختيار

لا تحتاج قوائم الاختيّار (<select>) المُخصَّصة لتفعيل تنسيقاتها سوى لتطبيق الصنف المُخصَّص ‎.custom-select. الأنماط المخصصط مقصورة على الظهور الأول لعناصر <select> ولا يمكنها تعديل عناصر <option> نظرا لقيود المتصفح. 

<select class="custom-select">
  <option selected>افتح قائمة الاختيّار هذه</option>
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>

يمكن كذلك الاختيّار بين قوائم الاختيّار الصغيرة أو الكبيرة لمطابقة أحجام النصوص في حقول الإدخال. 

<select class="custom-select custom-select-lg mb-3">
  <option selected>افتح قائمة الاختيّار هذه</option>
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>افتح قائمة الاختيّار هذه</option>
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>

تدعم القوائم المُخصَّصة كذلك الخاصيّةَ multiple لتمكين اختيّار أكثر من قيمة في نفس الوقت. 

<select class="custom-select" multiple>
  <option selected>افتح قائمة الاختيّار هذه</option>
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>

كما تدعم الخاصيّة size. 

<select class="custom-select" size="3">
  <option selected>افتح قائمة الاختيّار هذه</option>
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>

المجالات

أنشئ عناصر تحكم <input type = "range"> مخصصة باستخدام ‎.custom-range. صُمِّم كل من المسار (الخلفية) والإبهام (القيمة) بحيث يظهران بنفس الشكل في كل المتصفحات. نظرًا لأنّ كل المتصفحات خلا IE و Firefox لا تدعم "ملء" المسارات من اليسار أو اليمين إلى الإبهام كوسيلة لتبيان موضع التقدم، فإننا لا ندعمه حاليًا.

<label for="customRange1">مثال على مجال</label>
<input type="range" class="custom-range" id="customRange1">

لمدخلات المجال قيم ضمنية للحد الأدنى والحد الأقصى (0 و 100 على التوالي). يمكنك تحديد قيم جديدة للسمتين min و max على النحو التالي:

<label for="customRange2">مثال على مجال</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

تتنقل مدخلات المجال بين القيم الصحيحة افتراضيا. يمكن تغيير هذا السلوك عبر تحديد قيمة step. سنضاعف في المثال أدناه عدد الخطوات باستخدام step = "0.5"‎:

<label for="customRange3">مثال على مجال</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

حقول تصفّح الملفّات

حقول الإدخال الخاصّة باختيّار الملفات هي الأكثر تعقيدًا في ما يتعلّق بالتخصيص، وتتطلّب شفرة JavaScript إضافيّة عند الحاجة لجعل نص الاختيّار (اختر ملفّا... أو Choose file…‎) واسم الملف المُختار يعمل عملًا صحيحًا. 

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">اختر ملفّا</label>
</div>

تنبيه: يوصى باستخدام الملحقة bs-custom-file-input لتحريك مدخلات الملفات المخصصة، وهذا ما سنستخدمه في التوثيق.

تخفي حقول تصفّح الملفّات المُخصَّصة عنصُر <input> المبدئي عن طريق الخاصيّة opacity، وتطبِّق التنسيقات بدلًا من ذلك على اللافتة (<label>). يُولَّد الزرّ ويُحدِّد موضعه باستخدام ‎::after. في الأخير تُعيَّن قيمتا الخاصيّتيْن width و height في العنصُر <input> للحصول على مساحات مناسبة حول المحتوى.

ترجمة سلاسل المحارف أو تخصيصها

يُستخدَم الصنف الزائف ‎:lang()‎ للسماح بترجمة نص التصفّح إلى لغات أخرى. عدّل محتوى المتغيّر ‎$custom-file-text في Sass أو أضف إليه قيمةً جديدة باستخدام وسم اللغة المناسب وتوطين (localization) السلاسل النصية. يمكن بنفس الطريقة تخصيص النصّ الإنكليزي المبدئيّ. في ما يلي على سبيل المثال كيفيّة إضافة النصّ العربيّ (رمز اللغة العربيّة هو ar): 

$custom-file-text: (
  en: "Browse",
  ar: "تصفّح"
);

في ما يلي مثال على استخدام الصنف الزائف lang(ar)‎ في حقل تصفّح ملفّات مُخصَّص يستخدم الترجمة العربيّة: 

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="ar">
  <label class="custom-file-label" for="customFileLang">اختر ملفا</label>
</div>

ستحتاج لتعيين لغة المستند (أو جزء منه) على نحو صحيح لكي يظهر النصّ الصحيح. تُستخدَم الخاصيّة lang بتطبيقها على عنصُر HTML لهذا الغرض، كما يمكن استخدام ترويسة Content-Language في بروتوكول HTTP أو طرائق أخرى.

ترجمة سلاسل المحارف أو تخصيصها عبر HTML

يوفر Bootstrap طريقة أخرى لترجمة الجملة "تصفح" في HTML عبر سمة  data-browse، والتي يمكن إضافتها إلى لاصقة الإدخال المخصصة (مثال باللغة العربية):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="تصفح">
      اختر ملفا
   </label>
</div>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Bootstrap/forms&oldid=29739"