Tata letak
Wenehi formulir sampeyan sawetara struktur-saka inline nganti horisontal kanggo implementasi kothak khusus-karo opsi tata letak formulir.
Formulir
Saben klompok kolom formulir kudu manggon ing <form>
unsur. Bootstrap ora menehi gaya standar kanggo <form>
unsur kasebut, nanging ana sawetara fitur browser sing kuat sing diwenehake kanthi gawan.
- Anyar kanggo formulir browser? Coba deleng dokumen formulir MDN kanggo ringkesan lan dhaptar lengkap atribut sing kasedhiya.
<button>
s ing<form>
standar kanggotype="submit"
, supaya usaha dadi tartamtu lan tansah kalebu atype
.- Sampeyan bisa mateni saben unsur formulir ing formulir kanthi
disabled
atribut ing<form>
.
Wiwit Bootstrap ditrapake display: block
lan width: 100%
meh kabeh kontrol formulir, formulir bakal ditumpuk kanthi vertikal. Kelas tambahan bisa digunakake kanggo macem-macem tata letak iki ing basis saben wangun.
Utilitas
Utilitas margin minangka cara paling gampang kanggo nambah sawetara struktur menyang formulir. Dheweke nyedhiyakake klompok dhasar label, kontrol, teks formulir opsional, lan olahpesen validasi formulir. Disaranake tetep kanggo margin-bottom
keperluan, lan nggunakake arah siji ing saindhenging wangun kanggo konsistensi.
Bebas bae kanggo mbangun formulir nanging sampeyan seneng, karo <fieldset>
s, <div>
s, utawa meh wae unsur liyane.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
Bentuk kothak
Wangun sing luwih rumit bisa dibangun kanthi nggunakake kelas kothak. Gunakake iki kanggo tata letak formulir sing mbutuhake pirang-pirang kolom, jembar sing beda-beda, lan opsi keselarasan tambahan. Mbutuhake $enable-grid-classes
variabel Sass supaya bisa diaktifake (kanthi standar).
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
talang
Kanthi nambahake kelas modifier talang , sampeyan bisa ngontrol ambane talang lan uga arah pamblokiran. Uga mbutuhake $enable-grid-classes
variabel Sass kanggo diaktifake (kanthi standar).
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Tata letak sing luwih rumit uga bisa digawe nganggo sistem kothak.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
Bentuk horisontal
Nggawe formulir horisontal kanthi kothak kanthi nambahake .row
kelas kanggo mbentuk grup lan nggunakake .col-*-*
kelas kanggo nemtokake jembar label lan kontrol sampeyan. Pesthekake kanggo nambah .col-form-label
menyang <label>
s uga supaya lagi vertikal tengah karo kontrol wangun gadhah sing.
Kadhangkala, sampeyan bisa uga kudu nggunakake utilitas margin utawa padding kanggo nggawe keselarasan sampurna sing sampeyan butuhake. Contone, kita wis mbusak padding-top
label input radio sing ditumpuk kanggo luwih nyelarasake garis dasar teks.
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Ukuran label formulir horisontal
Dadi manawa kanggo nggunakake .col-form-label-sm
utawa .col-form-label-lg
kanggo <label>
s utawa <legend>
s kanggo bener tindakake ukuran .form-control-lg
lan .form-control-sm
.
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="row mb-3">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
Ukuran kolom
Kaya sing dituduhake ing conto sadurunge, sistem kothak ngidini sampeyan nyelehake nomer .col
s ing a .row
. Padha bakal pamisah jembaré kasedhiya merata antarane wong-wong mau. Sampeyan uga bisa milih subset saka kolom kanggo njupuk luwih utawa kurang spasi, dene .col
s isih padha pamisah liyane, karo kelas kolom tartamtu kaya .col-sm-7
.
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
Ukuran otomatis
Conto ing ngisor iki nggunakake utilitas flexbox kanggo vertikal tengah isi lan owah-owahan .col
supaya .col-auto
kolom sampeyan mung njupuk akeh spasi yen perlu. Kanthi cara liya, ukuran kolom kasebut dhewe adhedhasar isi.
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Sampeyan banjur bisa nyampur maneh karo kelas kolom khusus ukuran.
<form class="row gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Formulir inline
Gunakake .row-cols-*
kelas kanggo nggawe tata letak horisontal responsif. Kanthi nambahake kelas modifier talang , kita bakal duwe talang ing arah horisontal lan vertikal. Ing viewports seluler sing sempit, .col-12
mbantu tumpukan kontrol formulir lan liya-liyane. Ing aligns unsur .align-items-center
wangun kanggo tengah, nggawe .form-checkbox
kempal bener.
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>