Forms
Nimûne û rêwerzên karanîna ji bo şêwazên kontrolkirina form, vebijarkên sêwiranê, û hêmanên xwerû yên ji bo afirandina cûrbecûr forman.
Têgihiştinî
Kontrolên forma Bootstrap li ser şêwazên forma me yên Rebooted bi dersan berfireh dibin. Van dersan bikar bînin da ku hûn dîmenên xweyên xwerû hilbijêrin da ku li seranserê gerok û cîhazan danûstendinek domdartir bikin.
Bawer bikin ku hûn li ser hemî têketinan taybetmendiyek guncan bikar bînin type
(mînak, email
ji bo navnîşana e-nameyê an number
ji bo agahdariya jimareyî) da ku ji kontrolên têketina nûtir ên mîna verastkirina e-nameyê, bijartina hejmarê, û hêj bêtir sûd werbigirin.
Li vir mînakek bilez heye ku şêwazên forma Bootstrap nîşan bide. Ji bo belgeyên li ser dersên pêwîst, sêwirana formê, û hêj bêtir bixwînin.
<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>
Nivîsarek çêbikin
Metna formê ya asta blokê an jî di asta hundurîn de dikare bi karanîna .form-text
.
Têkiliya nivîsa formê bi kontrolên formê re
Divê nivîsa formê bi eşkere bi kontrola forma ku ew bi karanîna aria-describedby
taybetmendiyê ve girêdayî ye ve girêdayî be. Ev ê piştrast bike ku teknolojiyên arîkar - wek xwendevanên ekranê - dema ku bikarhêner balê dikişîne an têkeve kontrolê dê vê nivîsa formê ragihîne.
Metna formê ya li jêr têketinan dikare bi şêwazê were çêkirin .form-text
. Ger hêmanek di asta blokê de were bikar anîn, ji bo veqetandina hêsan a ji têketinên jorîn marjîneyek jorîn tê zêdekirin.
<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>
Nivîsa xêzkirî dikare her hêmanek HTML-ê ya xêzkirî ya tîpîk bikar bîne (çi be <span>
, <small>
, an tiştek din be) ji .form-text
çîna wêdetir tiştek tune.
<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>
Formên astengdar
disabled
Taybetmendiya boolean li ser têketinê zêde bikin da ku pêşî li danûstendinên bikarhêner bigire û wê siviktir xuya bike .
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
disabled
Taybetmendiyê li a zêde bikin <fieldset>
da ku hemî kontrolên di hundurê de neçalak bikin. Gerok hemî kontrolên forma xwemalî ( <input>
, <select>
, û <button>
hêmanên) di hundurê de <fieldset disabled>
wekî neçalak dihesibîne, hem li ser wan danûstendinên klavyeyê û hem jî mişkî asteng dike.
Lêbelê, heke di forma we de hêmanên bişkojka xwerû yên wekî <a class="btn btn-*">...</a>
, ji van re tenê şêwazek were dayîn pointer-events: none
, tê vê wateyê ku ew hîn jî bi karanîna klavyeyê ve baldar in û kar dikin. Di vê rewşê de, divê hûn bi destan van kontrolan biguhezînin û lê zêde tabindex="-1"
bikin da ku pêşî li wergirtina balê bigirin û aria-disabled="disabled"
rewşa wan ji teknolojiyên arîkar re nîşan bidin.
<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>
Gihîştina
Piştrast bikin ku hemî kontrolên formê navek gihîştî ya guncan heye da ku armanca wan ji bikarhênerên teknolojiyên arîkar re were ragihandin. Awayê herî hêsan ku meriv bigihîje vê ev e ku meriv <label>
hêmanek bikar bîne, an jî -di doza bişkokan de - wekî beşek <button>...</button>
naverokê nivîsek têra xwe raveker bi nav bike.
Ji bo rewşên ku ne mimkun e ku <label>
naverokek nivîsê ya xuya an guncav tê de hebe, awayên alternatîf hene ku hîn jî navek gihîştî peyda bikin, wek:
<label>
hêmanên veşartî bikaranîna.visually-hidden
class- Nîşana hêmanek heyî ya ku dikare wekî etîketek bikar bîne destnîşan dike
aria-labelledby
- Pêşkêşkirina
title
taybetmendiyek - Bi eşkere li ser hêmanek bi karanîna navê gihîştî danîn
aria-label
Ger yek ji van tune be, dibe ku teknolojiyên arîkar bikar bînin ku placeholder
taybetmendiyê wekî paşvekêşana navên gihîştî <input>
û <textarea>
hêmanan bikar bînin. Nimûneyên di vê beşê de çend nêzîkatiyên pêşniyarkirî, yên taybetmendiyê pêşkêş dikin.
Dema ku karanîna naveroka veşartî ya dîtbarî ( .visually-hidden
, aria-label
, û hetta placeholder
naverok, ku gava ku naverokek qadek formê hebe winda dibe) dê ji bikarhênerên teknolojiya arîkar sûd werbigire, nebûna nivîsa nîşana xuya dibe ku ji bo hin bikarhêneran hîn jî pirsgirêk be. Hin celeb nîşana xuyangê bi gelemperî nêzîkatiya çêtirîn e, hem ji bo gihîştinê û hem jî ji bo karanîna.
Sass
Gelek guhêrbarên formê di astek gelemperî de têne danîn ku ji hêla pêkhateyên forma kesane ve ji nû ve werin bikar anîn û dirêj kirin. Hûn ê van pir caran wekî $btn-input-*
û $input-*
guherbaran bibînin.
Variables
$btn-input-*
guhêrbar guhêrbarên gerdûnî yên di navbera bişkokên me û pêkhateyên forma me de têne parve kirin . Hûn ê van bi gelemperî wekî nirx ji bo guhêrbarên pêkhateyên taybetî yên din ji nû ve têne veqetandin bibînin.
$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;