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

Görünür veya uygun bir metin içeriği eklemenin mümkün olmadığı durumlarda <label>, yine de erişilebilir bir ad sağlamanın alternatif yolları vardır, örneğin:

• <label>.visually-hiddensınıf kullanılarak gizlenen öğeler
• Kullanarak etiket görevi görebilecek mevcut bir öğeye işaret etmearia-labelledby
• titleBir özellik sağlama
• Kullanarak bir öğede erişilebilir adı açıkça ayarlamaaria-label

Bunların hiçbiri yoksa, yardımcı teknolojiler, özniteliği erişilebilir ad ve öğeler placeholderiçin yedek olarak kullanmaya başvurabilir. Bu bölümdeki örnekler, önerilen birkaç vakaya özel yaklaşım sağlar.<input><textarea>

Görsel olarak gizli içerik ( .visually-hidden, aria-label, ve hatta placeholderbir form alanına içerik eklendiğinde kaybolan içerik) kullanılması yardımcı teknoloji kullanıcılarına fayda sağlarken, görünür etiket metninin olmaması bazı kullanıcılar için yine de sorunlu olabilir. Hem erişilebilirlik hem de kullanılabilirlik açısından bir tür görünür etiket genellikle en iyi yaklaşımdır.

küstah

Birçok form değişkeni, bireysel form bileşenleri tarafından yeniden kullanılmak ve genişletilmek üzere genel bir düzeyde ayarlanır. $input-btn-*Bunları en sık ve $input-*değişkenler olarak göreceksiniz .

Değişkenler

$input-btn-*değişkenler, butonlarımız ve form bileşenlerimiz arasında paylaşılan global değişkenlerdir . Bunları sıklıkla diğer bileşene özgü değişkenlere değerler olarak yeniden atandığını göreceksiniz.

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