Veidlapas

Pārskats

Bootstrap veidlapu vadīklas paplašina mūsu Rebooted formu stilus ar klasēm. Izmantojiet šīs klases, lai izvēlētos to pielāgotos displejus konsekventākai atveidei visās pārlūkprogrammās un ierīcēs.

Noteikti izmantojiet atbilstošu typeatribūtu visās ievadēs (piemēram, emaile-pasta adresei vai numberskaitliskai informācijai), lai izmantotu jaunākas ievades vadīklas, piemēram, e-pasta verifikāciju, numura atlasi un citus.

Šeit ir īss piemērs Bootstrap veidlapu stilu demonstrēšanai. Turpiniet lasīt, lai iegūtu dokumentāciju par nepieciešamajām klasēm, veidlapu izkārtojumu un daudz ko citu.

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

Veidlapas teksts

Bloka līmeņa vai iekļautās līmeņa veidlapas tekstu var izveidot, izmantojot .form-text.

Veidlapas tekstu zem ievades var veidot ar .form-text. Ja tiks izmantots bloka līmeņa elements, tiek pievienota augšējā piemale, lai atvieglotu atstarpi no iepriekš norādītajām ievadēm.

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

Iekļautajā tekstā var izmantot jebkuru tipisku iekļauto HTML elementu (vai tas būtu <span>, <small>, vai kaut kas cits) ar tikai .form-textklasi.

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

Invalīdu formas

Pievienojiet disabledievadei Būla atribūtu, lai novērstu lietotāja mijiedarbību un padarītu to gaišāku.

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

Pievienojiet disabledatribūtu a <fieldset>, lai atspējotu visas vadīklas. Pārlūkprogrammas visas vietējās formas vadīklas ( <input>, <select>, un <button>elementus) apstrādā <fieldset disabled>kā atspējotas, novēršot gan tastatūras, gan peles mijiedarbību.

Tomēr, ja veidlapā ir iekļauti arī pielāgoti pogām līdzīgi elementi, piemēram, <a class="btn btn-*">...</a>, tiem tiks piešķirts tikai stils pointer-events: none, kas nozīmē, ka tie joprojām ir fokusējami un izmantojami, izmantojot tastatūru. Šādā gadījumā šīs vadīklas ir manuāli jāmaina, pievienojot tabindex="-1"tās, lai tās nesaņemtu fokusu un aria-disabled="disabled"signalizētu par to stāvokli palīgtehnoloģijām.

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

Pieejamība

Nodrošiniet, lai visām veidlapu vadīklām būtu atbilstošs pieejams nosaukums, lai to mērķi varētu nodot palīgtehnoloģiju lietotājiem. Vienkāršākais veids, kā to panākt, ir izmantot <label>elementu vai (pogu gadījumā) <button>...</button>saturā iekļaut pietiekami aprakstošu tekstu.

For situations where it’s not possible to include a visible <label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:

• <label> elements hidden using the .visually-hidden class
• Pointing to an existing element that can act as a label using aria-labelledby
• Providing a title attribute
• Explicitly setting the accessible name on an element using aria-label

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on <input> and <textarea> elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Sass

Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $btn-input-* and $input-* variables.

Variables

$btn-input-* variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.

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