Ụdị
Ọmụmatụ na ntuziaka ojiji maka ụdị njikwa ụdị, nhọrọ nhazi, na ngwa ọdịnala maka imepụta ụdị dị iche iche.
Nchịkọta
Njikwa ụdị Bootstrap na-agbasawanye n'ụdị anyị ewegharịrị na klas. Jiri klaasị ndị a banye n'ime ihe ngosi haziri ahazi maka ntụgharị na-agbanwe agbanwe n'ofe ihe nchọgharị na ngwaọrụ.
Jide n'aka na ị ga-eji njirimara kwesịrị ekwesị type
na ntinye niile (dịka ọmụmaatụ, email
maka adreesị ozi-e ma ọ bụ number
maka ozi ọnụọgụ) iji nweta uru nke njikwa ndenye ọhụrụ dị ka nkwenye email, nhọrọ nọmba, na ndị ọzọ.
Nke a bụ ọmụmaatụ ngwa ngwa iji gosipụta ụdị ụdị Bootstrap. Nọgidenụ na-agụ maka akwụkwọ na klas achọrọ, nhazi ụdị, na ndị ọzọ.
<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>
Ụdị ederede
Enwere ike ịmepụta ederede ọkwa mgbochi ma ọ bụ ọkwa ntanetị site na iji .form-text
.
Na-ejikọta ederede ụdị na njikwa ụdị
Ekwesịrị ijikọ nke ọma ederede ederede yana njikwa ụdị ọ metụtara iji aria-describedby
njirimara ahụ. Nke a ga-ahụ na teknụzụ enyemaka-dị ka ndị na-agụ ihuenyo-ga-akpọsa ederede ụdị a mgbe onye ọrụ lekwasịrị anya ma ọ bụ banye na njikwa.
Enwere ike iji ụdị ederede dị n'okpuru ntinye .form-text
. Ọ bụrụ na a ga-eji mmewere-ọkwa mgbochi, a ga-agbakwunye oke oke maka ohere dị mfe site na ntinye n'elu.
<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>
Ederede inline nwere ike iji ihe ọ bụla HTML inline inline (bụ a <span>
, <small>
, ma ọ bụ ihe ọzọ) na-enweghị ihe ọ bụla karịa .form-text
klas.
<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>
Ụdị nkwarụ
Tinye njirimara disabled
boolean na ntinye iji gbochie mmekọrịta ndị ọrụ wee mee ka ọ dị ọkụ.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Tinye disabled
njirimara na a <fieldset>
iji gbanyụọ njikwa niile dị n'ime. Ihe nchọgharị na-emeso njikwa ụdị ala ala niile ( <input>
, <select>
, na <button>
ọcha) n'ime onye <fieldset disabled>
nwere nkwarụ, na-egbochi ma keyboard na òké mmekọrịta na ha.
Otú ọ dị, ọ bụrụ na ụdị gị gụnyekwara ihe ndị yiri bọtịnụ omenala dị ka <a class="btn btn-*">...</a>
, a ga-enye ndị a naanị ụdị nke pointer-events: none
, nke pụtara na ha ka na-elekwasị anya ma na-arụ ọrụ site na iji ahụigodo. N'okwu a, ị ga-eji aka gbanwee njikwa ndị a site n'ịgbakwunye tabindex="-1"
iji gbochie ha ịnweta elekwasị anya na aria-disabled="disabled"
igosi steeti ha na teknụzụ enyemaka.
<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>
Nnweta
Gbaa mbọ hụ na njikwa ụdị niile nwere aha enwere ike ịnweta nke ọma ka ebumnobi ha nye ndị ọrụ teknụzụ enyemaka. Ụzọ kachasị mfe iji nweta nke a bụ iji <label>
mmewere, ma ọ bụ-n'ihe gbasara bọtịnụ-tinye ederede nkọwa zuru oke dịka akụkụ nke <button>...</button>
ọdịnaya.
Maka ọnọdụ ebe ọ na-agaghị ekwe omume ịgụnye <label>
ọdịnaya ederede a na-ahụ anya ma ọ bụ dabara adaba, enwere ụzọ ọzọ ị ka na-enye aha enwere ike ịnweta, dị ka:
<label>
ihe ezoro ezo site na iji.visually-hidden
klas- Na-atụ aka na mmewere dị adị nwere ike rụọ ọrụ dị ka akara iji
aria-labelledby
- Inye
title
àgwà - Dozie aha a ga-enweta nke ọma na mmewere site na iji
aria-label
Ọ bụrụ na ọdịghị nke ọ bụla n'ime ihe ndị a, teknụzụ enyemaka nwere ike ịmalite iji placeholder
njirimara dị ka ndaghachi azụ maka aha enwere ike na <input>
na <textarea>
ihe. Ọmụmaatụ ndị dị na ngalaba a na-enye ụzọ ole na ole atụpụtara, nke akọwapụtara nke ọma.
Mgbe ị na-eji ọdịnaya ezoro ezo ( .visually-hidden
, aria-label
, na ọbụna placeholder
ọdịnaya, nke na-apụ n'anya ozugbo mpaghara ụdị nwere ọdịnaya) ga-erite uru ndị ọrụ teknụzụ na-enyere aka, enweghị ederede akara ngosi a na-ahụ anya ka nwere ike bụrụ nsogbu maka ụfọdụ ndị ọrụ. Ụdị ụfọdụ nke akara a na-ahụ anya bụ n'ozuzu ụzọ kachasị mma, ma maka ịnweta yana iji.
Sass
Ọtụtụ ụdị mgbanwe ka edobere n'ogo izugbe ka a ga-ejikwa ya wee gbasaa site na ngwa ụdị nke ọ bụla. Ị ga-ahụkarị ndị a dị ka $btn-input-*
na $input-*
mgbanwe.
Mgbanwe
$btn-input-*
mgbanwe na-ekekọrịta mgbanwe zuru ụwa ọnụ n'etiti bọtịnụ anyị na ngwa ụdị anyị. Ị ga-ahụ ndị a na-ekenye kwa oge ka ọ bụrụ ụkpụrụ na mgbanwe ndị ọzọ akọwapụtara.
$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;