Nkyerɛwee ahorow

Nsɛm a Wɔaka abom

Bootstrap no fom controls no trɛw yɛn Rebooted form styles no mu ne adesua ahorow. Fa saa adesua ahorow yi di dwuma fa paw wɔn nkyerɛkyerɛmu a wɔahyɛ da ayɛ no mu ma nkyerɛase a ɛkɔ so daa wɔ browser ne mfiri ahorow nyinaa so.

Hwɛ sɛ wode typesu a ɛfata bedi dwuma wɔ nsɛm a wɔde ahyɛ mu nyinaa so (sɛ nhwɛso no, emailama imel address anaa numberakontaabu ho nsɛm) de anya nsɛm a wɔde hyɛ mu no sohwɛ foforo te sɛ imel nokwaredi, nɔma a wɔpaw, ne nea ɛkeka ho no so mfaso.

Nhwɛsoɔ a ɛyɛ ntɛm a ɛbɛkyerɛ Bootstrap no form styles nie. Kɔ so kenkan ma nsɛm a ɛfa adesua ahorow a wɔhwehwɛ, kratasin nhyehyɛe, ne nea ɛkeka ho ho.

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

Kyerɛw nsɛm a wɔakyerɛw

Wobetumi de .form-text.

Form text a ɛwɔ inputs ase no betumi ayɛ styled ne .form-text. Sɛ wɔde block-level element bedi dwuma a, wɔde soro margin bɛka ho ma ɛyɛ mmerɛw sɛ wɔbɛma ntam kwan afi inputs a ɛwɔ atifi hɔ no ntam.

<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 betumi de inline HTML element biara a ɛtaa ba (sɛ ɛyɛ <span>, <small>, anaa biribi foforo) adi dwuma a biribiara nni mu sɛ .form-textadesuakuw no.

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

Nkrataa a wɔadi dɛm

Fa disabledboolean attribute no ka ho wɔ input bi so na asiw ɔdefo nkitahodi ano na ama ayɛ te sɛ nea ɛyɛ hare.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Fa disabledattribute no ka a ho na <fieldset>ama controls a ɛwɔ mu no nyinaa ayɛ adwuma. Browser ahorow no fa native form controls ( <input>, <select>, ne <button>elements) a ɛwɔ a mu <fieldset disabled>nyinaa sɛ wɔagyae, na esiw keyboard ne mouse nkitahodi nyinaa ano wɔ wɔn so.

Nanso, sɛ wo fom no nso de nneɛma a ɛte sɛ bɔtn a wɔahyɛ da ayɛ te sɛ <a class="btn btn-*">...</a>, ka ho a, wɔbɛma eyinom kwan a ɛyɛ pointer-events: none, a ɛkyerɛ sɛ wɔda so ara yɛ nea wotumi de wɔn adwene si so na wotumi de keyboard no di dwuma. Wɔ saa tebea yi mu no, ɛsɛ sɛ wode nsa sesa saa controls yi denam ka a wode bɛka ho tabindex="-1"na amma wɔrennya adwene na aria-disabled="disabled"woakyerɛ wɔn tebea no akyerɛ mfiridwuma a ɛboa.

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

Nneɛma a wotumi nya

Hwɛ sɛ kratasin sohwɛ nyinaa wɔ din a ɛfata a wotumi nya sɛnea ɛbɛyɛ a wobetumi de wɔn atirimpɔw akyerɛ wɔn a wɔde mfiridwuma a ɛboa di dwuma no. Ɔkwan a ɛyɛ mmerɛw a wobɛfa so ayɛ eyi ne sɛ wode <label>ade bi bedi dwuma, anaasɛ—wɔ bɔtn ho no—de nsɛm a ɛkyerɛkyerɛ mu sɛnea ɛsɛ bɛka ho sɛ emu nsɛm no fã <button>...</button>.

Wɔ tebea horow a ɛrentumi nyɛ yiye sɛ wode nsɛm a wotumi hu <label>anaa ɛfata bɛka ho no, akwan foforo wɔ hɔ a wobɛfa so akɔ so de din a wotumi nya bi ama, te sɛ:

• <label>elements a wɔde asie denam .visually-hiddenadesuakuw no so
• Twe adwene si element bi a ɛwɔ hɔ dedaw a ebetumi ayɛ adwuma sɛ label a wɔde di dwuma soaria-labelledby
• titleSu bi a wɔde bɛma
• Fa edin a wotumi nya no si element bi a wode bedi dwuma so pefeearia-label

Sɛ eyinom mu biara nni hɔ a, mmoa mfiridwuma betumi de placeholdersu no adi dwuma sɛ fallback ama edin a wotumi nya wɔ <input>ne <textarea>element ahorow no so. Nhwɛso ahorow a ɛwɔ ɔfã yi mu no de akwan kakraa bi a wɔahyɛ ho nyansa, a ɛfa asɛm pɔtee bi ho ma.

Bere a nsɛm a wɔde asie wɔ aniwa so ( .visually-hidden, aria-label, ne placeholdernsɛm mpo, a ɛyera bere a kratasin bi nya nsɛm) no bɛboa wɔn a wɔde mfiridwuma ho nimdeɛ a ɛboa di dwuma no, ebia nkyerɛwde a wɔde hyɛ mu a wotumi hu a wonni no bɛda so ara ayɛ ɔhaw ama wɔn a wɔde di dwuma no bi. Mpɛn pii no, nkyerɛwde bi a wotumi hu no ne ɔkwan a eye sen biara, wɔ akwan a wɔfa so nya ne nea wɔde di dwuma nyinaa ho.

Sass

Wɔde fom nsakrae pii asi hɔ wɔ ɔkwan a ɛkɔ akyiri so a wɔbɛsan de adi dwuma na wɔde nkyerɛwde afã horow ankorankoro atrɛw mu. Wobɛhunu eyinom mpɛn pii sɛ $input-btn-*ne $input-*variables.

Nneɛma a Ɛsakra

$input-btn-*variables yɛ wiase nyinaa variables a wɔkyɛ wɔ yɛn buttons ne yɛn form components ntam. Wobɛhunu sɛ wɔtaa san de eyinom ma sɛ values ​​ma component-specific variables afoforo.

$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;