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 u prvků definujeme, Bootstrap nám pomůže s obarvením špatně vyplněných ovládacích prvků, k nimž navíc zobrazí chybové hlášky. Interně k tomu framework využívá pseudotřídy :invalid a :valid, podle kterých se formulář obarví, je-li 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ředtí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">E-mail</label>
        <input type="text" class="form-control" id="formular-email" placeholder="[email protected]" required="required">
        <div class="invalid-feedback">
            Zadejte prosím validní e-mailovou 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ář 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 provádět vždy, protože na klientskou validaci se nelze spoléhat! Klientská validace slouží pouze ke zlepšení uživatelského komfortu – uživatel je na chybu upozorněn ještě před odesláním formuláře 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íme 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á k vytvoření přepínačů, které jsou vizuálně odlišné od standardních zaškrtávacích políček a které nabízejí uživatelům jiný způsob interakce. Tyto prvky jsou často používány k 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 pomocí JavaScriptu. 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ů

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. Začněme základní ukázkou:

<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 prvku <div> s třídou .input-group. Text vložíme na levou nebo pravou stranu inputu pomocí elementu <span> s třídou .input-group-text. Vkládání dalších textových polí nebo labelů není podporované.

Výsledek:

Velikosti

Pro změnu velikosti inputu přiřadíme elementu <div> s 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 sebou. 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 CSS a JavaScript:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

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í.