Formae

Overview

Forma Bootstrap controllata dilatat formam styli nostri Rebooted cum generibus. His generibus utere ut optiones suas nativus ostensionibus magis constantioribus per navigatores et machinas reddendo optet.

Vide ut aptum typeattributum in omnibus initibus (exempli gratia emailelectronica inscriptio vel numbernumerica notitia) uteretur recentioribus initus moderantibus ut inscriptio verificationis, numerus lectionis et plus.

Hic exemplum velox est ut formas styles demonstraret Bootstrap. Lege documenta in classibus requisitis, forma extensionis, et plura.

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

Forma text

Truncus gradus vel inlinei gradus forma texti usus creari potest .form-text.

Forma textus infra initibus dici potest cum .form-text. Si elementum impedimentum planum adhibebitur, margini top adicietur pro facili spatio ab inputibus supra.

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

Inline textus uti potest quodlibet elementum typicum inline HTML (sit a <span>, <small>vel aliquid aliud) cum genere nihil amplius .form-text.

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

Debilitatum formae

Boolean disabledattributum addere in initus ad impediendum interationes usoris ne leviores appareant.

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

Adde quod omne imperium intus inactivandi disabledattributum est . <fieldset>Navigatores omnes nativa forma moderamina (,, et elementa) intus quasi debiles tractant <input>, <select>impediens <button>tam <fieldset disabled>claviaturas quam mus interationes.

Attamen si forma tua etiam morem globulorum qualitatum elementorum comprehendit quae <a class="btn btn-*">...</a>, haec tantum styli tradenda sunt pointer-events: none, significantes adhuc sunt focusbiles et operabiles utendo claviaturae. Hoc in casu, manually has potestates mutare debetis addendo tabindex="-1"ne umbilicum recipiant et aria-disabled="disabled"statum suum technologiae adiuvandae designent.

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

Accessibility

Ut omnes formae potestates habeant nomen accessibile congruum, ut propositum suum technologiarum adiuvantium utentibus deferri possit. Simplicissimus modus hoc assequendi est ut <label>elementum vel - in casu globuli - textum satis describit ac partem <button>...</button>contenti includere.

Cum adiunctis in quibus includere non potest contentum visibile <label>vel conveniens textum, aliae sunt modi praebendi nomen accessibile, ut sunt:

• <label>elementa occultantur per .visually-hiddenclassium
• Demonstratio elementi exsistenti qui potest agere ut pittacium utensaria-labelledby
• Providemus titleattributum
• Expresse profecta sunt in elementum utens nomine accessibilemaria-label

Si nullae ex his adsint, technologiae adiutrices uti possunt, uti placeholderattributum tamquam fallax ad nomen accessibile in <input>et <textarea>elementis. Exempla in hac sectione pauca suggerunt, casus speciales aditus.

Dum utens contento visibiliter abscondito ( .visually-hidden,, aria-labelatque etiam placeholdercontenta, quae semel evanescit forma campi contenta habet) adiuvat utentes technologias adiuvat, defectus textus visibilis visibilis adhuc pro quibusdam usoribus problematicus potest esse. Forma quaedam titulus visibilis plerumque optima est aditus, tum ad accessibilitatem et usability.

Sass

Multae variabiles formae in gradu generali positae sunt ut a singulis componentibus rursus adhibeantur et extendantur. Has saepissime videbis $input-btn-*et $input-*variabiles.

Variabilium

$input-btn-*variabiles communes variabiles globales inter globuli et formas nostras componuntur. Haec frequenter reponenda ut valores aliis variabilibus particularibus componentibus invenies.

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