Awọn fọọmu

Akopọ

Awọn iṣakoso fọọmu Bootstrap faagun lori awọn aza fọọmu Atunbere wa pẹlu awọn kilasi. Lo awọn kilasi wọnyi lati jade sinu awọn ifihan adani wọn fun ṣiṣe deede diẹ sii kọja awọn aṣawakiri ati awọn ẹrọ.

Rii daju pe o lo abuda ti o yẹ typelori gbogbo awọn igbewọle (fun apẹẹrẹ, emailfun adirẹsi imeeli tabi numberfun alaye nọmba) lati lo anfani awọn iṣakoso igbewọle tuntun bii ijẹrisi imeeli, yiyan nọmba, ati diẹ sii.

Eyi ni apẹẹrẹ iyara lati ṣafihan awọn aza fọọmu Bootstrap. Jeki kika fun iwe lori awọn kilasi ti a beere, iṣeto fọọmu, ati diẹ sii.

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

Fọọmu ọrọ

Ipele-idina tabi ọrọ fọọmu ipele-ila ni a le ṣẹda pẹlu lilo .form-text.

Fọọmu ọrọ ni isalẹ awọn igbewọle le jẹ aṣa pẹlu .form-text. Ti o ba jẹ pe ao lo ipele-idina kan, ala oke kan ni a ṣafikun fun aye irọrun lati awọn igbewọle loke.

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

Ọrọ inline le lo eyikeyi opopo HTML ano (jẹ a <span>, <small>, tabi nkan miran) pẹlu ohunkohun siwaju sii ju awọn .form-textkilasi.

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

Awọn fọọmu alaabo

Ṣafikun disabledabuda Boolean lori titẹ sii lati ṣe idiwọ awọn ibaraenisepo olumulo ati jẹ ki o han pe o fẹẹrẹfẹ.

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

Fi awọn disabledikalara si kan <fieldset>lati mu gbogbo awọn idari laarin. Awọn aṣawakiri ṣe itọju gbogbo awọn iṣakoso fọọmu abinibi ( <input>, <select>, ati <button>awọn eroja) inu <fieldset disabled>bi alaabo, idilọwọ mejeeji awọn ibaraẹnisọrọ keyboard ati Asin lori wọn.

Sibẹsibẹ, ti o ba jẹ pe fọọmu rẹ tun pẹlu awọn eroja bi bọtini aṣa gẹgẹbi <a class="btn btn-*">...</a>, iwọnyi yoo fun ni ara ti pointer-events: none, afipamo pe wọn tun wa ni idojukọ ati ṣiṣe ni lilo keyboard. Ni ọran yii, o gbọdọ ṣe atunṣe awọn idari wọnyi pẹlu ọwọ nipa fifi kun tabindex="-1"lati ṣe idiwọ wọn lati gba idojukọ ati aria-disabled="disabled"lati ṣe ifihan ipo wọn si awọn imọ-ẹrọ iranlọwọ.

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

Wiwọle

Rii daju pe gbogbo awọn iṣakoso fọọmu ni orukọ wiwọle ti o yẹ ki idi wọn le jẹ gbigbe si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ. Ọna ti o rọrun julọ lati ṣaṣeyọri eyi ni lati lo ipin <label>kan, tabi—ninu ọran ti awọn bọtini—lati ṣafikun ọrọ ijuwe ti o to gẹgẹ bi apakan <button>...</button>akoonu naa.

Fun awọn ipo nibiti ko ṣee ṣe lati ṣafikun <label>akoonu ọrọ ti o han tabi ti o yẹ, awọn ọna miiran wa ti ṣi pese orukọ wiwọle, bii:

• <label>eroja pamọ lilo .visually-hiddenkilasi
• Ntọkasi nkan ti o wa tẹlẹ ti o le ṣe bi aami nipa liloaria-labelledby
• Pese a titlero pe
• Ṣiṣeto orukọ ti o wa ni gbangba lori eroja nipa liloaria-label

Ti ko ba si ọkan ninu iwọnyi ti o wa, awọn imọ-ẹrọ iranlọwọ le ṣe igbasilẹ si lilo placeholderabuda bi ipadasẹhin fun orukọ wiwọle lori <input>ati <textarea>awọn eroja. Awọn apẹẹrẹ ti o wa ni apakan yii pese diẹ ti a daba, awọn isunmọ-ọrọ kan pato.

Lakoko lilo akoonu ti o farapamọ oju ( .visually-hidden, aria-label, ati paapaa placeholderakoonu, eyiti o padanu ni kete ti aaye fọọmu kan ni akoonu) yoo ṣe anfani awọn olumulo imọ-ẹrọ iranlọwọ, aini ti ọrọ aami ti o han le tun jẹ iṣoro fun awọn olumulo kan. Diẹ ninu awọn aami ti o han ni gbogbogbo jẹ ọna ti o dara julọ, mejeeji fun iraye si ati lilo.

Sass

Ọpọlọpọ awọn oniyipada fọọmu ti ṣeto ni ipele gbogbogbo lati tun lo ati faagun nipasẹ awọn paati fọọmu kọọkan. Iwọ yoo rii awọn wọnyi nigbagbogbo bi $input-btn-*ati $input-*awọn oniyipada.

Awọn oniyipada

$input-btn-*awọn oniyipada jẹ awọn oniyipada agbaye pin laarin awọn bọtini wa ati awọn paati fọọmu wa. Iwọ yoo rii iwọnyi nigbagbogbo ti a tun pin sọtọ bi awọn iye si awọn oniyipada paati-pato miiran.

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