Lekce 9 - Bootstrap - Formuláře

V předchozím kvízu, Kvíz - Tabulky a tlačítka v Bootstrap, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

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

Formuláře v Bootstrapu

Právě styly formulářů jsou kromě gridu asi to nejlákavější, co CSS framework Bootstrap nabízí. 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">E-mail</label>
        <input type="email" class="form-control" id="prihlaseni-email" aria-describedby="popisEmailu" placeholder="[email protected]">
        <small class="form-text text-muted">Kromě e-mailu 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 mít ve formuláři checkbox, vkládáme jej celý do labelu, aby bylo možné klikat jak na popisek, tak na políčko. U checkboxů využíváme třídy .form-check, .form-check-label a .form-check-input.

Může být matoucí, že tytéž 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">
            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 v případě, že se rozhodneme nezadávat text labelu, element <label> v kódu stále ponecháme a samotnému inputu v tomto případě přiřadíme třídu .position-static.

Selecty, textarea a file inputy

Elementy <select> a <textarea> vkládáme tak, jak 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é 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", 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. Neaktivní <inputy> je také možné vykreslit jen jako prostý text bez ovládacího prvku. Toho docílíme dodáním třídy .form-control-plaintext, přičemž 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. Jestliže 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", jak 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í. Pokud by byla všechna pole rozsáhlého formuláře jen pod sebou, působil by ještě delším dojmem, než je nutné, a uživatele by odrazoval od vyplnění. K těmto účelům využijeme grid (mřížku). Zatím si zmiňme, že nám Bootstrap umožňuje definovat mřížku podobně jako například tabulku elementem <table>, při zmenšení okna se však elementy zalomí a zarovnají pod sebe. Mřížka 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 dvakrát více prostoru než příjmení, čehož jsme docílili 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ále – 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 popisky budou 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í:

<body>
   <form>
      <div class="row">
         <label for="registrace-jmeno" class="col-sm-2 col-form-label">Jméno</label>
         <div class="col-sm-10">
            <input type="email" class="form-control" id="registrace-jmeno" placeholder="Jméno">
         </div>
      </div>
   </form>
</body>

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 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ářů však umisťujeme vždy:

<body>
   <form class="d-flex flex-wrap">
      <div class="mb-2 me-sm-2">
         <label class="visually-hidden" for="inline-formular-jmeno">Jméno</label>
         <input type="text" class="form-control" id="inline-formular-jmeno" placeholder="Jan Novák">
      </div>
      <div class="mb-2 me-sm-2">
         <label class="visually-hidden" for="inline-formular-domena">Doména</label>
         <div class="input-group">
            <span class="input-group-text">www.</span>
            <input type="text" class="form-control" id="inline-formular-domena" placeholder="domena.cz">
         </div>
      </div>
      <div class="form-check mb-2 me-sm-2">
         <input class="form-check-input" type="checkbox" id="inline-formular-checkbox">
         <label class="form-check-label" for="inline-formular-checkbox">I nezaplacené domény</label>
      </div>
      <button type="submit" class="btn btn-primary mb-2">Vyhledat</button>
   </form>
</body>

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

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