Lumpat menyang isi utama Lumpat menyang pandhu arah docs
in English

Formulir

Conto lan pedoman panggunaan kanggo gaya kontrol formulir, opsi tata letak, lan komponen khusus kanggo nggawe macem-macem formulir.

Ringkesan

Kontrol formulir Bootstrap nggedhekake gaya formulir Reboot karo kelas. Gunakake kelas kasebut kanggo milih tampilan sing disesuaikan kanggo rendering sing luwih konsisten ing browser lan piranti.

Pesthekake nggunakake typeatribut sing cocog ing kabeh input (contone, emailkanggo alamat email utawa numberinformasi numerik) kanggo njupuk kauntungan saka kontrol input sing luwih anyar kayata verifikasi email, pilihan nomer, lan liya-liyane.

Punika conto cepet kanggo nduduhake gaya formulir Bootstrap. Terus maca kanggo dokumentasi babagan kelas sing dibutuhake, tata letak formulir, lan liya-liyane.

Kita ora bakal nuduhake email sampeyan karo wong liya.
<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>

Formulir teks

Teks formulir tingkat blok utawa inline bisa digawe nggunakake .form-text.

Nggayutake teks formulir karo kontrol formulir

Teks formulir kudu digandhengake kanthi jelas karo kontrol formulir sing ana hubungane karo aria-describedbyatribut kasebut. Iki bakal mesthekake yen teknologi asisten-kayata pembaca layar-bakal ngumumake teks formulir iki nalika pangguna fokus utawa mlebu kontrol.

Formulir teks ing ngisor input bisa ditata nganggo .form-text. Yen unsur tingkat pamblokiran bakal digunakake, wates ndhuwur ditambahake kanggo gampang spasi saka input ing ndhuwur.

Tembung sandhi sampeyan kudu dawane 8-20 karakter, ngemot huruf lan angka, lan ora ngemot spasi, karakter khusus, utawa emoji.
<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 inline bisa nggunakake unsur HTML inline sing khas (kaya <span>, <small>, utawa liya-liyane) kanthi ora luwih saka .form-textkelas.

Dawane kudu 8-20 karakter.
<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 sing dipatèni

Tambah disabledatribut boolean ing input kanggo nyegah interaksi pangguna lan nggawe katon luwih entheng.

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

Tambah disabledatribut menyang a <fieldset>mateni kabeh kontrol ing. Browser nganggep kabeh kontrol wangun asli ( <input>, <select>, lan <button>unsur) ing njero <fieldset disabled>minangka dipatèni, nyegah interaksi keyboard lan mouse.

Nanging, yen formulir sampeyan uga kalebu unsur kaya tombol khusus kayata <a class="btn btn-*">...</a>, iki mung bakal diwenehi gaya pointer-events: none, tegese isih bisa fokus lan bisa digunakake nggunakake keyboard. Ing kasus iki, sampeyan kudu ngowahi kontrol kasebut kanthi manual kanthi nambahake tabindex="-1"kanggo nyegah supaya ora fokus lan aria-disabled="disabled"menehi tandha marang teknologi bantuan.

Conto fieldset dipatèni
<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

Priksa manawa kabeh kontrol formulir duwe jeneng sing bisa diakses sing cocog supaya tujuane bisa dikirim menyang pangguna teknologi pitulung. Cara paling gampang kanggo nggayuh iki yaiku nggunakake <label>unsur, utawa-ing kasus tombol-kanggo nyakup teks deskriptif sing cukup minangka bagean saka <button>...</button>konten.

Kanggo kahanan sing ora bisa ngemot <label>konten teks sing katon utawa cocog, ana cara alternatif kanggo menehi jeneng sing bisa diakses, kayata:

  • <label>unsur didhelikake nggunakake .visually-hiddenkelas
  • Pointing menyang unsur ana sing bisa tumindak minangka label nggunakakearia-labelledby
  • Nyedhiyani titleatribut
  • Nyetel jeneng sing bisa diakses kanthi jelas ing unsur nggunakakearia-label

Yen ora ana, teknologi pitulung bisa nggunakake placeholderatribut kasebut minangka mundur kanggo jeneng <input>lan <textarea>unsur sing bisa diakses. Conto ing bagean iki nyedhiyakake sawetara pendekatan khusus sing disaranake.

Nalika nggunakake konten sing didhelikake kanthi visual ( .visually-hidden, aria-label, lan malah placeholderkonten, sing ilang yen kolom formulir nduweni isi) bakal entuk manfaat kanggo pangguna teknologi bantuan, kekurangan teks label sing katon bisa uga dadi masalah kanggo pangguna tartamtu. Sawetara wujud label sing katon umume minangka pendekatan sing paling apik, kanggo aksesibilitas lan migunani.

Sass

Akeh variabel wangun disetel ing tingkat umum kanggo digunakake maneh lan ditambahi dening komponen wangun individu. Sampeyan bakal paling kerep ndeleng iki minangka $btn-input-*lan $input-*variabel.

Variabel

$btn-input-*variabel sing dienggo bareng variabel global antarane tombol kita lan komponen wangun kita. Sampeyan bakal nemokake iki asring ditugasake maneh minangka nilai kanggo variabel khusus komponen liyane.

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