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.

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;