Foirmeacha

Forbhreathnú

Leathnaíonn rialuithe foirmeacha Bootstrap ar ár stíleanna foirmeacha Atosaithe le ranganna. Bain úsáid as na ranganna seo chun tarraingt isteach ina dtaispeántais shaincheaptha le haghaidh rindreála níos comhsheasmhaí thar brabhsálaithe agus gléasanna.

Bí cinnte go n-úsáideann tú typetréith chuí ar gach ionchur (m.sh., emaille haghaidh seoladh ríomhphoist nó numberle haghaidh faisnéise uimhriúla) chun leas a bhaint as rialuithe ionchuir níos nuaí amhail fíorú ríomhphoist, roghnú uimhreacha, agus go leor eile.

Seo sampla tapa chun stíleanna foirmeacha Bootstrap a léiriú. Lean ort ag léamh le haghaidh doiciméadú ar na ranganna riachtanacha, leagan amach na bhfoirmeacha, agus go leor eile.

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

Téacs foirme

Is féidir téacs foirme blocleibhéil nó inlíne a chruthú le .form-text.

Is féidir téacs foirme faoi ionchuir a stíliú le .form-text. Más rud é go n-úsáidfear eilimint bhlocleibhéil, cuirfear corrlach uachtarach leis chun spásáil éasca a dhéanamh ó na hionchuir thuas.

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

Is féidir le téacs inlíne aon eilimint HTML tipiciúil inlíne a úsáid (bíodh sé ina <span>, , <small>, nó rud éigin eile) gan rud ar bith níos mó ná an .form-textrang.

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

Foirmeacha faoi mhíchumas

Cuir an disabledtréith Boole ar ionchur chun idirghníomhaíochtaí úsáideoirí a chosc agus chun go mbeidh cuma níos éadroime air.

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

Cuir an disabledtréith le a <fieldset>chun na rialuithe go léir laistigh a dhíchumasú. Déileálann brabhsálaithe le gach rialtán foirm dhúchasach ( <input>, <select>, , agus <button>eilimintí) taobh istigh de <fieldset disabled>bheith díchumasaithe, rud a choscann idirghníomhartha méarchláir agus lucha orthu.

Mar sin féin, má tá gnéithe saincheaptha cosúil le cnaipe cosúil le , mar shampla <a class="btn btn-*">...</a>, ní thabharfar dóibh seo ach stíl pointer-events: none, rud a chiallaíonn go bhfuil siad fós infhócasaithe agus inoibrithe ag baint úsáide as an méarchlár. Sa chás seo, ní mór duit na rialuithe seo a mhodhnú de láimh trí chur tabindex="-1"leo chun iad a chosc ó fhócas a fháil agus aria-disabled="disabled"a staid a chur in iúl do theicneolaíochtaí cúnta.

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

Inrochtaineacht

A chinntiú go bhfuil ainm inrochtana oiriúnach ar gach rialtán foirme ionas gur féidir a gcuspóir a chur in iúl d’úsáideoirí na dteicneolaíochtaí cúnta. Is é an bealach is simplí chun é seo a bhaint amach ná <label>eilimint, nó—i gcás cnaipí—a úsáid chun téacs tuairisciúil a dhóthain a chur san áireamh mar chuid den <button>...</button>ábhar.

I gcásanna nach féidir <label>ábhar téacs sofheicthe nó iomchuí a chur san áireamh, tá bealaí eile ann fós chun ainm inrochtana a sholáthar, mar:

• <label>eilimintí i bhfolach ag baint úsáide as an .visually-hiddenrang
• Ag díriú ar eilimint atá ann cheana féin ar féidir léi feidhmiú mar lipéad ag baint úsáide asaria-labelledby
• Ag soláthar titletréith
• Socrú sainráite an t-ainm inrochtana ar eilimint ag baint úsáide asaria-label

Mura bhfuil aon cheann díobh seo i láthair, féadfaidh teicneolaíochtaí cúnta leas a bhaint as an placeholdertréith a úsáid mar chúltaca don ainm <input>agus do na <textarea>heilimintí inrochtana. Soláthraíonn na samplaí sa chuid seo roinnt cur chuige a mholtar a bhaineann go sonrach le cás.

Cé go rachaidh úsáid a bhaint as ábhar atá i bhfolach ó thaobh amhairc ( .visually-hidden, aria-label, , agus fiú placeholderábhar, a imíonn nuair a bhíonn ábhar i réimse foirme) chun tairbhe úsáideoirí na teicneolaíochta cúnta, d’fhéadfadh easpa téacs lipéid infheicthe a bheith ina fhadhb d’úsáideoirí áirithe fós. Is gnách go mbíonn cineál éigin de lipéad sofheicthe ar an gcur chuige is fearr, maidir le hinrochtaineacht agus inúsáidteacht.

Sass

Socraítear go leor athróg foirme ag leibhéal ginearálta le hathúsáid agus le leathnú ag comhpháirteanna aonair foirme. Feicfidh tú iad seo mar is minicí $btn-input-*agus $input-*athróga.

Athróga

$btn-input-*is athróga domhanda roinnte iad athróga idir ár gcnaipí agus ár gcomhpháirteanna foirme. Gheobhaidh tú iad seo a athshannadh go minic mar luachanna chuig athróga eile a bhaineann go sonrach le comhpháirt.

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