Lekce 9 - Bootstrap - Formuláře

V dnešním tutoriálu frameworku Bootstrap se vrhneme vůbec na nejrozsáhlejší téma Bootstrapu, kterým jsou formuláře.

Formuláře v Bootstrapu

Právě styly formulářů jsou kromě gridu asi to nejlákavější na CSS frameworku Bootstrap. Jsou responzivní, vypadají hezky a ovládací prvky jsou v každém prohlížeči stejně velké a dokonce i stejně vypadají, pokud použijeme custom styly. Jednotlivým ovládacím prvkům přiřazujeme třídu .form-control. Poté je obalujeme obvykle spolu s elementem <label> do elementu <div>.

Úplně základní formulář vytvoříme například takto:

<form>
    <div>
        <label for="prihlaseni-email">Email</label>
        <input type="email" class="form-control" id="prihlaseni-email" aria-describedby="popisEmailu" placeholder="[email protected]">
        <small class="form-text text-muted">Kromě emailu můžete zadat i své telefonní číslo.</small>
    </div>
    <div>
        <label for="prihlaseni-heslo">Heslo</label>
        <input type="password" class="form-control" id="prihlaseni-heslo">
    </div>
    <button type="submit" class="btn btn-primary">Přihlásit</button>
</form>

Pro spárování elementů <label> a <input> přiřazujeme každému formulářovému prvku unikátní ID. Aby nedocházelo ke kolizím v případě více formulářů na jedné stránce, obvykle tato ID předsazujeme názvem formuláře. V ukázce výše je to prihlaseni-. Pokud na <label> poté klikneme, označí se daný formulářový prvek.

Výsledek:

Můžeme si zkusit zmenšit okno prohlížeče a vyzkoušet, že se formulář opravdu zalomí. Všimněme si použití třídy .form-text pro malý text s nápovědou.

Checkboxy a radiobuttony

Pokud potřebujeme na formulář vložit checkbox, vkládáme jej celý do labelu, aby se dalo klikat jak na popisek, tak na políčko. U checkboxů využíváme tříd .form-check, .form-check-label a .form-check-input.

Může být matoucí, že ty samé třídy používáme i pro stylování radiobuttonů.

Udělejme si přehlídku dalších prvků:

<form>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value="">
            Souhlasím s obchodními podmínkami
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="platebni-metoda" id="platebni-metoda1" value="kartou" checked>
            Platba kartou
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="platebni-metoda" id="platebni-metoda2" value="prevodem" checked>
            Platba převodem
        </label>
    </div>
</form>

A výsledek:

Další třídy pro checkboxy a radiobuttony

Pokud bychom vložili více checkboxů za sebou, budou se řadit pod sebe. Toto chování můžeme změnit přidáním třídy .form-check-inline ke třídě .form-check. I když bychom se rozhodli nezadat text labelu, element <label> v kódu stále ponecháváme a samotnému inputu bychom v tomto případě přiřadili třídu .position-static.

Selecty, textarea a file inputy

Elementy <select> a <textarea> vkládáme tak, jako jsme byli zvyklí doposud. Stejně tak u inputů typu file, k nimž přiřazujeme třídu .form-control:

<form>
    <div>
        <label for="ukazka-velikost">Velikost</label>
        <select class="form-control" id="ukazka-velikost">
            <option>S</option>
            <option>M</option>
            <option>L</option>
            <option>XL</option>
        </select>
    </div>
    <div>
        <label for="ukazka-poznamka">Poznámka</label>
        <textarea class="form-control" id="ukazka-poznamka" rows="3"></textarea>
    </div>
    <div>
        <label for="ukazka-soubor">Životopis</label>
        <input type="file" class="form-control" id="ukazka-soubor">
    </div>
</form>

Výsledek:

Velikosti

Stejně jako tomu bylo u tlačítek, tak i u formulářových polí můžeme jejich velikost ovlivnit přiřazením jedné z následujících tříd:

• .form-control-lg - velká velikost,
• pro standardní velikost přiřazujeme pouze třídu .form-control,
• .form-control-sm - malá velikost.

Třídu .form-control přiřazujeme vždy.

Neaktivní inputy

Pokud přidáme elementu <input> atribut readonly="readonly", bude Bootstrapem ostylován jako zašedlý a samozřejmě hodnota v něm nepůjde měnit. Pokud si nelibujeme v ortodoxním XML, stačí atribut uvést i bez hodnoty jen jako readonly. To platí pro všechny další HTML atributy v kurzu. Je také možné neaktivní <inputy> vykreslit jen jako prostý text bez ovládacího prvku. Toho docílíme dodáním třídy .form-control-plaintext, atribut readonly samozřejmě přidáváme také. Podobně můžeme element zneaktivnit přidáním atributu disabled="disabled".

Rozdíl mezi readonly a disabled je, že disabled elementy se neodesílají na server a nelze je ani označit klávesou Tab. Pomocí atributu disabled můžeme zakázat i všechny ovládací prvky v elementu <fieldset> pokud mu je přiřadíme. Pokud jsou v zneaktivněném fieldsetu tlačítka definována elementem <a>, měli bychom je pro jistotu zneaktivnit proti vybrání tabulátorem pomocí atributu tabindex="-1" jako jsme si říkali v lekci Bootstrap - Tlačítka.

Mřížka

Ovládací prvky jsou ostylované jako bloky, roztahují se tedy přes celou šířku stránky. Pokud máme nějaký komplexní formulář, může být výhodné umístit více ovládacích prvků na jeden řádek, například pole pro zadání jména a příjmení. Kdyby byla všechna pole dlouhého formuláře jen pod sebou, vypadal by ještě delší než je nutné a uživatele by odrazoval od jeho vyplnění. K těmto účelům využijeme gridu (mřížky), ke které se ještě dostaneme během kurzu. Zatím si zmiňme, že nám umožňuje definovat mřížku podobně jako například elementem <table>, při zmenšení okna se ovšem elementy zalomí a zarovnají pod sebe. Tabulka je tedy responzivní:

<form>
    <div class="row">
        <div class="col-2">
            <label for="registrace-jmeno">Jméno</label>
            <input type="text" class="form-control" placeholder="Jméno" id="registrace-jmeno">
        </div>
        <div class="col">
            <label for="registrace-prijmeni">Příjmení</label>
            <input type="text" class="form-control" placeholder="Příjmení" id="registrace-prijmeni">
        </div>
    </div>
</form>

V kódu zabírá jméno 2x tolik prostoru než příjmení, docílili jsme toho pomocí třídy .col-2. Samozřejmě můžeme používat i další čísla nebo nastavit stejnou velikost jen třídou .col. Pomocí třídy .col-auto můžeme také vynutit, aby komponenta zabírala jen tolik místa, kolik je nezbytné. Ukázka výše vypadá v prohlížeči následovně:

Třída .row efektivně pracuje s mřížkovým systémem Bootstrapu, umožňuje flexibilní rozložení prvků formuláře a zajišťuje jejich responzivní chování. Pro přizpůsobení šířky sloupců můžeme využít další třídy mřížkového systému, jako jsou .col-, .col-sm-, .col-md- a tak dál, podle toho, jak chceme, aby náš formulář vypadal a fungoval na různých zařízeních.

Elementům <label> v tomto případě přiřazujeme třídu .col-form-label, která zajišťuje, že budou popisky správně zarovnány s ostatními prvky formuláře. Podobně můžeme stylovat i elementy <legend> přiřazením třídy .col-form-legend. Pro různé velikosti ovládacích prvků můžeme nastavovat i různé velikosti labelům a to přiřazením třídy .col-form-label-sm nebo .col-form-label-lg. Po zmenšení formuláře se labely v ukázce níže zalomí:

K tomu všemu se ale opravdu dostaneme až u lekce o grid systému

Inline formuláře

Menší formuláře může být někdy výhodné umístit do řádku. Například v internetových obchodech je takto často řešené filtrování produktů. Formulář vykreslíme do řádku pomocí flexbox utility tříd Bootstrapu. Na malých viewportech se prvky opět zalomí pod sebe. Pro dosažení zobrazení v řádku použijeme .d-flex a další související utility třídy pro flexbox, které nám umožní efektivně řídit rozložení prvků formuláře. K pozicování v takovém formuláři tedy používáme utility třídy pro okraje nebo utility třídy pro flexbox, viz dále v kurzu. V inline formulářích často skrýváme labely pomocí třídy .visually-hidden, elementy <label> do formulářů ovšem umisťujeme vždy:

Pokud bychom potřebovali v inline formuláři malý text s nápovědou, jako jsme si ukazovali u bokového formuláře, použijeme na takový text třídu .text-muted. Tu obvykle přiřazujeme elementu <small>. Třída .form-text je pouze pro blokové formuláře.

V příští lekci, Bootstrap - Další možnosti formulářů, budeme pokračovat s klientskou validací, vlastním vzhledem pro checkboxy a dalšími prvky a skupinami inputů.