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 type
atribut sing cocog ing kabeh input (contone, email
kanggo alamat email utawa number
informasi 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
.
Nggayutake teks formulir karo kontrol formulir
Teks formulir kudu digandhengake kanthi jelas karo kontrol formulir sing ana hubungane karo aria-describedby
atribut 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.
<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-text
kelas.
<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 disabled
atribut 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 disabled
atribut 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-hidden
kelas- Pointing menyang unsur ana sing bisa tumindak minangka label nggunakake
aria-labelledby
- Nyedhiyani
title
atribut - Nyetel jeneng sing bisa diakses kanthi jelas ing unsur nggunakake
aria-label
Yen ora ana, teknologi pitulung bisa nggunakake placeholder
atribut 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 placeholder
konten, 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;