Lekce 10 - Bootstrap - Další možnosti formulářů

V minulé lekci, Bootstrap - Formuláře, jsme začali s formuláři v Bootstrapu.

V dnešním CSS tutoriálu Bootstrapu budeme pokračovat s tématem formulářů. Tentokrát se zaměříme na klientské validace, vlastní styly a skupiny inputů.

Validace v Bootstrapu

Další silnou stránkou Bootstrap formulářů jsou klientské validace. Pokud je k prvkům definujeme, Bootstrap nám pomůže s obarvením špatně vyplněných ovládacích prvků a zobrazí k nim chybové hlášky. Interně je k tomu využíváno pseudotříd :invalid a :valid, podle kterých se formulář obarví, pokud je na něj použita třída .was-validated. Třídu nám Bootstrap přidá automaticky po odeslání formuláře.

V ukázce níže zobrazujeme vlastní hlášky při klientské validaci. Před tím musíme vypnout výchozí hlášky prohlížeče typu "Musíte vyplnit toto pole.", a to přidáním atributu novalidate="novalidate" elementu <form>. K zobrazení hlášek použijeme vlastní JavaScriptovou funkci:

<form id="needs-validation" novalidate="novalidate">
    <div>
        <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>
        <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ýsledek:

Když JavaScript vynecháme, dojde k postupnému vyvolání hlášek tak, jak je zobrazuje prohlížeč a nebudou vypsány všechny najednou. Zkusme si identický kód bez skriptu a bez atributu novalidate:

Serverová validace

Pokud bychom chtěli formulář takto obarvit i při serverové validaci, přidáme jeho prvkům třídy .is-valid a .is-invalid. V tu chvíli již formulář nemusí mít třídu .was-validated.

Serverovou validaci bychom měli vždy provádět, jelikož na klientskou validaci se nelze spolehnout! Klientská validace je pouze zpříjemnění validace pro uživatele tím, že získají chybovou hlášku ještě než se formulář odešle na server.

Klientskou validaci můžeme dále ovlivnit i v JavaScriptu, viz metoda setCustomValidity().

Vlastní styly

Vzhled checkboxů, radiobuttonů, fileinputů a selectů se často přebírá z operačního systému nebo výchozího nastavení prohlížeče, které nevypadá nejlépe. Proto Bootstrap přináší možnost ostylovat i tyto ovládací prvky plně po svém. Docílí toho třídami .form-check, .form-select a .form-control.

Třída .form-check se používá pro stylování standardních kontrolních prvků, jako jsou zaškrtávací políčka (checkboxes). Tato třída zajistí, že tyto prvky budou mít konzistentní vzhled napříč různými prohlížeči a zařízeními. Pro použití je nutné tuto třídu přiřadit ke kontejneru, který obaluje samotný vstupní prvek <input> a jeho popisek <label>. Příklad použití může vypadat takto:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">Souhlasím s obchodními podmínkami</label>
</div>

Tento kód vytvoří standardní zaškrtávací políčko s popiskem.

Třída .form-switch se používá pro vytvoření přepínačů, které jsou vizuálně odlišné od standardních zaškrtávacích políček a nabízejí uživatelům jiný způsob interakce. Tyto prvky jsou často používány pro zapínání a vypínání nastavení. Třídu .form-switch přidáme do stejného kontejneru jako .form-check, aby se změnil vzhled kontrolního prvku. Podobně jako zaškrtávací políčka, i přepínače používají .form-check-input pro vlastní vstupní prvek.

Formulář s ostylovanými prvky vypadá následovně:

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

U checkboxů přiřazujeme elementu <input> třídu .form-check-input a přidruženému elementu <label> třídu .form-check-label. Checkboxy stále podporují vlastnost indeterminate, která na checkboxu způsobí, že není ani zaškrtnutý ani nezaškrtnutý (je na něm vykreslen symbol pomlčky -). Tuto vlastnost je třeba nastavit přes JavaScript. Pro radiobuttony používáme stejné třídy: .form-check-input pro <input> a .form-check-label pro <label>. Pro výběrové pole <select> používáme .form-select. Pro vstupní pole typu file aplikujeme třídu .form-control přímo na element <input type="file">.

Výsledek v prohlížeči:

Custom controls se řadí vedle sebe. Chceme-li je místo toho uspořádat vertikálně, je třeba je obalit do <div> prvků, kde každý ovládací prvek bude v samostatném <div> s třídou .form-check. Tato třída zajišťuje správné vykreslení a uspořádání prvků pod sebou.

Skupiny inputů

Input groups nám v CSS frameworku Bootstrap umožňují vkládat další elementy jako jsou texty nebo tlačítka vedle textových polí. Takové inputy jsme již viděli v lekci Bootstrap - Formuláře, ale podrobněji jsme si je ještě nepopisovali. Udělejme si základní ukázku:

<div>
    <div class="input-group">
        <span class="input-group-text" 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>
    <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-text" id="email-addon">@itnetwork.cz</span>
    </div>
</div>

Input vložíme do divu se třídou .input-group. Text vložíme na levou nebo pravou stranu inputu pomocí elementu <span> se třídou .input-group-text. Není podporované vkládání dalších textových polí nebo labelů.

Výsledek:

Velikosti

Pro změnu velikosti inputu přiřadíme elementu <div> se třídou .input-group jednu z následujících tříd:

• .input-group-lg pro velkou velikost,
• žádnou pro standardní velikost,
• .input-group-sm pro malou velikost.

Další addony

Addonů můžeme na strany přidat více za sebe. Kromě textových addonů, které jsme viděli výše, můžeme přidávat také checkboxy, radiobuttony, tlačítka a dropdowny. Podívejme se na ukázku s pokročilejšími addony:

<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">Tlačítko</button>
    <input type="text" class="form-control" aria-label="Ukázkový 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="#">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>

Pro správnou funkčnost dropdown tlačítek nezapomeňme nalinkovat Bootstrap JavaScript. Výsledek v prohlížeči:

Dropdown můžeme i tzv. segmentovat, tedy rozdělit na dvě samostatná tlačítka, kdy větší tlačítko funguje zcela samostatně a jen menší tlačítko otevírá nabídku:

<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">Rozbalit Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Položka 1</a></li>
            <li><a class="dropdown-item" href="#">Položka 2</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Položka 3</a></li>
    </ul>
</div>

Výsledek:

Pokud bychom dropdown vložili na levou stranu, nepřidáváme menu třídu .dropdown-menu-end. Tím jsme formuláře dokončili

V následujícím cvičení, Řešené úlohy k 9.-10. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.