Lekce 9 - Bootstrap - Formuláře

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

Formuláře

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>. Tomu přiřadíme třídu .form-group.

Úplně základní formulář bychom mohli vytvořit např. takto:

<form>
    <div class="form-group">
        <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 class="form-group">
        <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ůžete si zkusit zmenšit okno prohlížeče a vyzkoušet, že se formulář opravdu zalomí. Všimněte si použití třídy .form-text pro malý text s nápovědou. Ve starších verzích Bootstrapu můžete třídu nalézt ještě jako .help-block.

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. Místo .form-group využíváme u checkboxů třídy .form-check, dále tříd .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 jste byli zvyklí doposud. Co se týká inputů typu file, tak k nim nepřiřazujeme třídu .form-control, ale místo ní třídu .form-control-file.

<form>
    <div class="form-group">
        <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 class="form-group">
        <label for="ukazka-poznamka">Poznámka</label>
        <textarea class="form-control" id="ukazka-poznamka" rows="3"></textarea>
    </div>
    <div class="form-group">
        <label for="ukazka-soubor">Životopis</label>
        <input type="file" class="form-control-file" 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 nelibujete 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 o tlačítkách.

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ř. 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ř. elementem <table>, při zmenšení okna se ovšem elementy zalomí a zarovnají pod sebe. Tabulka je tedy responzivní.

<form>
    <div class="form-row">
        <div class="form-group col-2">
            <label for="registrace-jmeno">Jméno</label>
            <input type="text" class="form-control" placeholder="Jméno" id="registrace-jmeno">
        </div>
        <div class="form-group 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ůžete 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ě:

Místo třídy .form-row bychom mohli použít i standardní třídu .row, mezera mezi prvky by byla ovšem větší, což u formuláře nevypadá tak dobře. Pokud je váš formulář ještě složitější, můžete využít dalších tříd Bootstrap grid systému a nastavovat kolik má který sloupec zabírat místa a podobně. Toho můžeme využít k inteligentnímu umístění labelů vedle prvků, pokud je nechceme mít nad nimi. Elementům <label> v tomto případě přiřazujeme třídu .col-form-label. 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ř. v internetových obchodech je takto často řešené filtrování produktů. Formulář vykreslíme do řádku přidáním třídy .form-inline k elementu <form>. Na malých viewportech se prvky opět zalomí pod sebe. Pokud bychom do takového formuláře potřebovali přidávat ještě nějaké své elementy, měli bychom vědět, že je zobrazení v řádku docíleno pomocí display: flex. 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 .sr-only, 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ů.