Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

عناصر التحكم (Form control)

قم بترقية عناصر التحكم في النماذج النصية مثل <input>s و <textarea>s باستخدام أنماط مخصصة، وتحجيم، وحالات تركيز، والمزيد.

في هذه الصفحة

يتم تنسيق عناصر التحكم في النماذج باستخدام مزيج من متغيرات الـ Sass والـ CSS، مما يسمح لها بالتكيف مع أنماط الألوان ودعم أي طريقة تخصيص.

html 
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

التحجيم

قم بتعيين الارتفاعات باستخدام فئات مثل .form-control-lg و .form-control-sm.

html 
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

نص النموذج (Form text)

يمكن إنشاء نص نموذج على مستوى الكتلة (Block-level) أو على مستوى السطر (Inline-level) باستخدام .form-text.

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

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

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

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

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

تعطيل (Disabled)

أضف السمة المنطقية disabled على المدخل لإعطائه مظهراً رمادياً، وإزالة أحداث المؤشر، ومنع التركيز.

html 
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

للقراءة فقط (Readonly)

أضف السمة المنطقية readonly على المدخل لمنع تعديل قيمة المدخل. لا تزال المدخلات التي تكون readonly قابلة للتركيز والاختيار، بينما المدخلات التي تكون disabled لا يمكن ذلك.

html 
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

نص عادي للقراءة فقط (Readonly plain text)

إذا كنت تريد أن تظهر عناصر <input readonly> في نموذجك منسقة كنص عادي، فاستبدل .form-control بـ .form-control-plaintext لإزالة تنسيق حقل النموذج الافتراضي والحفاظ على margin و padding الصحيحين.

html 
<div class="mb-3 row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
  </div>
</div>
<div class="mb-3 row">
  <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword">
  </div>
</div>
html 
<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

إدخال الملفات (File input)

html 
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

اللون

قم بتعيين type="color" وأضف .form-control-color إلى <input>. نحن نستخدم الفئة المعدلة لتعيين ارتفاعات height ثابتة وتجاوز بعض التناقضات بين المتصفحات.

html 
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

قوائم البيانات (Datalists)

تسمح لك قوائم البيانات بإنشاء مجموعة من <option>s التي يمكن الوصول إليها (وإكمالها تلقائياً) من داخل <input>. هذه القوائم مشابهة لعناصر <select>، ولكنها تأتي مع المزيد من القيود والاختلافات في تنسيق القائمة. بينما تتضمن معظم المتصفحات وأنظمة التشغيل بعض الدعم لعناصر <datalist>، فإن تنسيقها غير متسق في أفضل الأحوال.

تعرف على المزيد حول دعم عناصر datalist.

html 
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

الـ (CSS)

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

تتم مشاركة $input-* عبر معظم عناصر التحكم في النماذج لدينا (وليس الأزرار).

scss/_variables.scss 
$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              var(--#{$prefix}body-bg);
$input-disabled-color:                  null;
$input-disabled-bg:                     var(--#{$prefix}secondary-bg);
$input-disabled-border-color:           null;

$input-color:                           var(--#{$prefix}body-color);
$input-border-color:                    var(--#{$prefix}border-color);
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      var(--#{$prefix}box-shadow-inset);

$input-border-radius:                   var(--#{$prefix}border-radius);
$input-border-radius-sm:                var(--#{$prefix}border-radius-sm);
$input-border-radius-lg:                var(--#{$prefix}border-radius-lg);

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               var(--#{$prefix}secondary-color);
$input-plaintext-color:                 var(--#{$prefix}body-color);

$input-height-border:                   calc(#{$input-border-width} * 2); // stylelint-disable-line function-disallowed-list

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-color-width:                      3rem;

تُستخدم $form-label-* و $form-text-* لعناصر <label>s ومكون .form-text.

scss/_variables.scss 
$form-label-margin-bottom:              .5rem;
$form-label-font-size:                  null;
$form-label-font-style:                 null;
$form-label-font-weight:                null;
$form-label-color:                      null;
scss/_variables.scss 
$form-text-margin-top:                  .25rem;
$form-text-font-size:                   $small-font-size;
$form-text-font-style:                  null;
$form-text-font-weight:                 null;
$form-text-color:                       var(--#{$prefix}secondary-color);

تُستخدم $form-file-* لإدخال الملفات.

scss/_variables.scss 
$form-file-button-color:          $input-color;
$form-file-button-bg:             var(--#{$prefix}tertiary-bg);
$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg);