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

من موسوعة حسوب
< Bootstrap
مراجعة 13:16، 7 مايو 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
اذهب إلى التنقل اذهب إلى البحث

أمثلة على مكوِّن الاستمارات 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-check، وهو صنف واحد لكلا نوعيْ حقول الإدخال، يحسّن مُخطَّط وسلوك عناصر HTML المسؤولة عنهما. تُعدّ صناديق التأشير (checkboxs) لتحديد خيّار واحد أو خيّارات عدّة ضمن لائحة، بينما تُستخدَم أزرار الانتقاء (radio button) لتحديد خيّار واحد من خيّارات متعدّدة.

يدعم مكوِّن الاستمارات في Bootstrap تعطيل صناديق التأشير وأزرار الانتقاء، لكن تجب إضافة الخاصيّة disabled إلى الصنف ‎.form-check-input للحصول على التأثير not-allowed (غير مسموح به) بالنسبة للمؤشّر حالَ حومانه (hover) على اللافتة (<label>) الأب. تطبّق خاصيّة التعطيل لونًا أكثر إضاءة للمساعدة في الإشارة إلى حالة حقل الإدخال.

تُستخدَم صناديق التأشير وأزرار الانتقاء في إطار العمل 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" placeholder="البريد الإلكترونيّ">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">كلمة السرّ</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="كلمة السرّ">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">العنوان</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 الشارع الرئيسي">
  </div>
  <div class="form-group">
    <label for="inputAddress2">بقيّة العنوان</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="الشقة أو الطابق ">
  </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>اختر ...</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" placeholder="البريد الإلكترونيّ">
    </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" placeholder="كلمة السرّ">
    </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">صندوق تأشير</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="عبد الرحمن">
    </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 بشدّة باستخدام الأنماط المُخصَّصة للتصديق إذ أنّ قارئات الشاشة لا تحصُل على التغذيّة الراجعة المبدئيّة من المتصفّحات.

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

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

  • تُطبَّق آليّة التصديق في HTML عبر صنفيْ CSS مزيَّفيْن : ‎:invalid و ‎:valid. تُطبَّق هذه الآليّة على العناصر <input> و <select> و <textarea>.
  • يحدّد Bootstrap مجال تطبيق تنسيقات الصنفيْن المزيَّفيْن ‎:invalid و‎:valid بصنف ‎.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 على عناصر التحكّم في الاستمارة عند محاولة إرسالها بدون إدخال قيم. 

<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-4 mb-3">
      <label for="validationServer01">الاسم الشخصيّ</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="الاسم الشخصيّ" value="محمد" required>
      <div class="valid-feedback">
        جيّد!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">الاسم العائليّ</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="الاسم العائليّ" value="أحمد" required>
      <div class="valid-feedback">
        جيّد!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">اسم المستخدم</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="اسم المستخدم" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          رجاءً اختر اسم مستخدم صالحا.
        </div>
      </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" placeholder="المدينة" required>
      <div class="invalid-feedback">
        رجاءً اختر مدينة مقبولة.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">الدولة</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="الدولة" required>
      <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" placeholder="الرمز البريديّ" 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>)، إلّا أنّ تنسيقات التصديق على الاستمارات تتوفّر أيضًا لعناصر التحكّم المُخصَّصة في الاستمارات. 

<form class="was-validated">
  <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="form-group">
    <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">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">اختر ملفّا...</label>
    <div class="invalid-feedback">مثال لتغذيّة راجعة مُخصّصة لملفّ غير مقبول</div>
  </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>

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

يتيح إطار العمل 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>

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

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

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

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

حقول الإدخال الخاصّة باختيّار الملفات هي الأكثر تعقيدًا في ما يتعلّق بالتخصيص، وتتطلّب شفرة 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>

تخفي حقول تصفّح الملفّات المُخصَّصة عنصُر <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 أو طرائق أخرى.

مصادر

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