Formlar

genel bakış

Bootstrap'in form kontrolleri , sınıflarla Yeniden Başlatılan form stillerimizi genişletir. Tarayıcılar ve cihazlar arasında daha tutarlı bir işleme için özelleştirilmiş ekranlarını seçmek için bu sınıfları kullanın.

E -posta doğrulama, numara seçimi ve daha fazlası gibi daha yeni giriş kontrollerinden yararlanmak için tüm girişlerde (örneğin, e-posta adresi veya sayısal bilgiler için) uygun bir typeöznitelik kullandığınızdan emin olun .emailnumber

Bootstrap'in form stillerini göstermek için hızlı bir örnek. Gerekli sınıflar, form düzeni ve daha fazlasıyla ilgili belgeler için okumaya devam edin.

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

Blok düzeyinde veya satır içi düzeyde form metni kullanılarak oluşturulabilir .form-text.

Girişlerin altındaki form metni ile biçimlendirilebilir .form-text. Blok düzeyinde bir eleman kullanılacaksa, yukarıdaki girişlerden kolay boşluk bırakmak için bir üst kenar boşluğu eklenir.

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

Satır içi metin, sınıftan başka bir şey olmadan herhangi bir tipik satır içi HTML öğesini (a <span>, <small>veya başka bir şey olabilir) kullanabilir .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>

Engelli formları

disabledKullanıcı etkileşimlerini önlemek ve daha açık görünmesini sağlamak için bir girdiye boolean niteliğini ekleyin .

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

İçindeki tüm kontrolleri devre dışı bırakmak için disabledözniteliği a öğesine ekleyin . <fieldset>Tarayıcılar, a içindeki tüm yerel form denetimlerini ( <input>, <select>, ve <button>öğelerini) <fieldset disabled>devre dışı olarak kabul ederek üzerlerinde hem klavye hem de fare etkileşimlerini engeller.

Bununla birlikte, formunuz gibi özel düğme benzeri öğeler de içeriyorsa <a class="btn btn-*">...</a>, bunlara yalnızca bir stil verilir pointer-events: none, yani bunlar hala odaklanabilir ve klavye kullanılarak çalıştırılabilir. tabindex="-1"Bu durumda, odak almalarını önlemek ve aria-disabled="disabled"durumlarını yardımcı teknolojilere bildirmek için ekleyerek bu kontrolleri manuel olarak değiştirmeniz gerekir .

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

Ulaşılabilirlik

Amaçlarının yardımcı teknolojilerin kullanıcılarına iletilebilmesi için tüm form kontrollerinin uygun bir erişilebilir ada sahip olduğundan emin olun. Bunu başarmanın en basit yolu, bir <label>öğe kullanmak veya - düğmeler durumunda - içeriğin bir parçası olarak yeterince açıklayıcı metin eklemektir <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;