Eyðublöð

Yfirlit

Formstýringar Bootstrap stækka við endurræst formstíla okkar með flokkum. Notaðu þessa flokka til að velja sérsniðna skjái þeirra til að fá samkvæmari birtingu á milli vafra og tækja.

Vertu viss um að nota viðeigandi typeeiginleika á öllum innsendum (td emailfyrir netfang eða numberfyrir tölulegar upplýsingar) til að nýta nýrri innsláttarstýringar eins og staðfestingu tölvupósts, númeraval og fleira.

Hér er fljótlegt dæmi til að sýna fram á formstíl Bootstrap. Haltu áfram að lesa til að fá skjöl um nauðsynlega flokka, uppsetningu eyðublaða og fleira.

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

Form texta

Hægt er að búa til eyðublaðatexta á blokkastigi eða í línustigi með því að nota .form-text.

Formtexta fyrir neðan inntak er hægt að stíla með .form-text. Ef eining á kubbastigi verður notuð er efstu spássía bætt við til að auðvelda bilið frá inntakunum hér að ofan.

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

Innbyggður texti getur notað hvaða dæmigerða innbyggða HTML frumefni (hvort sem það er <span>, <small>, eða eitthvað annað) með ekkert meira en .form-textbekknum.

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

Óvirk eyðublöð

Bættu disabledboolean eigindinni við inntak til að koma í veg fyrir samskipti notenda og láta það virðast léttara.

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

Bættu disabledeigindinni við a <fieldset>til að slökkva á öllum stjórntækjum innan. Vafrar meðhöndla allar innfæddar formstýringar ( <input>, <select>, og <button>þættir) í a <fieldset disabled>sem óvirka og koma í veg fyrir samskipti bæði með lyklaborði og mús á þeim.

Hins vegar, ef eyðublaðið þitt inniheldur einnig sérsniðna hnappalíka þætti eins og <a class="btn btn-*">...</a>, munu þessir aðeins fá stíllinn pointer-events: none, sem þýðir að þeir eru enn fókusir og hægt að nota með lyklaborðinu. Í þessu tilviki verður þú að breyta þessum stjórntækjum handvirkt með því að bæta við tabindex="-1"til að koma í veg fyrir að þær fái fókus og aria-disabled="disabled"til að gefa hjálpartækjum merki um ástand þeirra.

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

Aðgengi

Gakktu úr skugga um að allar formstýringar hafi viðeigandi aðgengilegt nafn svo hægt sé að miðla tilgangi þeirra til notenda hjálpartækja. Einfaldasta leiðin til að ná þessu er að nota <label>þátt, eða - ef um hnappa er að ræða - að innihalda nægilega lýsandi texta sem hluta af <button>...</button>innihaldinu.

Fyrir aðstæður þar sem ekki er hægt að láta sýnilegt <label>eða viðeigandi textaefni fylgja með eru aðrar leiðir til að gefa upp aðgengilegt nafn, svo sem:

• <label>þættir falin með því að nota .visually-hiddenbekkinn
• Bendir á fyrirliggjandi þátt sem getur virkað sem merki með því að notaaria-labelledby
• Að gefa upp titleeiginleika
• Aðgengilegt nafn er sérstaklega stillt á frumefni með því að notaaria-label

Ef ekkert af þessu er til staðar gæti hjálpartækni gripið til þess að nota placeholdereiginleikann sem varahluti fyrir aðgengilega nafnið á <input>og <textarea>þætti. Dæmin í þessum hluta veita nokkrar tillögur, tilvikssértækar aðferðir.

Þó að nota sjónrænt falið efni ( .visually-hidden, aria-label, og jafnvel placeholderefni, sem hverfur þegar eyðublað hefur efni) muni gagnast notendum hjálpartækni, getur skortur á sýnilegum merkitexta samt verið vandamál fyrir ákveðna notendur. Einhvers konar sýnilegt merki er almennt besta aðferðin, bæði fyrir aðgengi og notagildi.

Sass

Margar eyðubreytur eru settar á almennt stigi til að vera endurnotaðar og stækkaðar með einstökum eyðublöðum. Þú munt sjá þetta oftast sem $btn-input-*og $input-*breytur.

Breytur

$btn-input-*breytur eru sameiginlegar alþjóðlegar breytur á milli hnappa okkar og formhluta okkar. Þú munt finna að þeim er oft endurúthlutað sem gildi fyrir aðrar íhlutasértækar breytur.

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