Formuláre

Prehľad

Ovládacie prvky formulára Bootstrap rozširujú naše štýly formulárov Rebooted o triedy. Pomocou týchto tried si môžete aktivovať prispôsobené zobrazenia pre konzistentnejšie vykresľovanie vo všetkých prehliadačoch a zariadeniach.

Uistite sa, že používate vhodný typeatribút na všetkých vstupoch (napr. emailpre e-mailovú adresu alebo numberpre číselné informácie), aby ste využili výhody novších ovládacích prvkov vstupu, ako je overenie e-mailu, výber čísla a ďalšie.

Tu je rýchly príklad na demonštráciu štýlov formulárov Bootstrapu. Pokračujte v čítaní dokumentácie o požadovaných triedach, rozložení formulárov a ďalších.

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

Text formulára

Text formulára na úrovni bloku alebo na úrovni riadku možno vytvoriť pomocou .form-text.

Text formulára pod vstupmi je možné upraviť pomocou .form-text. Ak sa použije prvok na úrovni bloku, pridá sa horný okraj, aby sa uľahčila vzdialenosť od vstupov vyššie.

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

Vložený text môže používať akýkoľvek typický vložený prvok HTML (či už je to <span>, <small>, alebo niečo iné) s ničím iným ako .form-texttriedou.

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

Zakázané formuláre

Pridajte disabledbooleovský atribút na vstup, aby ste zabránili interakciám používateľa a aby sa javil ako ľahší.

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

Ak chcete vypnúť všetky ovládacie prvky, pridajte disabledatribút do. <fieldset>Prehliadače považujú všetky ovládacie prvky natívneho formulára ( <input>, <select>, a <button>prvky) vo vnútri <fieldset disabled>za deaktivované, čím bránia interakciám s klávesnicou a myšou.

Ak však váš formulár obsahuje aj vlastné prvky podobné tlačidlám, ako napríklad <a class="btn btn-*">...</a>, budú im pridelené iba štýly pointer-events: none, čo znamená, že sú stále zaostriteľné a ovládateľné pomocou klávesnice. V takom prípade musíte manuálne upraviť tieto ovládacie prvky pridaním tabindex="-1", aby ste im zabránili v zaostrovaní a aria-disabled="disabled"signalizovali ich stav asistenčným technológiá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>

Prístupnosť

Zabezpečte, aby všetky ovládacie prvky formulára mali vhodný prístupný názov, aby ich účel mohol byť oznámený používateľom asistenčných technológií. Najjednoduchším spôsobom, ako to dosiahnuť, je použiť <label>prvok alebo – v prípade tlačidiel – zahrnúť dostatočne popisný text ako súčasť <button>...</button>obsahu.

Pre situácie, keď nie je možné zahrnúť viditeľný <label>alebo vhodný textový obsah, existujú alternatívne spôsoby, ako poskytnúť prístupný názov, ako napríklad:

• <label>prvky skryté pomocou .visually-hiddentriedy
• Ukazovanie na existujúci prvok, ktorý môže fungovať ako štítok pomocouaria-labelledby
• Poskytnutie titleatribútu
• Explicitné nastavenie prístupného názvu prvku pomocouaria-label

Ak žiadna z nich nie je prítomná, asistenčné technológie sa môžu uchýliť k použitiu placeholderatribútu ako náhrady pre prístupný názov <input>a <textarea>prvky. Príklady v tejto časti poskytujú niekoľko navrhovaných prístupov špecifických pre jednotlivé prípady.

Zatiaľ čo používanie vizuálne skrytého obsahu ( .visually-hidden, aria-label, a dokonca aj placeholderobsahu, ktorý zmizne, keď pole formulára obsahuje obsah) bude prínosom pre používateľov asistenčných technológií, nedostatok viditeľného textu štítkov môže byť pre niektorých používateľov stále problematický. Určitá forma viditeľného označenia je vo všeobecnosti najlepším prístupom z hľadiska prístupnosti aj použiteľnosti.

Sass

Mnohé premenné formulára sú nastavené na všeobecnej úrovni na opätovné použitie a rozšírenie o jednotlivé komponenty formulára. Najčastejšie ich uvidíte ako $input-btn-*a $input-*premenné.

Premenné

$input-btn-*premenné sú zdieľané globálne premenné medzi našimi tlačidlami a našimi komponentmi formulára. Nájdete ich často priradené ako hodnoty k iným premenným špecifickým pre komponenty.

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