Fòm

Egzanp ak direktiv itilizasyon pou estil kontwòl fòm, opsyon layout, ak konpozan koutim pou kreye yon gran varyete fòm.

Nan paj sa a

Kontwòl fòm Style antre tèks ak zòn tèks ak sipò pou plizyè eta.

Chwazi Amelyore eleman seleksyon default navigatè a ak yon aparans inisyal koutim.

Chèk ak radyo Sèvi ak bouton radyo koutim ak kaz nou yo nan fòm pou chwazi opsyon opinyon.

Range Ranplase entrées ranje default navigatè ak vèsyon koutim nou an.

Antre gwoup Tache etikèt ak bouton sou opinyon ou yo pou ogmante valè semantik.

Etikèt k ap flote Kreye etikèt fòm trè senp ki flote sou jaden opinyon ou yo.

Layout Kreye enline, orizontal, oswa konplèks ki baze sou kadriyaj layout ak fòm ou yo.

Validasyon Valide fòm ou yo ak konpòtman ak estil validation personnalisé oswa natif natal.

Apèsi sou lekòl la

Kontwòl fòm Bootstrap yo elaji sou estil fòm Rebooted nou yo ak klas yo. Sèvi ak klas sa yo pou patisipe nan ekspozisyon Customized yo pou yon rann ki pi konsistan atravè navigatè ak aparèy.

Asire ou ke ou sèvi ak yon typeatribi apwopriye sou tout antre (pa egzanp, emailpou adrès imel oswa numberpou enfòmasyon nimerik) pou pwofite de nouvo kontwòl antre tankou verifikasyon imel, seleksyon nimewo, ak plis ankò.

Men yon egzanp rapid pou demontre estil fòm Bootstrap la. Kontinye lekti pou dokimantasyon sou klas obligatwa yo, fòm fòm, ak plis ankò.

<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òm tèks

Ou ka kreye tèks fòm nan nivo blòk oswa nan nivo liy lè l sèvi avèk .form-text.

Asosye tèks fòm ak kontwòl fòm

Tèks fòm yo ta dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedbyatribi a. Sa pral asire ke teknoloji asistans-tankou lektè ekran-ap anonse tèks fòm sa a lè itilizatè a konsantre oswa antre nan kontwòl la.

Fòm tèks ki anba a antre yo ka style ak .form-text. Si yo pral itilize yon eleman nan nivo blòk, yo ajoute yon maj anlè pou espas fasil soti nan antre ki anwo yo.

Modpas

Modpas ou a dwe genyen 8-20 karaktè, li dwe genyen lèt ak nimewo, epi li pa dwe genyen espas, karaktè espesyal oswa 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>

Tèks aliye ka itilize nenpòt eleman HTML enline tipik (ke se yon <span>, <small>, oswa yon lòt bagay) ki pa gen anyen plis pase .form-textklas la.

Modpas

Dwe gen 8-20 karaktè nan longè.

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

Fòm andikape

Ajoute disabledatribi boolean an sou yon opinyon pou anpeche entèraksyon itilizatè yo epi fè li parèt pi lejè.

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

Ajoute disabledatribi a nan yon <fieldset>pou enfim tout kontwòl ki nan. Navigatè trete tout kontwòl fòm natif natal ( <input>, <select>, ak <button>eleman) andedan yon <fieldset disabled>kòm andikape, anpeche tou de entèraksyon klavye ak sourit sou yo.

Sepandan, si fòm ou a gen ladan tou eleman koutim ki sanble ak bouton tankou <a class="btn btn-*">...</a>, yo pral sèlman bay sa yo yon style nan pointer-events: none, sa vle di yo toujou konsantre ak opere lè l sèvi avèk klavye a. Nan ka sa a, ou dwe manyèlman modifye kontwòl sa yo lè w ajoute tabindex="-1"pou anpeche yo resevwa konsantre ak aria-disabled="disabled"siyal eta yo nan teknoloji asistans.

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

Aksesiblite

Asire ke tout kontwòl fòm yo gen yon non aksesib apwopriye pou objektif yo ka transmèt bay itilizatè teknoloji asistans yo. Fason ki pi senp pou reyalize sa a se sèvi ak yon <label>eleman, oswa-nan ka bouton-gen ladan tèks ase deskriptif kòm yon pati nan <button>...</button>kontni an.

Pou sitiyasyon kote li pa posib pou mete yon <label>kontni tèks vizib oswa apwopriye, gen lòt fason pou toujou bay yon non aksesib, tankou:

<label>eleman kache lè l sèvi avèk .visually-hiddenklas la
Montre nan yon eleman ki deja egziste ki ka aji kòm yon etikèt lè l sèvi avèkaria-labelledby
Bay yon titleatribi
Ekspliziteman mete non aksesib a sou yon eleman lè l sèvi avèkaria-label

Si okenn nan sa yo pa prezan, teknoloji asistans yo ka itilize placeholderatribi a kòm yon sekou pou non aksesib a sou <input>ak <textarea>eleman yo. Egzanp yo nan seksyon sa a bay kèk sigjere, apwòch ka-espesifik.

Pandan w ap itilize kontni vizyèlman kache ( .visually-hidden, aria-label, e menm placeholderkontni, ki disparèt yon fwa yon jaden fòm gen kontni) ap benefisye itilizatè teknoloji asistans, yon mank de tèks etikèt vizib ka toujou gen pwoblèm pou sèten itilizatè. Kèk fòm etikèt vizib se jeneralman pi bon apwòch, tou de pou aksè ak itilizasyon.

Sass

Anpil varyab fòm yo mete nan yon nivo jeneral yo dwe re-itilize ak pwolonje pa eleman fòm endividyèl. Ou pral wè sa yo pi souvan kòm $btn-input-*ak $input-*varyab.

Varyab

$btn-input-*varyab yo pataje varyab mondyal ant bouton nou yo ak eleman fòm nou yo. Ou pral jwenn sa yo souvan reasignate kòm valè nan lòt varyab konpozan espesifik.

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