Vorms

Oorsig

Bootstrap se vormkontroles brei uit op ons Herlaaide vormstyle met klasse. Gebruik hierdie klasse om in te teken op hul pasgemaakte skerms vir 'n meer konsekwente weergawe oor blaaiers en toestelle.

Maak seker dat jy 'n toepaslike typekenmerk op alle invoere gebruik (bv. emailvir e-posadres of numbervir numeriese inligting) om voordeel te trek uit nuwer invoerkontroles soos e-posverifikasie, nommerkeuse en meer.

Hier is 'n vinnige voorbeeld om Bootstrap se vormstyle te demonstreer. Hou aan om te lees vir dokumentasie oor vereiste klasse, vormuitleg en meer.

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

Vorm teks

Blokvlak- of inlynvlakvormteks kan geskep word deur gebruik te maak van .form-text.

Vormteks onder invoere kan met .form-text. As 'n blokvlak-element gebruik sal word, word 'n boonste marge bygevoeg vir maklike spasiëring van die insette hierbo.

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

Inlyn teks kan enige tipiese inlyn HTML-element gebruik (of dit nou 'n <span>, <small>, of iets anders is) met niks meer as die .form-textklas nie.

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

Gestremde vorms

Voeg die disabledBoolese kenmerk by 'n invoer om gebruikersinteraksies te voorkom en dit ligter te laat lyk.

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

Voeg die disabledkenmerk by a <fieldset>om al die kontroles binne te deaktiveer. Blaaiers hanteer alle inheemse vormkontroles ( <input>, <select>, en <button>elemente) binne 'n <fieldset disabled>as gedeaktiveer, wat beide sleutelbord- en muisinteraksies op hulle voorkom.

As jou vorm egter ook pasgemaakte knoppie-agtige elemente soos , insluit <a class="btn btn-*">...</a>, sal dit slegs 'n styl van pointer-events: nonekry, wat beteken dat hulle steeds fokusbaar en werkbaar is met die sleutelbord. In hierdie geval moet jy hierdie kontroles handmatig wysig deur by te voeg tabindex="-1"om te verhoed dat hulle fokus ontvang en aria-disabled="disabled"om hul toestand aan ondersteunende tegnologieë aan te dui.

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

Toeganklikheid

Maak seker dat alle vormkontroles 'n toepaslike toeganklike naam het sodat hul doel aan gebruikers van ondersteunende tegnologieë oorgedra kan word. Die eenvoudigste manier om dit te bereik, is om 'n <label>element te gebruik, of - in die geval van knoppies - om voldoende beskrywende teks as deel van die <button>...</button>inhoud in te sluit.

Vir situasies waar dit nie moontlik is om 'n sigbare <label>of gepaste teksinhoud in te sluit nie, is daar alternatiewe maniere om steeds 'n toeganklike naam te verskaf, soos:

• <label>elemente versteek met behulp van die .visually-hiddenklas
• Wys na 'n bestaande element wat as 'n etiket kan optree deuraria-labelledby
• Die verskaffing van 'n titlekenmerk
• Stel die toeganklike naam uitdruklik op 'n element met behulp vanaria-label

As nie een van hierdie teenwoordig is nie, kan bystandstegnologie gebruik maak van die placeholderkenmerk as 'n terugval vir die toeganklike naam op <input>en <textarea>elemente. Die voorbeelde in hierdie afdeling verskaf 'n paar voorgestelde, gevalspesifieke benaderings.

Alhoewel die gebruik van visueel verborge inhoud ( .visually-hidden, aria-label, en selfs placeholderinhoud, wat verdwyn sodra 'n vormveld inhoud het) bystandstegnologiegebruikers sal bevoordeel, kan 'n gebrek aan sigbare etiketteks steeds problematies wees vir sekere gebruikers. Een of ander vorm van sigbare etiket is oor die algemeen die beste benadering, beide vir toeganklikheid en bruikbaarheid.

Sass

Baie vormveranderlikes word op 'n algemene vlak gestel om hergebruik en uitgebrei te word deur individuele vormkomponente. Jy sal dit die meeste sien as $btn-input-*en $input-*veranderlikes.

Veranderlikes

$btn-input-*veranderlikes is gedeelde globale veranderlikes tussen ons knoppies en ons vormkomponente. U sal vind dat hierdie gereeld as waardes aan ander komponentspesifieke veranderlikes toegewys word.

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