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

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

V dnešním CSS tutoriálu budeme s tímto tématem pokračovat a také jej dokončíme. Čekají nás klientské validace, vlastní styly a skupiny inputů.

Validace

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 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ýsledek:

Když JavaScript vynecháte, 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 vnitřně jejich skrytím přes opacity: 0. Elementu <label> přiřadíme třídu .custom-control a nové prvky místo těch skrytých přidáme jako elementy <span> se třídami .custom-control-indicator a .custom-control-description.

Formulář s ostylovanými prvky by měl následující 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 checkboxů přiřazujeme elementu <label> třídu .custom-checkbox a elementu <input> třídu .custom-control-input. Checkboxy podporují i vlastnost indeterminate, která na checkboxu způsobí, že není ani zaškrtnutý ani nezaškrtnutý (je na něm vykreslen symbol pomlčky -). Vlastnost je elementu případně třeba nastavit přes JavaScript. U radiobuttonů přiřazujeme elementu <label> třídu .custom-radio, inputu opět třídu .custom-control-input. Elementu <select> nastavujeme třídu .custom-select a inputům typu file třídu custom-file-input a jeden <span> se třídou .custom-file-control.

Výsledek:

Pokud byste chtěli přeložit text u inputu na výběr souboru, je závislý na definici jazyka stránky pomocí atributu lang elementu <html> a na textech nastavených v SASS zdrojových kódech Bootstrapu, konkrétně proměnná $custom-file-text. Ve výchozím buildu se bohužel custom file input renderuje pouze pro jazyk en.

Custom controls se řadí vedle sebe. Pokud je chceme dát pod sebe, je třeba je vkládat do divů jako v ukázce výše. Použili jsme zde třídu .form-group. Bootstrap poskytuje také třídu .custom-controls-stacked, kdy není třeba vkládat každý ovládací prvek do samostatného divu, ale stačí je vložit do jednoho divu, kterému tuto třídu přiřadíme.

Skupiny inputů

Input groups nám v CSS frameworku Bootstrap umožňují vkládat další elementy jako jsou texty nebo tlačítka na strany textových inputů. Tato rozšíření pojmenoval addons. Takové inputy jsme již viděli v lekci o formulářích, ale podrobněji jsme si je ještě nepopisovali. Udělejme si základní ukázku:

<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 se třídou .input-group. Text vložíme na levou nebo pravou stranu inputu pomocí elementu <span> se třídou .input-group-addon. 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-smpro 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. Udělejme si druhou ukázku 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>

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

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

<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ýsledek:

Pokud byste dropdown vložili na levou stranu, nepřidávejte menu třídu .dropdown-menu-right. 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í.