9. diel - Bootstrap - Formuláre

V predchádzajúcom cvičení, Riešené úlohy k 7.-8. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 7.-8. lekciu Bootstrap CSS frameworku , sme tlačidlami začali prehliadku komponentov CSS frameworku Bootstrap. V dnešnej lekcii sa vrhneme vôbec na najrozsiahlejšie tému Bootstrap, ktorým sú formuláre.

Formuláre

Práve štýly formulárov sú okrem gridu asi to najlákavejšie na CSS frameworku Bootstrap. Sú responzívne, vyzerajú pekne a ovládacie prvky sú v každom prehliadači rovnako veľké a dokonca aj rovnako vyzerajú, ak použijeme custom štýly. Jednotlivým ovládacím prvkom priraďujeme triedu .form-control. Potom je obaľujeme zvyčajne spolu s elementom <label> do elementu <div>. Tomu priradíme triedu .form-group.

Úplne základná formulár by sme mohli vytvoriť napr. Nasledovne:

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

Pre škárovanie elementov <label> a <input> priraďujeme každému formulářovému prvku unikátne ID. Aby nedochádzalo ku kolíziám v prípade viac formulárov na jednej stránke, zvyčajne táto ID předsazujeme názvom formulára. V ukážke vyššie je to prihlaseni-. Pokiaľ na <label> potom klikneme, označí sa daný prvok formulára.

výsledok:

Môžete si skúsiť zmenšiť okno prehliadača a vyskúšať, že sa formulár naozaj zalomí. Všimnite si použitie triedy .form-text pre malý text s nápovedou. V starších verziách Bootstrap môžete triedu nájsť ešte ako .help-block.

Checkboxy a RadioButton

Ak potrebujeme na formulár vložiť checkbox, vkladáme ho celý do labelu, aby sa dalo klikať ako na popisok, tak na políčko. Namiesto .form-group využívame u checkboxov triedy .form-check, ďalej tried .form-check-label a .form-check-input. Môže byť mätúce, že tie isté triedy používame aj pre štýlovanie radiobuttonov.

Urobme si prehliadku ďalších prvkov:

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

Ďalšie triedy pre checkboxy a RadioButton

Ak by sme vložili viac checkboxov za sebou, budú sa radiť pod seba. Toto správanie môžeme zmeniť pridaním triedy .form-check-inline k triede .form-check. Aj keď by sme sa rozhodli neuzavrieť text labelu, element <label> v kóde stále ponechávame a samotnému inputu by sme v tomto prípade priradili triedu .position-static.

Selecta, textarea a file input

Elementy <select> a <textarea> vkladáme tak, ako ste boli zvyknutí doteraz. Čo sa týka inputov typu file, tak k nim nepriraďuje triedu .form-control, ale namiesto nej triedu .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ýsledok:

Veľkosti

Rovnako ako tomu bolo u tlačidiel, tak iu formulárových polí môžeme ich veľkosť ovplyvniť priradením jednej z týchto tried:

• .form-control-lg - Veľká veľkosť
• Pre štandardnú veľkosť priraďujeme iba triedu .form-control
• .form-control-sm - Malá veľkosť

Triedu .form-control priraďujeme vždy.

Neaktívne Input

Ak pridáme elementu <input> atribút readonly="readonly", bude Bootstrap ostylován ako zašednutý a samozrejme hodnota v ňom nepôjde meniť. Ak nemá záľubu v ortodoxným XML, stačí atribút uviesť aj bez hodnoty len ako readonly. To platí pre všetky ďalšie HTML atribúty v kurze. Je tiež možné neaktívne <inputy> vykresliť len ako obyčajný text bez ovládacieho prvku. To docielime dodaním triedy .form-control-plaintext, atribút readonly samozrejme pridávame tiež. Podobne môžeme element zneaktívniť pridaním atribútu disabled="disabled".

Rozdiel medzi readonly a disabled je, že disabled elementy sa neposielajú na server a nemožno ich ani označiť klávesou tab. Pomocou atribútu disabled môžeme zakázať aj všetky ovládacie prvky v elemente <fieldset> pokiaľ mu je priradíme. Pokiaľ sú v zneaktívnená fieldsetu tlačidla definovaná elementom <a>, mali by sme ich pre istotu zneaktívniť proti vybrania tabulátorom pomocou atribútu tabindex="-1" ako sme si hovorili v lekcii o tlačidlách.

Mriežka

Ovládacie prvky sú ostylované ako bloky, rozťahujú sa teda cez celú šírku stránky. Ak máme nejaký komplexný formulár, môže byť výhodné umiestniť viac ovládacích prvkov na jeden riadok, napr. Pole pre zadanie mena a priezviska. Keby bola všetky polia dlhého formulára len pod sebou, vyzeral by ešte dlhšia ako je potrebné a užívateľov by odrádzal od jeho vyplnenie. K týmto účelom využijeme gridu (mriežky), ku ktorej sa ešte dostaneme počas kurzu. Zatiaľ si spomeňme, že nám umožňuje definovať mriežku podobne ako napr. Elementom <table>, pri zmenšení okna sa však elementy zalomia a zarovnajú pod seba. Tabuľka je teda responzívne.

<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óde zaberá meno 2x toľko priestoru ako priezvisko, docielili sme toho pomocou triedy .col-2. Samozrejme môžete používať aj ďalšie čísla alebo nastaviť rovnakú veľkosť len triedou .col. Pomocou triedy .col-auto môžeme tiež vynútiť, aby komponenta zaberala len toľko miesta, koľko je nevyhnutné. Ukážka vyššie vyzerá v prehliadači nasledovne:

Namiesto triedy .form-row by sme mohli použiť aj štandardné triedu .row, medzera medzi prvkami by bola však väčšia, čo u formuláre nevyzerá tak dobre. Ak je váš formulár ešte zložitejšie, môžete využiť ďalších tried Bootstrap grid systému a nastavovať koľko má ktorý stĺpec zaberať miesta a podobne. Toho môžeme využiť na inteligentnému umiestnenie labelov vedľa prvkov, ak ich nechceme mať nad nimi. Elementom <label> v tomto prípade priraďujeme triedu .col-form-label. Podobne môžeme stylovať aj elementy <legend> priradením triedy .col-form-legend. Pre rôzne veľkosti ovládacích prvkov môžeme nastavovať aj rôzne veľkosti labelům a to priradením triedy .col-form-label-sm alebo .col-form-label-lg. Po zmenšenie formulára sa labely v ukážke nižšie zalomí.

K tomu všetkému sa ale naozaj dostaneme až u lekcie o grid systému

Inline formuláre

Menšie formulára môže byť niekedy výhodné umiestniť do riadku. Napr. v internetových obchodoch je takto často riešené filtrovania produktov. Formulár vykreslíme do riadku pridaním triedy .form-inline k elementu <form>. Na malých Viewport sa prvky opäť zalomí pod seba. Ak by sme do takého formulára potrebovali pridávať ešte nejaké svoje elementy, mali by sme vedieť, že je zobrazenie v riadku docielené pomocou display: flex. K pozíciovanie v takomto formulári teda používame utility triedy pre okraje alebo utility triedy pre flexbox, viď ďalej v kurze. V inline formulároch často skrývame labely pomocou triedy .sr-only, elementy <label> do formulárov však umiestňujeme vždy.

Ak by sme potrebovali v inline formulári malý text s nápovedou, ako sme si ukazovali u bokového formulára, použijeme na takýto text triedu .text-muted. Tú zvyčajne priraďujeme elementu <small>. Trieda .form-text je len pre blokové formulára.

V budúcej lekcii, Bootstrap - Ďalšie možnosti formulárov , budeme pokračovať s klientskou validáciou, vlastným vzhľadom pre checkboxy a ďalšími prvkami a skupinami inputov.