Sɛbɛnw
Misaliw ni baarakɛcogo ɲɛfɔli sɛbɛnw kɔlɔsili cogoyaw kan, labɛncogo suganditaw, ani ladamu yɔrɔw walasa ka sɛbɛn suguya caman dilan.
Kuma bɛɛ lajɛlen
Bootstrap ka foroko kunkankow bɛ bonya an ka Rebooted foroko cogoyaw kan ni kalanw ye. Baara kɛ ni o kalanw ye walasa ka i yɛrɛ sugandi u ka jiralanw kɔnɔ minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye walasa ka ɲɛfɔli kɛ cogo kelen na navigatɛriw ni minɛnw kɔnɔ.
Aw ye aw jija ka baara kɛ ni fɛn bɛnnen type
ye donnakow bɛɛ kan (misali la, email
imayili ladɛrɛsi walima number
jatebɔ kunnafoniw kama) walasa ka nafa sɔrɔ donnakow kunnafoni kuraw la i n’a fɔ imɛri sɛgɛsɛgɛli, nimɔrɔ sugandili, ani fɛn wɛrɛw.
Nin ye misali teliya ye walasa ka Bootstrap ka foroko cogoyaw jira. Aw bɛ to ka kalan kɛ walasa ka sɛbɛnw sɔrɔ kalan wajibiyalenw kan, sɛbɛnw labɛncogo ani fɛn wɛrɛw.
<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>
Sɛbɛnni sɛbɛn
Block-level walima inline-level foroko sɛbɛnni bɛ se ka dilan ni .form-text
.
Foroko sɛbɛnni ni foroko kunkankow jɛli
Formulaire texte ka kan ka jɛ k’a jɛya ni formulaire control ye a bɛ tali kɛ aria-describedby
attribute baara la. O bɛna a to dɛmɛ fɛɛrɛw — i n’a fɔ ɛkran kalanbagaw — bɛna nin foroko sɛbɛn in laseli kɛ ni baarakɛla ye a sinsin walima ni a donna kunnafoni na.
Foroko sɛbɛnni minnu bɛ dontaw jukɔrɔ, olu bɛ se ka kɛ cogoya la ni .form-text
. Ni bloki-dakun-fɛn dɔ bɛna Kɛ, sanfɛla-yɔrɔ dɔ bɛ Fàra a kan walasa ka yɔrɔjan nɔgɔya ka Bɔ donnakow la minnu bɛ sanfɛ.
<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>
Inline text bɛ se ka baara kɛ ni HTML element suguya o suguya ye min bɛ inline kɔnɔ (a kɛra <span>
, <small>
, walima fɛn wɛrɛ ye) ni foyi tɛ tɛmɛ .form-text
kalasi kan.
<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>
Seko ni dɔnko sɛbɛnw
A bɛ disabled
boolean attribut (boli) fara donnafɛn dɔ kan walasa ka baarakɛlaw ka jɛɲɔgɔnyaw bali ani k’a kɛ i n’a fɔ a ka nɔgɔn.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
A ka disabled
fɛntigiya fara a kan <fieldset>
walasa ka kunnafoni bɛɛ bali a kɔnɔ. Navigatɛriw bɛ foroko kɔrɔw bɛɛ minɛ ( <input>
, <select>
, ani <button>
fɛnw) minnu bɛ a kɔnɔ <fieldset disabled>
i n’a fɔ u ma baara kɛ, ka klaviyeti ni sosɛti bɛɛ ka jɛɲɔgɔnya bali u kan.
Nka ni i ka foroko fana bɛ butɔni ɲɔgɔnna fɛnw Sɔrɔ minnu bɛ Kɛ i n’a fɔ <a class="btn btn-*">...</a>
, olu bɛ Kɛ dɔrɔn cogoya ye pointer-events: none
, o kɔrɔ ye k’u bɛ Se ka sinsin hali bi ani u bɛ Se ka baara Kɛ ni klaviyeti ye. O cogo la, i ka kan ka nin kɔrɔsili ninnu sɛmɛntiya ni bolo ye ni dɔ farali tabindex="-1"
ye walasa k’u bali ka sinsin sɔrɔ ani aria-disabled="disabled"
k’u cogoya jira dɛmɛni fɛɛrɛw la.
<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>
Seko ni dɔnko
Aw ye aw jija sɛbɛnfura kɔlɔsili bɛɛ tɔgɔ bɛnnen sɔrɔ min bɛ se ka sɔrɔ walasa u kuntilenna ka se ka lase dɛmɛni fɛɛrɛw baarakɛlaw ma. O sɔrɔcogo nɔgɔman ye ka baara kɛ ni <label>
fɛn dɔ ye, walima—ni butɔni bɛ yen—ka sɛbɛnni minnu bɛ ɲɛfɔli kɛ ka ɲɛ, olu don a <button>...</button>
kɔnɔkow kɔnɔ.
Ko minnu na, a tɛ se ka kɛ ka <label>
sɛbɛnni kɔnɔkow yelen walima minnu bɛnnen don, fɛɛrɛ wɛrɛw bɛ yen minnu bɛ se ka tɔgɔ sɔrɔ hali bi, i n’a fɔ:
<label>
fɛn minnu dogolen don ni.visually-hidden
kalan ye- A jirali fɛn dɔ la min bɛ yen min bɛ se ka kɛ i n’a fɔ labeli baara kɛli la
aria-labelledby
- Ka
title
jogo dɔ di - K’a jɛya ka tɔgɔ sɔrɔlen sigi fɛn dɔ kan min bɛ baara kɛ ni
aria-label
Ni ninnu si tɛ yen, dɛmɛni fɛɛrɛw bɛ se ka baara kɛ ni o placeholder
fɛnsɛbɛn ye i n’a fɔ fallback ka ɲɛsin tɔgɔ sɔrɔlen ma on <input>
and <textarea>
elements. Misali minnu bɛ nin tilayɔrɔba in kɔnɔ, olu bɛ fɛɛrɛ damadɔw di minnu bɛ fɔ, minnu bɛ tali kɛ ko kɛrɛnkɛrɛnnenw na.
Hali ni baara kɛli ni kunnafoni dogolenw yecogo ye ( .visually-hidden
, aria-label
, ani hali placeholder
kɔnɔkow, minnu bɛ tunun ni kɔnɔkow bɛ sɛbɛnfura dɔ kɔnɔ) o bɛna nafa don dɛmɛni fɛɛrɛw baarakɛlaw la, ni labeli sɛbɛn yelenw sɔrɔbaliya bɛ se ka kɛ gɛlɛya ye baarakɛla dɔw bolo hali bi. Labeli yelen sugu dɔw de ye fɛɛrɛ ɲuman ye caman na, sɔrɔli ni baarakɛcogo bɛɛ la.
Sass ye
Foroko bεε caman bε Sεbεn jεkuluba la walasa u ka Se ka baara kε kokura ani ka janya forobaciyɛn yɔrɔ kelen-kelenw fɛ. Aw bɛna ninnu ye ka caya i n’a fɔ $btn-input-*
ani $input-*
fɛn caman ɲɔgɔnna.
Yɛlɛma-yɛlɛmaw
$btn-input-*
fɛn caman bɛrɛbɛrɛw ye diɲɛ fɛn caman sɛgɛsɛgɛli ye an ka butɔni ni an ka foroko yɔrɔw cɛ. I b’a Sɔrɔ ninnu bɛ To ka segin ka Kɛ nafaw ye ka Kɛ ‘fɛn wɛrɛw ye minnu bɛ Kɛ ‘fɛn kɛrɛnkɛrɛnnenw ye.
$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;