formuláře

Přehled

Ovládací prvky formuláře Bootstrap rozšiřují naše styly formuláře Rebooted o třídy. Pomocí těchto tříd se můžete přihlásit k jejich přizpůsobeným zobrazením pro konzistentnější vykreslování napříč prohlížeči a zařízeními.

Ujistěte se, že používáte vhodný typeatribut u všech vstupů (např. emailpro e-mailovou adresu nebo numberpro číselné informace), abyste využili výhod novějších ovládacích prvků zadávání, jako je ověření e-mailu, výběr čísla a další.

Zde je rychlý příklad demonstrující styly formulářů Bootstrapu. Pokračujte ve čtení dokumentace k požadovaným třídám, rozvržení formuláře a dalším.

<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áře

Text formuláře na úrovni bloku nebo na úrovni řádku lze vytvořit pomocí .form-text.

Text formuláře pod vstupy lze upravit pomocí .form-text. Pokud bude použit prvek na úrovni bloku, přidá se horní okraj pro snadné rozestupy od výše uvedených vstupů.

<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žívat jakýkoli typický vložený prvek HTML (ať už je to <span>, <small>, nebo něco jiného) s ničím jiným než .form-texttřídou.

<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áře

Přidejte do disabledvstupu booleovský atribut, abyste zabránili uživatelským interakcím a aby se zdál lehčí.

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

Přidáním disabledatributu do a <fieldset>deaktivujete všechny ovládací prvky. Prohlížeče považují všechny ovládací prvky nativního formuláře ( <input>, <select>, a <button>elementy) uvnitř a <fieldset disabled>za deaktivované, čímž brání interakci s klávesnicí i myší.

Pokud však váš formulář obsahuje také vlastní prvky podobné tlačítkům, jako je <a class="btn btn-*">...</a>, budou mít pouze styl pointer-events: none, což znamená, že je lze stále zaostřovat a ovládat pomocí klávesnice. V takovém případě musíte tyto ovládací prvky ručně upravit přidáním tabindex="-1", abyste jim zabránili v fokusu a aria-disabled="disabled"signalizovali jejich stav asistenčním technologií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>

Přístupnost

Zajistěte, aby všechny ovládací prvky formuláře měly vhodný přístupný název, aby jejich účel mohl být sdělen uživatelům asistenčních technologií. Nejjednodušším způsobem, jak toho dosáhnout, je použít <label>prvek nebo – v případě tlačítek – zahrnout dostatečně popisný text jako součást <button>...</button>obsahu.

Pro situace, kdy není možné zahrnout viditelný <label>nebo vhodný textový obsah, existují alternativní způsoby, jak poskytnout přístupný název, například:

• <label>prvky skryté pomocí .visually-hiddentřídy
• Ukazování na existující prvek, který může fungovat jako štítek pomocíaria-labelledby
• Poskytování titleatributu
• Explicitní nastavení přístupného názvu prvku pomocíaria-label

Pokud žádný z nich není přítomen, mohou se asistenční technologie uchýlit k použití placeholderatributu jako záložního prvku pro přístupný název <input>a <textarea>prvky. Příklady v této části poskytují několik navrhovaných přístupů specifických pro jednotlivé případy.

Zatímco používání vizuálně skrytého obsahu ( .visually-hidden, aria-label, a dokonce i placeholderobsahu, který zmizí, jakmile pole formuláře obsahuje obsah) bude přínosem pro uživatele asistenčních technologií, nedostatek viditelného textu štítku může být pro některé uživatele stále problematický. Některá forma viditelného štítku je obecně nejlepší přístup, a to jak z hlediska přístupnosti, tak použitelnosti.

Sass

Mnoho proměnných formuláře je nastaveno na obecné úrovni, aby bylo možné je znovu použít a rozšířit o jednotlivé komponenty formuláře. Nejčastěji je uvidíte jako $btn-input-*a $input-*proměnné.

Proměnné

$btn-input-*proměnné jsou sdílené globální proměnné mezi našimi tlačítky a našimi komponentami formuláře. Najdete je často přeřazené jako hodnoty k jiným proměnným specifickým pro 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;