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.

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

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.

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

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

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

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.

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 $input-btn-*lan $input-*variabel.

Variabel

$input-btn-*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;