تشکیل می دهد

بررسی اجمالی

کنترل‌های فرم 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>محتوا است.

برای موقعیت‌هایی که گنجاندن محتوای متنی قابل مشاهده یا مناسب امکان‌پذیر نیست <label>، راه‌های جایگزینی برای ارائه یک نام قابل دسترس وجود دارد، مانند:

• <label>عناصر پنهان با استفاده از .visually-hiddenکلاس
• اشاره به یک عنصر موجود که می تواند به عنوان یک برچسب با استفاده ازaria-labelledby
• ارائه یک titleویژگی
• تنظیم صریح نام قابل دسترسی روی یک عنصر با استفاده ازaria-label

اگر هیچ یک از اینها وجود نداشته باشد، فناوری های کمکی ممکن است به استفاده از placeholderویژگی به عنوان جایگزینی برای نام <input>و <textarea>عناصر قابل دسترسی روی آورند. مثال‌های موجود در این بخش، چند رویکرد پیشنهادی و خاص را ارائه می‌کنند.

در حالی که استفاده از محتوای پنهان بصری ( .visually-hidden، aria-labelو حتی placeholderمحتوا، که به محض اینکه یک فیلد فرم دارای محتوا باشد ناپدید می شود) برای کاربران فناوری کمکی مفید خواهد بود، فقدان متن برچسب قابل مشاهده ممکن است همچنان برای کاربران خاصی مشکل ساز باشد. برخی از شکل‌های برچسب قابل مشاهده عموماً بهترین رویکرد است، هم برای دسترسی و هم برای استفاده.

ساس

بسیاری از متغیرهای فرم در یک سطح کلی تنظیم شده اند تا توسط اجزای فرم جداگانه مورد استفاده مجدد قرار گیرند و گسترش یابند. شما اغلب این متغیرها را به عنوان $btn-input-*و $input-*متغیرها مشاهده خواهید کرد.

متغیرها

$btn-input-*متغیرها متغیرهای جهانی مشترک بین دکمه های ما و اجزای فرم ما هستند. اینها را خواهید دید که اغلب به عنوان مقادیر به سایر متغیرهای خاص جزء تخصیص داده می شوند.

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