Borang

Gambaran keseluruhan

Kawalan borang Bootstrap berkembang pada gaya borang Dibut semula kami dengan kelas. Gunakan kelas ini untuk ikut serta dalam paparan tersuai mereka untuk pemaparan yang lebih konsisten merentas penyemak imbas dan peranti.

Pastikan anda menggunakan typeatribut yang sesuai pada semua input (cth, emailuntuk alamat e-mel atau numberuntuk maklumat berangka) untuk memanfaatkan kawalan input yang lebih baharu seperti pengesahan e-mel, pemilihan nombor dan banyak lagi.

Berikut ialah contoh pantas untuk menunjukkan gaya borang Bootstrap. Teruskan membaca untuk mendapatkan dokumentasi tentang kelas yang diperlukan, susun atur borang 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>

Teks bentuk

Teks borang peringkat blok atau peringkat sebaris boleh dibuat menggunakan .form-text.

Teks bentuk di bawah input boleh digayakan dengan .form-text. Jika elemen peringkat blok akan digunakan, margin atas ditambah untuk jarak yang mudah daripada 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 boleh menggunakan mana-mana elemen HTML sebaris biasa (sama ada <span>, <small>, atau sesuatu yang lain) dengan tidak lebih daripada .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>

Borang dilumpuhkan

Tambahkan disabledatribut boolean pada input untuk menghalang interaksi pengguna dan menjadikannya kelihatan lebih ringan.

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

Tambahkan disabledatribut pada a <fieldset>untuk melumpuhkan semua kawalan di dalamnya. Penyemak imbas menganggap semua kawalan bentuk asli ( <input>, <select>, dan <button>elemen) di dalam a <fieldset disabled>sebagai dilumpuhkan, menghalang interaksi papan kekunci dan tetikus padanya.

Walau bagaimanapun, jika borang anda turut menyertakan elemen seperti butang tersuai seperti <a class="btn btn-*">...</a>, ini hanya akan diberikan gaya pointer-events: none, bermakna ia masih boleh difokuskan dan boleh dikendalikan menggunakan papan kekunci. Dalam kes ini, anda mesti mengubah suai kawalan ini secara manual dengan menambah tabindex="-1"untuk menghalangnya daripada menerima fokus dan memberi aria-disabled="disabled"isyarat kepada keadaan mereka kepada teknologi bantuan.

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

Kebolehcapaian

Pastikan semua kawalan borang mempunyai nama yang boleh diakses yang sesuai supaya tujuannya dapat disampaikan kepada pengguna teknologi bantuan. Cara paling mudah untuk mencapai ini ialah menggunakan <label>elemen, atau—dalam kes butang—untuk memasukkan teks deskriptif yang mencukupi sebagai sebahagian daripada <button>...</button>kandungan.

Untuk situasi yang tidak mungkin untuk memasukkan <label>kandungan teks yang boleh dilihat atau sesuai, terdapat cara alternatif untuk tetap memberikan nama yang boleh diakses, seperti:

• <label>elemen tersembunyi menggunakan .visually-hiddenkelas
• Menunjuk kepada elemen sedia ada yang boleh bertindak sebagai label menggunakanaria-labelledby
• Menyediakan titleatribut
• Menetapkan nama yang boleh diakses secara eksplisit pada elemen menggunakanaria-label

Jika tiada satu pun daripada ini hadir, teknologi bantuan boleh menggunakan placeholderatribut sebagai sandaran untuk nama <input>dan <textarea>elemen yang boleh diakses. Contoh dalam bahagian ini menyediakan beberapa cadangan, pendekatan khusus kes.

Semasa menggunakan kandungan tersembunyi secara visual ( .visually-hidden, aria-label, dan juga placeholderkandungan, yang hilang apabila medan borang mempunyai kandungan) akan memberi manfaat kepada pengguna teknologi bantuan, kekurangan teks label yang boleh dilihat mungkin masih menjadi masalah bagi pengguna tertentu. Sesetengah bentuk label boleh dilihat secara amnya merupakan pendekatan terbaik, baik untuk kebolehaksesan dan kebolehgunaan.

Sass

Banyak pembolehubah bentuk ditetapkan pada tahap umum untuk digunakan semula dan dilanjutkan oleh komponen bentuk individu. Anda akan melihat ini paling kerap sebagai $btn-input-*dan $input-*pembolehubah.

Pembolehubah

$btn-input-*pembolehubah dikongsi pembolehubah global antara butang kami dan komponen borang kami. Anda akan mendapati ini sering ditugaskan semula sebagai nilai kepada pembolehubah khusus komponen lain.

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