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

V minulej lekcii, Bootstrap - Formuláre, sme začali s formulármi v Bootstrape.

V dnešnom CSS tutoriále Bootstrapu budeme pokračovať s témou formulárov. Tentoraz sa zameriame na klientske validácie, vlastné štýly a skupiny inputov.

Validácia v Bootstrape

Ďalšou silnou stránkou Bootstrap formulárov sú klientske validácie. Pokiaľ ich k prvkom definujeme, Bootstrap nám pomôže s zafarbením zle vyplnených ovládacích prvkov a zobrazí k nim chybové hlášky. Interne sa na to využíva pseudotried :invalid a :valid, podľa ktorých sa formulár zafarbí, ak je naň 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ácii. Predtý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>. Na zobrazenie hlášok použijeme vlastnú JavaScriptovú funkciu:

<form id="needs-validation" novalidate="novalidate">
    <div>
        <label for="form-name">Name</label>
        <input type="text" class="form-control" id="form-name" placeholder="John Doe" required="required">
        <div class="invalid-feedback">
            Please enter your full name.
        </div>
    </div>
    <div>
        <label for="form-email">Email</label>
        <input type="text" class="form-control" id="form-email" placeholder="[email protected]" required="required">
        <div class="invalid-feedback">
            Please enter a valid email address.
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</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:

Keď JavaScript vynecháme, 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:

Serverová validácia

Pokiaľ by sme chceli formulár takto zafarbiť aj pri serverovej 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ť, pretože na klientsku validáciu sa nemožno spoľahnúť! Klientska validácia je iba spríjemnenie validácie 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, viď metóda setCustomValidity().

Vlastné štýly

Vzhľad checkboxov, rádiobuttonov, fileinputov a selectov sa často preberá z operačného systému alebo predvoleného nastavenia prehliadača, ktoré nevyzerá najlepšie. Preto Bootstrap prináša možnosť ostylovat aj tieto ovládacie prvky plne po svojom. Docieli to triedami .form-check, .form-select a .form-control.

Trieda .form-check sa používa na štylovanie štandardných kontrolných prvkov, ako sú zaškrtávacie políčka (checkboxes). Táto trieda zaistí, že tieto prvky budú mať konzistentný vzhľad naprieč rôznymi prehliadačmi a zariadeniami. Na použitie je nutné túto triedu priradiť ku kontajneru, ktorý obaľuje samotný vstupný prvok <input> a jeho popis <label>. Príklad použitia môže vyzerať takto:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">I agree to the terms and conditions</label>
</div>

Tento kód vytvorí štandardné začiarkavacie políčko s popisom.

Trieda .form-switch sa používa na vytvorenie prepínačov, ktoré sú vizuálne odlišné od štandardných zaškrtávacích políčok a ponúkajú užívateľom iný spôsob interakcie. Tieto prvky sa často používajú na zapínanie a vypínanie nastavení. Triedu .form-switch pridáme do rovnakého kontajnera ako .form-check, aby sa zmenil vzhľad kontrolného prvku. Podobne ako zaškrtávacie políčka, aj prepínače používajú .form-check-input pre vlastný vstupný prvok.

Formulár s ostylovanými prvkami vyzerá nasledovne:

<form>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="customCheck1">
        <label class="form-check-label" for="customCheck1">
            I agree to the terms and conditions
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="payment-method" id="payment-method1" value="card" checked>
        <label class="form-check-label" for="payment-method1">
            Pay by card
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="payment-method" id="payment-method2" value="transfer" checked>
        <label class="form-check-label" for="payment-method2">
            Pay by transfer
        </label>
    </div>
    <div>
        <label for="form-select">Size</label>
        <select class="form-select" id="form-select">
            <option>S</option>
            <option>M</option>
            <option>L</option>
            <option>XL</option>
        </select>
    </div>
    <div>
        <label for="customFile" class="form-label">Upload file</label>
        <input type="file" class="form-control" id="customFile">
    </div>
</form>

Pri checkboxoch priraďujeme elementu <input> triedu .form-check-input a pridruženému elementu <label> triedu .form-check-label. Checkboxy stále podporujú vlastnosť indeterminate, ktorá na checkboxe spôsobí, že nie je ani zaškrtnutý ani nezaškrtnutý (je na ňom vykreslený symbol pomlčky -). Túto vlastnosť je potrebné nastaviť cez JavaScript. Pre rádiobuttóny používame rovnaké triedy: .form-check-input pre <input> a .form-check-label pre <label>. Pre výberové pole <select> používame .form-select. Pre vstupné pole typu file aplikujeme triedu .form-control priamo na element <input type="file">.

Výsledok v prehliadači:

Custom controls sa radí vedľa seba. Ak ich chceme namiesto toho usporiadať vertikálne, treba ich obaliť do <div> prvkov, kde každý ovládací prvok bude v samostatnom <div> s triedou .form-check. Táto trieda zaisťuje správne vykreslenie a usporiadanie prvkov pod sebou.

Skupiny inputov

Input groups nám v CSS frameworku Bootstrap umožňujú vkladať ďalšie elementy ako sú texty alebo tlačidlá vedľa textových polí. Takéto inputy sme už videli v lekcii Bootstrap - Formuláre, ale podrobnejšie sme si ich ešte nepopisovali. Urobme si základnú ukážku:

<div>

    <div class="input-group">
        <span class="input-group-text" id="addresss-addon">ictdemy.com/</span>
        <input type="text" class="form-control" placeholder="article title" aria-label="Article title" aria-describedby="address-addon">
    </div>
</div>

<div>

    <div class="input-group">
        <input type="text" class="form-control" placeholder="your name" aria-label="Your name" aria-describedby="email-addon">
        <span class="input-group-text" id="email-addon">@ictdemy.com</span>
    </div>
</div>

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

Výsledok:

Veľkosti

Pre zmenu veľkosti inputu priradíme elementu <div> s 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

Addonov môžeme na strany pridať viac za seba. Okrem textových addonov, ktoré sme videli vyššie, môžeme pridávať aj checkboxy, rádiobuttony, tlačidlá a dropdowny. Pozrime sa na ukážku s pokročilejšími addonmi:

<div class="input-group">
    <span class="input-group-text" id="checkbox-addon">
        <input type="checkbox" aria-label="Checkbox">
    </span>
    <span class="input-group-text" id="text-addon">Text</span>
    <button class="btn btn-secondary" type="button">Button</button>
    <input type="text" class="form-control" aria-label="Sample input">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Item 1</a>
        <a class="dropdown-item" href="#">Item 2</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Item 3</a>
    </div>
</div>

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

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

<div class="input-group">
    <button type="button" class="btn btn-secondary">Dropdown</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Collapse Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Item 1</a></li>
            <li><a class="dropdown-item" href="#">Item 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Item 3</a></li>
    </ul>
</div>

Výsledok:

Pokiaľ by sme dropdown vložili na ľavú stranu, nepridávame menu triedu .dropdown-menu-end. Tým sme formuláre dokončili

V nasledujúcom cvičení, Riešené úlohy k 9.-10. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.