in English

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.

Nin ɲɛ in kan

Foroko kɔlɔsili Sɛbɛnni dontaw ni sɛbɛnniyɔrɔw cogoya ni dɛmɛ ye jamana caman na.

Ka sugandi Navigateur default select elements (navigatɛri default) ɲɛnabɔ ni a daminɛ cogoya ye min bɛ kɛ ka kɛɲɛ ni a yɛrɛ sago ye.

Sɛgɛsɛgɛliw & arajow Baara kɛ ni an ka arajo butɔni ye ani an ka jatebɔ kɛsu minnu bɛ sɛbɛnw kɔnɔ walasa ka sɛbɛnni suganditaw sugandi.

Labɛnko ɲuman Navigatɛri ka default range inputs (navigatɛri ka default range inputs) bila an ka custom version (labɛncogo) nɔ na.

Donanw kulu Aw bɛ labeliw ni butɔniw nɔrɔ aw ka dontaw la walasa ka kɔrɔko nafa bonya.

Labels flottant (Label minnu bɛ panpan). Aw ye sɛbɛnfura labeli nɔgɔmanw dilan minnu bɛ panpan aw ka dondaw kan.

Labɛn cogo Aw ye layidu talenw dilan minnu sinsinnen bɛ jatebɔlanw kan, minnu bɛ kɛ tilennenw na, walima minnu bɛ kɛ ni jatebɔlanw ye minnu ka gɛlɛn ni aw ka sɛbɛnw ye.

Validation (Sɔrɔli). Aw ye aw ka sɛbɛnw sɛmɛntiya ni ladamu walima native validation kɛcogo ni cogoyaw ye.

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 typeye donnakow bɛɛ kan (misali la, emailimayili ladɛrɛsi walima numberjatebɔ 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.

html ye

<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-describedbyattribute 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ɛ.

Kɔdi

I ka tɔgɔlasɛbɛn janya ka kan ka kɛ taamasiyɛn 8-20 ye, lɛtɛrɛw ni nimɔrɔw ka kan ka sɔrɔ a kɔnɔ, wa a man kan ka kɛ ni yɔrɔw ye, sɛbɛnni kɛrɛnkɛrɛnnenw, walima emojiw.

html ye

<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-textkalasi kan.

Kɔdi

A ka kan ka kɛ sɛbɛnnibolo 8-20 ye.

html ye

<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ɛ disabledboolean 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 disabledfɛ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.

html ye

<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-hiddenkalan ye
A jirali fɛn dɔ la min bɛ yen min bɛ se ka kɛ i n’a fɔ labeli baara kɛli laaria-labelledby
Ka titlejogo dɔ di
K’a jɛya ka tɔgɔ sɔrɔlen sigi fɛn dɔ kan min bɛ baara kɛ niaria-label

Ni ninnu si tɛ yen, dɛmɛni fɛɛrɛw bɛ se ka baara kɛ ni o placeholderfɛ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 placeholderkɔ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ɔ $input-btn-*ani $input-*fɛn caman ɲɔgɔnna.

Yɛlɛma-yɛlɛmaw

$input-btn-*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;