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 so zafarbením zle vyplnených ovládacích prvkov a zobrazí k nim chybové hlášky. Interne sa na to využívajú pseudotriedy :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ú JavaScript 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="john@doe.com" 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. Vyskúšajme si rovnaký 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. Vtedy už formulár nemusí mať triedu .was-validated.

Serverovú validáciu by sme mali vykonávať vždy, 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.

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

Vlastné štýly

Vzhľad checkboxov, radiobuttonov, 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ť štýlovať aj tieto ovládacie prvky po svojom. Docieli to triedami .form-check, .form-select a .form-control.

Trieda .form-check sa používa na štýlovanie štandardných kontrolných prvkov, ako sú začiarkavacie políčka (checkboxes). Táto trieda zaistí, že budú mať prvky 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>. Môže to 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čiarkavací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čiarkavacie políčka, aj prepínače používajú .form-check-input pre vlastný vstupný prvok.

Formulár s naštýlovaný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čiarkntý ani nezačiarknutý (je na ňom vykreslený symbol pomlčky -). Túto vlastnosť je potrebné nastaviť cez JavaScript. Pre radiobuttony 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 zaradzujú 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. Pozrime sa na 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. Vkladanie ďalších textových polí alebo labelov nie je podporované.

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 pridať na strany viac za seba. Okrem textových addonov, ktoré sme videli vyššie, môžeme pridávať aj checkboxy, radiobuttony, 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 ponuku otvára to menšie tlačidlo:

<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. Tak a formuláre máme dokončené

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