تشکیل می دهد

بررسی اجمالی

کنترل‌های فرم Bootstrap در سبک‌های فرم Rebooted ما با کلاس‌ها گسترش می‌یابد. از این کلاس‌ها برای انتخاب نمایشگرهای سفارشی‌شده آن‌ها برای رندر سازگارتر در مرورگرها و دستگاه‌ها استفاده کنید.

مطمئن شوید که از یک typeویژگی مناسب در همه ورودی‌ها استفاده می‌کنید (مثلاً emailبرای آدرس ایمیل یا numberاطلاعات عددی) تا از کنترل‌های ورودی جدیدتر مانند تأیید ایمیل، انتخاب شماره و موارد دیگر استفاده کنید.

در اینجا یک مثال سریع برای نشان دادن سبک های فرم بوت استرپ آورده شده است. برای مستندات مربوط به کلاس های مورد نیاز، طرح بندی فرم و موارد دیگر به خواندن ادامه دهید.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

متن فرم

متن فرم در سطح بلوک یا درون خطی را می توان با استفاده از .form-text.

متن فرم زیر ورودی ها را می توان با استایل دهی کرد .form-text. اگر یک عنصر در سطح بلوک استفاده شود، یک حاشیه بالا برای فاصله آسان از ورودی های بالا اضافه می شود.

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

متن درون خطی می تواند از هر عنصر HTML درون خطی معمولی (خواه یک <span>, <small>یا چیز دیگری) با چیزی بیشتر از .form-textکلاس استفاده کند.

<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برای جلوگیری از تعامل کاربر و سبکتر نشان دادن آن، ویژگی بولین را روی ورودی اضافه کنید.

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

برای غیرفعال کردن تمام کنترل‌های داخل ، disabledویژگی را به a اضافه کنید. <fieldset>مرورگرها همه کنترل‌های فرم بومی ( <input>، <select>و <button>عناصر) داخل a <fieldset disabled>را غیرفعال می‌کنند و از تعاملات صفحه‌کلید و ماوس روی آن‌ها جلوگیری می‌کنند.

با این حال، اگر فرم شما شامل عناصر دکمه‌مانند سفارشی نیز باشد <a class="btn btn-*">...</a>، به این عناصر فقط یک سبک داده pointer-events: noneمی‌شود، به این معنی که همچنان قابل فوکوس هستند و با استفاده از صفحه‌کلید قابل اجرا هستند. در این حالت، باید این کنترل‌ها را با افزودن دستی تغییر دهید tabindex="-1"تا از دریافت فوکوس جلوگیری کنید و aria-disabled="disabled"وضعیت آن‌ها را به فناوری‌های کمکی نشان دهید.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

دسترسی

اطمینان حاصل کنید که همه کنترل‌های فرم دارای یک نام قابل دسترسی مناسب هستند تا بتوان هدف آنها را به کاربران فناوری‌های کمکی منتقل کرد. ساده‌ترین راه برای دستیابی به این هدف، استفاده از یک <label>عنصر یا - در مورد دکمه‌ها - گنجاندن متن توصیفی کافی به عنوان بخشی از <button>...</button>محتوا است.

For situations where it’s not possible to include a visible <label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:

• <label> elements hidden using the .visually-hidden class
• Pointing to an existing element that can act as a label using aria-labelledby
• Providing a title attribute
• Explicitly setting the accessible name on an element using aria-label

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on <input> and <textarea> elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Sass

Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $btn-input-* and $input-* variables.

Variables

$btn-input-* variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;