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.

Situācijās, kad nav iespējams iekļaut redzamu <label>vai atbilstošu teksta saturu, ir alternatīvi veidi, kā joprojām nodrošināt pieejamu nosaukumu, piemēram:

• <label>elementi, kas paslēpti, izmantojot .visually-hiddenklasi
• Norāda uz esošu elementu, kas var darboties kā etiķete, izmantojotaria-labelledby
• titleAtribūta nodrošināšana
• Skaidri iestatot pieejamo nosaukumu elementam, izmantojotaria-label

Ja neviena no tām nav, palīgtehnoloģijas var izmantot placeholderatribūtu kā rezerves daļu pieejamajam nosaukumam <input>un <textarea>elementiem. Šīs sadaļas piemēros ir sniegtas dažas ieteiktas, katram gadījumam specifiskas pieejas.

Lai gan vizuāli slēpta satura ( .visually-hidden, aria-label, un pat placeholdersatura, kas pazūd, kad veidlapas laukā ir saturs) izmantošana būs noderīga palīgtehnoloģiju lietotājiem, redzama etiķetes teksta trūkums dažiem lietotājiem joprojām var būt problemātisks. Dažas redzamas etiķetes formas parasti ir labākā pieeja gan pieejamībai, gan lietojamībai.

Sass

Daudzi veidlapas mainīgie ir iestatīti vispārīgā līmenī, lai tos izmantotu atkārtoti un paplašinātu ar atsevišķiem veidlapas komponentiem. Visbiežāk tos redzēsit kā $btn-input-*un $input-*mainīgos.

Mainīgie lielumi

$btn-input-*mainīgie ir mūsu pogām un veidlapas komponentiem koplietotie globālie mainīgie. Tie bieži tiek atkārtoti piešķirti kā vērtības citiem komponentiem raksturīgiem mainīgajiem.

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