Formuláre

Príklady a pokyny na použitie pre štýly ovládania formulárov, možnosti rozloženia a vlastné komponenty na vytváranie širokej škály formulárov.

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="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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>

Ovládacie prvky formulára

Ovládacie prvky textového formulára – napríklad <input>s, <select>s a <textarea>s – sú v štýle .form-controltriedy. Zahrnuté sú štýly pre celkový vzhľad, stav zaostrenia, veľkosť a ďalšie.

Nezabudnite preskúmať naše vlastné formuláre na ďalšie štýly <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Pre vstupy súborov vymeňte .form-controlza .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Dimenzovanie

Nastavte výšky pomocou tried ako .form-control-lga .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Iba na čítanie

Pridajte readonlybooleovský atribút na vstup, aby ste zabránili úprave hodnoty vstupu. Vstupy len na čítanie sa zdajú svetlejšie (rovnako ako zakázané vstupy), ale zachovajú si štandardný kurzor.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Čistý text len na čítanie

Ak chcete mať <input readonly>prvky vo formulári v štýle obyčajného textu, použite .form-control-plaintexttriedu na odstránenie predvoleného štýlu poľa formulára a zachovajte správny okraj a výplň.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Rozsah vstupov

Nastavte horizontálne posúvateľné vstupy rozsahu pomocou .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Zaškrtávacie políčka a rádiá

Predvolené začiarkavacie políčka a rádiá sú vylepšené pomocou .form-checkjedinej triedy pre oba typy vstupu, ktorá zlepšuje rozloženie a správanie ich prvkov HTML . Začiarkavacie políčka slúžia na výber jednej alebo viacerých možností v zozname, zatiaľ čo rádiá sú na výber jednej možnosti z mnohých.

Zakázané začiarkavacie políčka a rádiá sú podporované. Atribút disabledpoužije svetlejšiu farbu, ktorá pomôže určiť stav vstupu.

Začiarkavacie políčka a prepínače podporujú overenie formulárov založené na HTML a poskytujú stručné a prístupné označenia. Ako také sú naše <input>s a <label>s súrodenecké prvky na rozdiel od prvkov v <input>rámci <label>. Toto je o niečo podrobnejšie, pretože musíte špecifikovať ida foratribúty, aby ste spojili <input>a <label>.

Predvolené (zoskupené)

V predvolenom nastavení bude ľubovoľný počet začiarkavacích políčok a rádií, ktoré sú bezprostrednými súrodencami, vertikálne usporiadaný a primerane rozmiestnený s .form-check.

Predvolené začiarkavacie políčko

Začiarkavacie políčko vypnuté

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Predvolené rádio

Druhé predvolené rádio

Vypnuté rádio

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

V rade

Zoskupte začiarkavacie políčka alebo rádiá v rovnakom vodorovnom riadku pridaním .form-check-inlinek ľubovoľnému .form-check.

3 (zakázané)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (zakázané)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Bez štítkov

Pridať .position-statick vstupom .form-check, ktoré neobsahujú žiadny text menovky. Nezabudnite poskytnúť určitú formu prístupného názvu pre asistenčné technológie (napríklad pomocou aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Rozloženie

Keďže Bootstrap platí display: blocktakmer width: 100%pre všetky naše ovládacie prvky formulárov, formuláre sa štandardne ukladajú vertikálne. Na zmenu tohto rozloženia na základe jednotlivých formulárov možno použiť ďalšie triedy.

Vytvárajte skupiny

Trieda .form-groupje najjednoduchší spôsob, ako pridať určitú štruktúru do formulárov. Poskytuje flexibilnú triedu, ktorá podporuje správne zoskupovanie štítkov, ovládacích prvkov, voliteľného pomocného textu a správ na overenie formulárov. V predvolenom nastavení platí iba margin-bottom, ale podľa .form-inlinepotreby preberá ďalšie štýly. Použite ho s <fieldset>s, <div>s alebo takmer akýmkoľvek iným prvkom.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Mriežka formulára

Zložitejšie formuláre je možné zostaviť pomocou našich tried mriežky. Použite ich pre rozloženia formulárov, ktoré vyžadujú viacero stĺpcov, rôzne šírky a ďalšie možnosti zarovnania.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Riadok formulára

Môžete tiež zameniť .rowza .form-row, variáciu nášho štandardného riadku mriežky, ktorý prepíše predvolené odkvapy stĺpcov pre užšie a kompaktnejšie rozloženia.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Pomocou mriežkového systému je možné vytvárať aj zložitejšie rozloženia.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontálny tvar

Vytvorte vodorovné formuláre s mriežkou pridaním .rowtriedy do skupín formulárov a použitím .col-*-*tried na určenie šírky štítkov a ovládacích prvkov. Nezabudnite tiež pridať .col-form-labeldo svojich <label>s, aby boli vertikálne vycentrované s príslušnými ovládacími prvkami formulára.

Niekedy možno budete musieť použiť pomocné nástroje pre okraje alebo výplň, aby ste vytvorili dokonalé zarovnanie, ktoré potrebujete. Napríklad sme odstránili padding-topštítok na našej vrstve rádiových vstupov, aby sme lepšie zarovnali základňu textu.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Horizontálna veľkosť štítku formulára

Uistite sa, že používate .col-form-label-smalebo .col-form-label-lgna vaše <label>s alebo <legend>s, aby ste správne dodržiavali veľkosť .form-control-lga .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Dimenzovanie stĺpcov

Ako je uvedené v predchádzajúcich príkladoch, náš mriežkový systém vám umožňuje umiestniť ľubovoľný počet .cols v rámci a .rowalebo .form-row. Rovnomerne rozdelia dostupnú šírku medzi seba. Môžete si tiež vybrať podmnožinu svojich stĺpcov, aby zaberali viac alebo menej miesta, zatiaľ čo zvyšné .cols rovnomerne rozdelia zvyšok so špecifickými triedami stĺpcov, ako je .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Automatické nastavenie veľkosti

V nižšie uvedenom príklade sa používa nástroj flexbox na vertikálne vycentrovanie obsahu a zmeny .coltak .col-auto, aby vaše stĺpce zaberali len toľko miesta, koľko je potrebné. Inak povedané, veľkosť stĺpca závisí od obsahu.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Potom to môžete znova zmiešať s triedami stĺpcov špecifických pre veľkosť.

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

A samozrejme sú podporované vlastné ovládacie prvky formulárov .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline formuláre

Použite .form-inlinetriedu na zobrazenie série štítkov, ovládacích prvkov formulárov a tlačidiel v jednom vodorovnom riadku. Ovládacie prvky formulárov v rámci vložených formulárov sa mierne líšia od ich predvolených stavov.

Ovládacie prvky sú display: flex, ktoré zbaľujú akýkoľvek prázdny priestor HTML a umožňujú vám poskytovať kontrolu zarovnania pomocou nástrojov pre medzery a flexbox .
Ovládacie prvky a vstupné skupiny dostanú width: autona prepísanie predvoleného nastavenia Bootstrap width: 100%.
Ovládacie prvky sa zobrazujú vložené iba vo výrezoch, ktoré sú široké aspoň 576 pixelov , aby sa zohľadnili úzke výrezy na mobilných zariadeniach.

Možno budete musieť manuálne upraviť šírku a zarovnanie jednotlivých ovládacích prvkov formulára pomocou nástrojov na nastavenie medzier (ako je uvedené nižšie). Nakoniec nezabudnite vždy zahrnúť ku <label>každému ovládaciemu prvku formulára, aj keď ho potrebujete skryť pred návštevníkmi, ktorí nepoužívajú čítačku obrazovky, pomocou .sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Podporované sú aj ovládacie prvky a výbery vlastných formulárov.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

Alternatívy k skrytým štítkom

Pomocné technológie, ako sú čítačky obrazovky, budú mať problémy s formulármi, ak nezahrniete štítok pre každý vstup. Pre tieto vložené formuláre môžete štítky skryť pomocou .sr-onlytriedy. Existujú ďalšie alternatívne spôsoby poskytovania označenia pre asistenčné technológie, ako napríklad atribút aria-label, aria-labelledbyalebo . titleAk nie je prítomný žiadny z nich, asistenčné technológie sa môžu uchýliť k použitiu placeholderatribútu, ak je prítomný, ale všimnite si, že použitie placeholderako náhrady za iné metódy označovania sa neodporúča.

Pomocný text

Text pomoci na úrovni bloku vo formulároch je možné vytvoriť pomocou .form-text(predtým známeho ako .help-blockv3). Inline pomocný text môže byť flexibilne implementovaný pomocou akéhokoľvek vloženého HTML elementu a pomocných tried ako .text-muted.

Priradenie pomocného textu k ovládacím prvkom formulára

Text pomocníka by mal byť explicitne spojený s ovládacím prvkom formulára, na ktorý sa vzťahuje pomocou aria-describedbyatribútu. Tým sa zabezpečí, že asistenčné technológie – ako napríklad čítačky obrazovky – oznámia tento text pomocníka, keď používateľ zaostrí alebo vstúpi do ovládacieho prvku.

Text pomocníka pod vstupmi je možné upraviť pomocou .form-text. Táto trieda obsahuje display: blocka pridáva určitý horný okraj pre ľahké rozstupy od vyššie uvedených vstupov.

heslo Vaše heslo musí mať 8 až 20 znakov, musí obsahovať písmená a čísla a nesmie obsahovať medzery, špeciálne znaky ani emotikony.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

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

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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>

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>

Upozornenie s kotvami

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-*">, budú mať iba štýl pointer-events: none. Ako je uvedené v časti o zakázanom stave pre tlačidlá (a konkrétne v podsekcii pre prvky kotvy), táto vlastnosť CSS ešte nie je štandardizovaná a nie je plne podporovaná v programe Internet Explorer 10. Ovládacie prvky založené na kotve budú tiež zaostriteľné a ovládateľné pomocou klávesnice. Tieto ovládacie prvky musíte manuálne upraviť pridaním tabindex="-1", aby ste im zabránili v zaostrovaní a aria-disabled="disabled"signalizovali ich stav asistenčným technológiám.

Kompatibilita medzi prehliadačmi

disabledZatiaľ čo Bootstrap použije tieto štýly vo všetkých prehliadačoch, Internet Explorer 11 a nižšie tento atribút plne nepodporujú <fieldset>. Na zakázanie sady polí v týchto prehliadačoch použite vlastný JavaScript.

Validácia

Poskytnite svojim používateľom hodnotnú spätnú väzbu, ktorú možno vykonať, pomocou overenia formulára HTML5 – dostupného vo všetkých našich podporovaných prehliadačoch . Vyberte si z predvolenej spätnej väzby na overenie prehliadača alebo implementujte vlastné správy pomocou našich vstavaných tried a spúšťacieho JavaScriptu.

Sme si vedomí toho, že v súčasnosti nie sú prístupné vlastné štýly overovania a popisy na strane klienta, pretože nie sú vystavené asistenčným technológiám. Kým pracujeme na riešení, odporúčame použiť buď možnosť na strane servera, alebo predvolený spôsob overenia prehliadača.

Overenie skupiny vstupov

Skupiny vstupov majú, žiaľ, problémy so štýlmi overovania. Naše odporúčanie je umiestniť správy spätnej väzby ako súrodenecké prvky súboru .input-group, ktorý má .is-{valid|invalid}. Umiestnenie správ so spätnou väzbou v rámci vstupných skupín porušuje border-radius. Pozrite si toto riešenie .

Ako to funguje

Tu je návod, ako funguje overenie formulára s Bootstrap:

Overenie formulára HTML sa používa prostredníctvom dvoch pseudotried CSS :invalida :valid. Vzťahuje sa na prvky <input>, <select>, a <textarea>.
Bootstrap rozsahy štýlov :invalida :validna nadradenú .was-validatedtriedu, zvyčajne aplikované na <form>. V opačnom prípade sa akékoľvek povinné pole bez hodnoty pri načítaní stránky zobrazí ako neplatné. Týmto spôsobom si môžete vybrať, kedy ich chcete aktivovať (zvyčajne po pokuse o odoslanie formulára).
Ak chcete obnoviť vzhľad formulára (napríklad v prípade dynamického odosielania formulárov pomocou AJAX), po odoslaní znova odstráňte .was-validatedtriedu z formulára.<form>
Namiesto pseudotried na overenie na strane servera sa môžu použiť triedy .is-invalida . Nevyžadujú rodičovskú triedu..is-valid.was-validated
Kvôli obmedzeniam v spôsobe fungovania CSS nemôžeme (v súčasnosti) použiť štýly na <label>prvok, ktorý sa nachádza pred ovládacím prvkom formulára v DOM bez pomoci vlastného JavaScriptu.
Všetky moderné prehliadače podporujú rozhranie API na overenie obmedzení , sériu metód JavaScriptu na overenie ovládacích prvkov formulárov.
Správy spätnej väzby môžu využívať predvolené nastavenia prehliadača (odlišné pre každý prehliadač a nestylovateľné cez CSS) alebo naše vlastné štýly spätnej väzby s dodatočným HTML a CSS.
Môžete poskytnúť vlastné správy o platnosti setCustomValidityv jazyku JavaScript.

Vzhľadom na to zvážte nasledujúce ukážky našich vlastných štýlov overovania formulárov, voliteľných tried na strane servera a predvolených nastavení prehliadača.

Vlastné štýly

Pre vlastné správy na overenie formulára Bootstrap budete musieť pridať novalidatebooleovský atribút do súboru <form>. Toto zakáže predvolené popisy spätnej väzby prehliadača, ale stále poskytuje prístup k rozhraniam API na overenie formulárov v jazyku JavaScript. Skúste odoslať formulár nižšie; náš JavaScript zachytí tlačidlo Odoslať a odošle vám spätnú väzbu. Pri pokuse o odoslanie uvidíte štýly :invalida použité na ovládacie prvky formulára.:valid

Vlastné štýly spätnej väzby používajú vlastné farby, orámovanie, štýly zamerania a ikony pozadia na lepšiu komunikáciu spätnej väzby. Ikony pozadia pre <select>s sú dostupné len s .custom-select, a nie s .form-control.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Predvolené nastavenia prehliadača

Nemáte záujem o vlastné správy so spätnou väzbou na overenie alebo písanie JavaScriptu na zmenu správania formulárov? Všetko v poriadku, môžete použiť predvolené nastavenia prehliadača. Skúste odoslať formulár nižšie. V závislosti od vášho prehliadača a operačného systému uvidíte trochu iný štýl spätnej väzby.

Aj keď tieto štýly spätnej väzby nemožno upravovať pomocou CSS, text spätnej väzby môžete prispôsobiť pomocou JavaScriptu.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Strana servera

Odporúčame použiť overenie na strane klienta, ale v prípade, že požadujete overenie na strane servera, môžete označiť neplatné a platné polia formulára pomocou .is-invalida .is-valid. Všimnite si, že .invalid-feedbackje to podporované aj týmito triedami.

V prípade neplatných polí skontrolujte, či je neplatná spätná väzba/chybová správa priradená k príslušnému poľu formulára pomocou aria-describedby. Tento atribút umožňuje idodkazovať na viac ako jeden v prípade, že pole už ukazuje na ďalší text formulára.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Podporované prvky

Štýly overenia sú dostupné pre nasledujúce ovládacie prvky formulárov a komponenty:

<input>s a <textarea>s.form-control
<select>s .form-controlalebo.custom-select
.form-checks
.custom-checkboxs a .custom-radios
.custom-file

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Popisy

Ak to rozloženie formulára umožňuje, môžete triedy zameniť .{valid|invalid}-feedbackza .{valid|invalid}-tooltiptriedy, aby sa zobrazila spätná väzba na overenie v štýlovom popise. Uistite sa, že máte na position: relativeňom rodiča na umiestnenie popisku. V nižšie uvedenom príklade to už naše triedy stĺpcov majú, ale váš projekt môže vyžadovať alternatívne nastavenie.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Prispôsobovanie

Stavy overenia je možné prispôsobiť cez Sass s $form-validation-statesmapou. Táto mapa Sass, ktorá sa nachádza v našom _variables.scsssúbore, sa prepne do slučky, aby sa vygenerovali predvolené valid/ invalidoverovacie stavy. Súčasťou je vnorená mapa na prispôsobenie farby a ikony každého štátu. Hoci prehliadače nepodporujú žiadne iné stavy, prehliadače používajúce vlastné štýly môžu jednoducho pridať komplexnejšiu spätnú väzbu k formulárom.

Upozorňujeme, že neodporúčame upravovať tieto hodnoty bez toho, aby ste upravili aj form-validation-statemix.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Alternatívne riešenie overenia skupiny vstupov

Z dôvodu obmedzení selektora nedokážeme vyriešiť prerušenie border-radiusskupín vstupov overením, takže je potrebné manuálne prepísanie. Keď používate štandardnú vstupnú skupinu a neprispôsobujete predvolené hodnoty polomeru okraja, pridajte .rounded-rightk prvkom s prerušeným border-radius.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Vyberte používateľské meno.

Keď používate malú alebo veľkú vstupnú skupinu alebo prispôsobujete predvolené border-radiushodnoty, pridajte vlastný CSS do prvku s prerušeným border-radius.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Vyberte používateľské meno.

Vlastné formuláre

Pre ešte väčšie prispôsobenie a konzistenciu medzi prehliadačmi použite naše úplne vlastné prvky formulára, ktoré nahradia predvolené nastavenia prehliadača. Sú postavené na sémantickom a prístupnom označení, takže sú solídnou náhradou akéhokoľvek predvoleného ovládacieho prvku formulára.

Zaškrtávacie políčka a rádiá

Každé začiarkavacie políčko, rádio <input>a <label>párovanie sú zabalené do jedného <div>, aby sme vytvorili vlastné ovládanie. Štrukturálne je to rovnaký prístup ako náš predvolený .form-check.

Používame selektor súrodenca ( ~) pre všetky naše <input>stavy – napríklad – na :checkedsprávny štýl nášho vlastného indikátora formulára. V kombinácii s .custom-control-labeltriedou môžeme tiež štýlovať text pre každú položku na základe stavu <input>'.

Predvolené nastavenie skryjeme <input>a opacitypoužijeme .custom-control-labelna vytvorenie nového vlastného indikátora formulára na jeho mieste pomocou ::beforea ::after. Bohužiaľ nemôžeme vytvoriť vlastný, <input>pretože CSS contentna tomto prvku nefungujú.

V zaškrtnutých stavoch používame base64 vložené ikony SVG od Open Iconic . To nám poskytuje najlepšiu kontrolu nad štýlom a umiestnením v rôznych prehliadačoch a zariadeniach.

Začiarkavacie políčka

Začiarknite toto vlastné začiarkavacie políčko

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Vlastné začiarkavacie políčka môžu tiež využívať :indeterminatepseudo triedu, keď sú manuálne nastavené pomocou JavaScriptu (nie je k dispozícii žiadny atribút HTML na jej špecifikáciu).

Začiarknite toto vlastné začiarkavacie políčko

Ak používate jQuery, niečo také by malo stačiť:

$('.your-checkbox').prop('indeterminate', true)

Rádia

Prepnúť toto vlastné rádio

Alebo prepnite toto iné vlastné rádio

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

V rade

Prepnúť toto vlastné rádio

Alebo prepnite toto iné vlastné rádio

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Zakázané

Vlastné začiarkavacie políčka a rádiá môžu byť tiež zakázané. Pridajte disabledbooleovský atribút do <input>a vlastný indikátor a popis štítka sa automaticky upravia.

Začiarknite toto vlastné začiarkavacie políčko

Prepnúť toto vlastné rádio

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Prepínače

Prepínač má označenie vlastného začiarkavacieho políčka, ale používa .custom-switchtriedu na vykreslenie prepínača. Prepínače tiež podporujú disabledatribút.

Prepnite tento prepínací prvok

Deaktivovaný prepínací prvok

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Vlastné <select>ponuky potrebujú iba vlastnú triedu .custom-selectna spustenie vlastných štýlov. Vlastné štýly sú obmedzené na <select>počiatočný vzhľad a nemôžu upravovať <option>s kvôli obmedzeniam prehliadača.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Môžete si tiež vybrať z malých a veľkých vlastných výberov, ktoré zodpovedajú našim textovým vstupom podobnej veľkosti.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Atribút multipleje tiež podporovaný:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Rovnako ako sizeatribút:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Rozsah

Vytvorte si vlastné <input type="range">ovládacie prvky pomocou .custom-range. Skladba (pozadie) a palec (hodnota) majú rovnaký štýl vo všetkých prehliadačoch. Keďže iba IE a Firefox podporujú „vypĺňanie“ ich stopy z ľavej alebo pravej strany palca ako prostriedok na vizuálne označenie pokroku, v súčasnosti to nepodporujeme.

Príklad rozsahu

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Vstupy rozsahu majú implicitné hodnoty pre mina max— 0a 100. Môžete zadať nové hodnoty pre tých, ktorí používajú atribúty mina .max

Príklad rozsahu

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

V predvolenom nastavení sa vstupy rozsahu „prichytávajú“ na celočíselné hodnoty. Ak to chcete zmeniť, môžete zadať stephodnotu. V nižšie uvedenom príklade zdvojnásobíme počet krokov pomocou step="0.5".

Príklad rozsahu

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Prehliadač súborov

Odporúčaný plugin na animáciu vlastného vstupu súboru: bs-custom-file-input , to je to, čo momentálne používame tu v našich dokumentoch.

Vstup súboru je najdrsnejší zo všetkých a vyžaduje si dodatočný JavaScript, ak ho chcete spojiť s funkčným výberom súboru … a vybraným textom názvu súboru.

Vyberte súbor

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Skryjeme predvolený súbor <input>cez opacitya namiesto toho naštylujeme <label>. Tlačidlo je vygenerované a umiestnené s ::after. Nakoniec deklarujeme a widtha heightna <input>pre správne medzery pre okolitý obsah.

Preklad alebo prispôsobenie reťazcov pomocou SCSS

:lang()Pseudotrieda sa používa na umožnenie prekladu textu „Prehľadávať“ do iných jazykov. Prepíšte alebo pridajte položky do $custom-file-textpremennej Sass pomocou príslušnej jazykovej značky a lokalizovaných reťazcov. Anglické struny je možné prispôsobiť rovnakým spôsobom. Tu je napríklad návod, ako možno pridať preklad do španielčiny (kód jazyka v španielčine je es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Tu je lang(es)akcia týkajúca sa vlastného vstupu súboru pre španielsky preklad:

Výber archívu

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Aby sa zobrazil správny text, musíte správne nastaviť jazyk dokumentu (alebo jeho podstromu). Môžete to urobiť okrem iného pomocou atribútu langna prvku <html>alebo Content-Languagehlavičky HTTP .

Preklad alebo prispôsobenie reťazcov pomocou HTML

Bootstrap tiež poskytuje spôsob, ako preložiť text „Prehľadávať“ do HTML s data-browseatribútom, ktorý možno pridať k vlastnému vstupnému štítku (príklad v holandčine):

Voeg je dokumentová špička

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

Formuláre

Prehľad

Ovládacie prvky formulára

Dimenzovanie

Iba na čítanie

Čistý text len ​​na čítanie

Rozsah vstupov

Zaškrtávacie políčka a rádiá

Predvolené (zoskupené)

V rade

Bez štítkov

Rozloženie

Vytvárajte skupiny

Mriežka formulára

Riadok formulára

Horizontálny tvar

Horizontálna veľkosť štítku formulára

Dimenzovanie stĺpcov

Automatické nastavenie veľkosti

Inline formuláre

Alternatívy k skrytým štítkom

Pomocný text

Priradenie pomocného textu k ovládacím prvkom formulára

Zakázané formuláre

Upozornenie s kotvami

Kompatibilita medzi prehliadačmi

Validácia

Overenie skupiny vstupov

Ako to funguje

Vlastné štýly

Predvolené nastavenia prehliadača

Strana servera

Podporované prvky

Popisy

Prispôsobovanie

Alternatívne riešenie overenia skupiny vstupov

Vlastné formuláre

Zaškrtávacie políčka a rádiá

Začiarkavacie políčka

Rádia

V rade

Zakázané

Prepínače

Vyberte ponuku

Rozsah

Prehliadač súborov

Preklad alebo prispôsobenie reťazcov pomocou SCSS

Preklad alebo prispôsobenie reťazcov pomocou HTML

Čistý text len na čítanie