Formulir

Ringkasan

Kontrol formulir Bootstrap memperluas gaya formulir Reboot kami dengan kelas. Gunakan kelas ini untuk memilih tampilan yang disesuaikan untuk rendering yang lebih konsisten di seluruh browser dan perangkat.

Pastikan untuk menggunakan typeatribut yang sesuai pada semua input (misalnya, emailuntuk alamat email atau numberuntuk informasi numerik) untuk memanfaatkan kontrol input yang lebih baru seperti verifikasi email, pemilihan nomor, dan banyak lagi.

Berikut adalah contoh cepat untuk mendemonstrasikan gaya formulir Bootstrap. Teruslah membaca untuk dokumentasi tentang kelas yang diperlukan, tata letak formulir, dan banyak lagi.

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

bentuk teks

Teks formulir tingkat blok atau tingkat sebaris dapat dibuat menggunakan .form-text.

Teks formulir di bawah input dapat ditata dengan .form-text. Jika elemen level blok akan digunakan, margin atas ditambahkan untuk memudahkan jarak dari input di atas.

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

Teks sebaris dapat menggunakan elemen HTML sebaris apa pun (baik itu a <span>, <small>, atau yang lainnya) dengan tidak lebih dari .form-textkelas.

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

Formulir yang dinonaktifkan

Tambahkan disabledatribut boolean pada input untuk mencegah interaksi pengguna dan membuatnya tampak lebih ringan.

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

Tambahkan disabledatribut ke a <fieldset>untuk menonaktifkan semua kontrol di dalamnya. Browser memperlakukan semua kontrol bentuk asli ( <input>, <select>, dan <button>elemen) di dalam a <fieldset disabled>sebagai dinonaktifkan, mencegah interaksi keyboard dan mouse pada mereka.

Namun, jika formulir Anda juga menyertakan elemen seperti tombol khusus seperti <a class="btn btn-*">...</a>, ini hanya akan diberi gaya pointer-events: none, yang berarti mereka masih dapat difokuskan dan dioperasikan menggunakan keyboard. Dalam hal ini, Anda harus memodifikasi kontrol ini secara manual dengan menambahkan tabindex="-1"untuk mencegahnya menerima fokus dan aria-disabled="disabled"memberi sinyal statusnya ke teknologi bantu.

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

Aksesibilitas

Pastikan bahwa semua kontrol formulir memiliki nama yang dapat diakses yang sesuai sehingga tujuannya dapat disampaikan kepada pengguna teknologi bantu. Cara paling sederhana untuk mencapai ini adalah dengan menggunakan <label>elemen, atau—dalam kasus tombol—untuk menyertakan teks deskriptif yang cukup sebagai bagian dari <button>...</button>konten.

Untuk situasi di mana tidak mungkin menyertakan <label>konten teks yang terlihat atau sesuai, ada cara alternatif untuk tetap memberikan nama yang dapat diakses, seperti:

• <label>elemen disembunyikan menggunakan .visually-hiddenkelas
• Menunjuk ke elemen yang ada yang dapat bertindak sebagai label menggunakanaria-labelledby
• Menyediakan titleatribut
• Secara eksplisit mengatur nama yang dapat diakses pada elemen menggunakanaria-label

Jika tidak ada yang hadir, teknologi bantu dapat menggunakan placeholderatribut sebagai cadangan untuk nama <input>dan <textarea>elemen yang dapat diakses. Contoh-contoh di bagian ini memberikan beberapa pendekatan khusus kasus yang disarankan.

Meskipun menggunakan konten yang tersembunyi secara visual ( .visually-hidden, aria-label, dan bahkan placeholderkonten, yang menghilang setelah bidang formulir memiliki konten) akan menguntungkan pengguna teknologi pendukung, kurangnya teks label yang terlihat mungkin masih menjadi masalah bagi pengguna tertentu. Beberapa bentuk label yang terlihat umumnya merupakan pendekatan terbaik, baik untuk aksesibilitas maupun kegunaan.

Kelancangan

Banyak variabel bentuk ditetapkan pada tingkat umum untuk digunakan kembali dan diperluas oleh komponen bentuk individu. Anda akan melihat ini paling sering sebagai $btn-input-*dan $input-*variabel.

Variabel

$btn-input-*variabel adalah variabel global bersama antara tombol dan komponen formulir kami. Anda akan menemukan ini sering ditugaskan kembali sebagai nilai untuk variabel khusus komponen lainnya.

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