Ffurflenni

Trosolwg

Mae rheolyddion ffurflenni Bootstrap yn ehangu ar ein harddulliau ffurflen wedi'u hailgychwyn gyda dosbarthiadau. Defnyddiwch y dosbarthiadau hyn i optio i mewn i'w harddangosfeydd wedi'u teilwra i gael rendro mwy cyson ar draws porwyr a dyfeisiau.

Gwnewch yn siŵr eich bod yn defnyddio typepriodoledd priodol ar bob mewnbwn (ee, emailar gyfer cyfeiriad e-bost neu numberar gyfer gwybodaeth rifiadol) i fanteisio ar reolaethau mewnbwn mwy newydd fel dilysu e-bost, dewis rhif, a mwy.

Dyma enghraifft gyflym i ddangos arddulliau ffurf Bootstrap. Parhewch i ddarllen am ddogfennaeth ar ddosbarthiadau gofynnol, cynllun y ffurflen, a mwy.

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

Ffurfio testun

Gellir creu testun ffurf lefel bloc neu lefel inlin gan ddefnyddio .form-text.

Gellir steilio testun ffurf o dan fewnbynnau gyda .form-text. Os bydd elfen lefel bloc yn cael ei defnyddio, ychwanegir ymyl uchaf i'w wahanu'n hawdd oddi wrth y mewnbynnau uchod.

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

Gall testun mewnol ddefnyddio unrhyw elfen HTML mewnlin nodweddiadol (boed yn <span>, <small>, neu rywbeth arall) heb ddim mwy na'r .form-textdosbarth.

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

Ffurflenni anabl

Ychwanegwch y disabledpriodoledd boolean ar fewnbwn i atal rhyngweithiadau defnyddwyr a gwneud iddo ymddangos yn ysgafnach.

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

Ychwanegwch y disabledpriodoledd i a <fieldset>i analluogi'r holl reolaethau o fewn. Mae porwyr yn trin pob rheolydd ffurf frodorol ( <input>, <select>, , ac <button>elfennau) y tu mewn i a <fieldset disabled>yn anabl, gan atal rhyngweithiadau bysellfwrdd a llygoden arnynt.

Fodd bynnag, os yw eich ffurflen hefyd yn cynnwys elfennau tebyg i fotwm wedi'u teilwra fel <a class="btn btn-*">...</a>, dim ond arddull o pointer-events: none, fydd yn golygu eu bod yn dal i fod yn ffocws ac yn weithredadwy gan ddefnyddio'r bysellfwrdd. Yn yr achos hwn, rhaid i chi addasu'r rheolyddion hyn â llaw trwy ychwanegu tabindex="-1"i'w hatal rhag derbyn ffocws ac aria-disabled="disabled"i ddangos eu cyflwr i dechnolegau cynorthwyol.

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

Hygyrchedd

Sicrhau bod gan bob rheolydd ffurflen enw hygyrch priodol fel y gellir cyfleu eu pwrpas i ddefnyddwyr technolegau cynorthwyol. Y ffordd symlaf o gyflawni hyn yw defnyddio <label>elfen, neu—yn achos botymau—i gynnwys testun digon disgrifiadol fel rhan o’r <button>...</button>cynnwys.

Ar gyfer sefyllfaoedd lle nad yw’n bosibl cynnwys <label>testun gweladwy neu briodol, mae ffyrdd eraill o ddarparu enw hygyrch o hyd, megis:

• <label>elfennau wedi'u cuddio gan ddefnyddio'r .visually-hiddendosbarth
• Pwyntio at elfen sy'n bodoli eisoes a all weithredu fel label gan ddefnyddioaria-labelledby
• Darparu titlepriodoledd
• Gosod yr enw hygyrch yn benodol ar elfen gan ddefnyddioaria-label

Os nad oes un o'r rhain yn bresennol, gall technolegau cynorthwyol droi at ddefnyddio'r placeholdernodwedd fel wrth gefn ar gyfer yr enw hygyrch <input>a'r <textarea>elfennau. Mae'r enghreifftiau yn yr adran hon yn cynnig ychydig o ymagweddau achos-benodol a awgrymir.

Er y bydd defnyddio cynnwys sydd wedi'i guddio'n weledol ( .visually-hidden, aria-label, a hyd yn oed placeholdercynnwys, sy'n diflannu unwaith y bydd gan faes ffurflen gynnwys) o fudd i ddefnyddwyr technoleg gynorthwyol, gall diffyg testun label gweladwy fod yn broblem o hyd i rai defnyddwyr. Rhyw fath o label gweladwy yw'r dull gorau ar y cyfan, o ran hygyrchedd a defnyddioldeb.

Sass

Gosodir llawer o newidynnau ffurf ar lefel gyffredinol i'w hailddefnyddio a'u hymestyn gan gydrannau ffurf unigol. Byddwch yn gweld y rhain amlaf fel $btn-input-*a $input-*newidynnau.

Newidynnau

$btn-input-*mae newidynnau yn newidynnau byd-eang a rennir rhwng ein botymau a'n cydrannau ffurf. Fe welwch fod y rhain yn cael eu hailbennu'n aml fel gwerthoedd i newidynnau eraill sy'n benodol i gydrannau.

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