Ụdị

Ọmụmatụ na ntuziaka ojiji maka ụdị njikwa ụdị, nhọrọ nhazi, na ngwa ọdịnala maka imepụta ụdị dị iche iche.

Na ibe a

Njikwa ụdị Ntinye ederede ụdị na mpaghara ederede nwere nkwado maka ọtụtụ steeti.

Họrọ Melite ihe nchọgharị ahọpụtara ndabara nwere ọdịdị mbido omenala.

Nyochaa & redio Jiri bọtịnụ redio omenala anyị na igbe nlele n'ụdị maka ịhọrọ nhọrọ ntinye.

Oke Jiri ụdị omenala anyị dochie ntinye ndabara ihe nchọgharị.

Otu ntinye Gbakwunye akara na bọtịnụ na ntinye gị maka uru ntụgharị asụsụ bara ụba.

Akara n'elu mmiri Mepụta akara ngosi dị mfe mara mma nke na-ese n'elu mpaghara ntinye gị.

Nhazi Jiri ụdị gị mepụta usoro ahịrị, kehoraizin ma ọ bụ mgbagwoju anya dabere na grid.

Nkwado Jiri omume na ụdị nkwado omenala ma ọ bụ nwa amaala kwado fọm gị.

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ị typena ntinye niile (dịka ọmụmaatụ, emailmaka adreesị ozi-e ma ọ bụ numbermaka ozi ọnụọgụ) iji nweta uru 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-describedbynjirimara 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.

Okwuntughe

Okwuntughe gị ga-abụrịrị ogologo mkpụrụedemede 8-20, nwere mkpụrụedemede na ọnụọgụ, ma ọ gaghị enwe oghere, mkpụrụedemede pụrụ iche, ma ọ bụ emoji.

<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-textklas.

Okwuntughe

Ga-enwerịrị mkpụrụedemede 8-20 ogologo.

<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 disabledboolean 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 disablednjirimara 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-hiddenklas
Na-atụ aka na mmewere dị adị nwere ike rụọ ọrụ dị ka akara ijiaria-labelledby
Inye titleàgwà
Dozie aha a ga-enweta nke ọma na mmewere site na ijiaria-label

Ọ bụrụ na ọdịghị nke ọ bụla n'ime ihe ndị a, teknụzụ enyemaka nwere ike ịmalite iji placeholdernjirimara 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 ya na ojiji.

Sass

A na-edozi ọtụtụ ụdị mgbanwe n'ogo n'ozuzu ka a ga-ejikwa ya ma 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;