Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

10. diel - Bootstrap - Ďalšie možnosti formulárov

V minulej lekcii, Bootstrap - Formuláre , sme načal formuláre v Bootstrap. V dnešnom CSS tutoriálu budeme s touto témou pokračovať a tiež ho dokončíme. Čakajú nás klientske validácie, vlastné štýly a skupiny inputov.

Validácia

Ďalšou silnou stránkou Bootstrap formulárov sú klientske validácie. Ak je k prvkom definujeme, Bootstrap nám pomôže s sfarbením zle vyplnených ovládacích prvkov a zobrazí k nim chybové hlášky. Interne je k tomu využívané pseudotried :invalid a :valid, podľa ktorých sa formulár zafarbia, ak je na neho použitá trieda .was-validated. Triedu nám Bootstrap pridá automaticky po odoslaní formulára.

V ukážke nižšie zobrazujeme vlastné hlášky pri klientskej validáciu. Pred tým musíme vypnúť predvolené hlášky prehliadača typu "Musíte vyplniť toto pole." a to pridaním atribútu novalidate="novalidate" elementu <form>. K zobrazenie hlášok použijeme vlastné javascriptové funkciu.

<form id="needs-validation" novalidate="novalidate">
    <div class="form-group">
        <label for="formular-jmeno">Jméno</label>
        <input type="text" class="form-control" id="formular-jmeno" placeholder="Jan Novák" required="required">
        <div class="invalid-feedback">
            Zadejte prosím své celé jméno.
        </div>
    </div>
    <div class="form-group">
        <label for="formular-email">Email</label>
        <input type="text" class="form-control" id="formular-email" placeholder="[email protected]" required="required">
        <div class="invalid-feedback">
            Zadejte prosím validní emailovou adresu.
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Odeslat</button>
</form>

<script>
(function() {
    'use strict';

    window.addEventListener('load', function() {
        var form = document.getElementById('needs-validation');
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    }, false);
})();
</script>

výsledok:

Validace v Bootstrap
formular_vali­dace.html

Keď JavaScript vynecháte, dôjde k postupnému vyvolaniu hlášok tak, ako ich zobrazuje prehliadač a nebudú vypísané všetky naraz. Skúsme si identický kód bez skriptu a bez atribútu novalidate:

Validace v Bootstrap
formular_vali­dace.html

Serverová validácia

Ak by sme chceli formulár takto zafarbiť aj pri serverové validácii, pridáme jeho prvkom triedy .is-valid a .is-invalid. V tej chvíli už formulár nemusí mať triedu .was-validated.

Serverovú validáciu by sme mali vždy vykonávať, keďže na klientskú validácii sa nedá spoľahnúť! Klientská validácie je len spríjemnenie validácia pre užívateľov tým, že získajú chybovú hlášku ešte než sa formulár odošle na server.

Klientskú validáciu môžeme ďalej ovplyvniť aj v JavaScripte, pozri metódu setCustomValidity().

Vlastné štýly

Vzhľad checkboxov, radiobuttonov, fileinputů a Selecta sa často preberá z operačného systému alebo východiskového nastavenia prehliadača, ktoré nevyzerá najlepšie. Preto Bootstrap prináša možnosť ostylovat aj tieto ovládacie prvky plne po svojom. Docieli toho vnútorne ich skrytím cez opacity: 0. Elementu <label> priradíme triedu .custom-control a nové prvky miesto tých skrytých pridáme ako elementy <span> sa triedami .custom-control-indicator a .custom-control-description.

Formulár s ostylovanými prvkami by mal nasledujúci zdrojový kód:

<form>
    <div class="form-check">
        <label class="custom-control custom-checkbox">
            <input class="custom-control-input" type="checkbox" value="">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Souhlasím s obchodními podmínkami</span>
        </label>
    </div>
    <div class="form-check">
        <label class="custom-control custom-radio">
            <input class="custom-control-input" type="radio" name="platebni-metoda" id="platebni-metoda1" value="kartou" checked>
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Platba kartou</span>
        </label>
    </div>
    <div class="form-check">
        <label class="custom-control custom-radio">
            <input class="custom-control-input" type="radio" name="platebni-metoda" id="platebni-metoda2" value="prevodem" checked>
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Platba převodem</span>
        </label>
    </div>
    <div class="form-group">
        <label for="formular-select">Velikost</label>
        <select class="custom-select" id="formular-select">
            <option>S</option>
            <option>M</option>
            <option>L</option>
            <option>XL</option>
        </select>
    </div>
    <div class="form-group">
        <label class="custom-file">
            <input type="file" class="custom-file-input">
            <span class="custom-file-control"></span>
        </label>
    </div>
</form>

U checkboxov priraďujeme elementu <label> triedu .custom-checkbox a elementu <input> triedu .custom-control-input. Checkboxy podporujú aj vlastnosť indeterminate, ktorá na checkboxu spôsobí, že nie je ani zaškrtnutý ani zrušiť výber (je na ňom vykreslený symbol pomlčky -). Vlastnosť je elementu prípadne potrebné nastaviť cez JavaScript. U radiobuttonov priraďujeme elementu <label> triedu .custom-radio, inputu opäť triedu .custom-control-input. Elementu <select> nastavujeme triedu .custom-select a inputům typu file triedu custom-file-input a jeden <span> sa triedou .custom-file-control.

výsledok:

Validace v Bootstrap
formular_vali­dace.html

Ak by ste chceli preložiť text u inputu na výber súboru, je závislý na určenie jazyka stránky pomocou atribútu lang elementu <html> a na textoch nastavených v SASS zdrojových kódoch Bootstrap, konkrétne premenná $custom-file-text. V predvolenom buildu sa bohužiaľ custom file input renderuje len pre jazyk en.

Custom controls sa radí vedľa seba. Ak ich chceme dať pod seba, treba ich vkladať do divov ako v ukážke vyššie. Použili sme tu triedu .form-group. Bootstrap poskytuje tiež triedu .custom-controls-stacked, kedy nie je potrebné vkladať každý ovládací prvok do samostatného divu, ale stačí ich vložiť do jedného divu, ktorému túto triedu priradíme.

Skupiny inputov

Input groups nám v CSS frameworku Bootstrap umožňujú vkladať ďalšie elementy ako sú texty alebo tlačidlá na strany textových inputov. Tieto rozšírenia pomenoval addons. Také Input sme už videli v lekcii o formulároch, ale podrobnejšie sme si ich ešte neopisovali. Urobme si základné ukážku:

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon" id="adresa-addon">itnetwork.cz/</span>
        <input type="text" class="form-control" placeholder="název článku" aria-label="Název článku" aria-describedby="adresa-addon">
    </div>
</div>

<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="vaše jméno" aria-label="Vaše jméno" aria-describedby="email-addon">
        <span class="input-group-addon" id="email-addon">@itnetwork.cz</span>
    </div>
</div>

Input vložíme do divu sa triedou .input-group. Text vložíme na ľavú alebo pravú stranu inputu pomocou elementu <span> sa triedou .input-group-addon. Nie je podporované vkladanie ďalších textových polí alebo labelov.

výsledok:

Input groups v Bootstrap
input_groups.html

Veľkosti

Pre zmenu veľkosti inputu priradíme elementu <div> sa triedou .input-group jednu z nasledujúcich tried:

  • .input-group-lg pre veľkú veľkosť
  • žiadnu pre štandardnú veľkosť
  • .input-group-sm pre malú veľkosť

Ďalšie addony

Addon môžeme na strany pridať viac za seba. Okrem textových addon, ktoré sme videli vyššie, môžeme pridávať tiež checkboxy, RadioButton, tlačidlá a dropdown. Urobme si druhú ukážku s pokročilejšími addony.

<div class="input-group">
    <span class="input-group-addon" id="checkbox-addon">
        <input type="checkbox" aria-label="Checkbox">
    </span>
    <span class="input-group-addon" id="text-addon">Text</span>
    <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Tlačítko</button>
    </span>
    <input type="text" class="form-control" aria-label="Ukázkový input">
    <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Položka 1</a>
            <a class="dropdown-item" href="#">Položka 2</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Položka 3</a>
        </div>
    </div>
</div>

Pre správnu funkčnosť dropdown tlačidiel nezabudnite nalinkovať Bootstrap JavaScript. Výsledok v prehliadači:

Input groups v Bootstrap
pokrocile_input_grou­ps.html

Dropdown môžeme i tzv. Segmentovať, teda rozdeliť na 2 samostatné tlačidlá, kedy väčšie tlačidlo funguje úplne samostatne a len menšie tlačidlo otvára ponuku:

<div class="input-group-btn">
    <button type="button" class="btn btn-secondary">Dropdown</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Rozbalit Dropdown</span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <a class="dropdown-item" href="#">Položka 1</a>
        <a class="dropdown-item" href="#">Položka 2</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Položka 3</a>
    </div>
</div>

výsledok:

Input groups v Bootstrap
segmentovany_drop­down.html

Ak by ste dropdown vložili na ľavú stranu, nepridávajte menu triedu .dropdown-menu-right. Tým sme formuláre dokončili :) Nabudúce, v lekcii Kvíz - Tabuľky a tlačidlá v Bootstrap , na nás čaká komponenta Jumbotron a naučíme sa používať Bootstrap odznaky.

V nasledujúcom kvíze, Kvíz - Tabuľky a tlačidlá v Bootstrap, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.


 

Predchádzajúci článok
Bootstrap - Formuláre
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Kvíz - Tabuľky a tlačidlá v Bootstrap
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
1 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity