9. diel - Bootstrap - Formuláre

V predchádzajúcom kvíze, Kvíz - Tabuľky a tlačidlá v Bootstrap, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriále frameworku Bootstrap sa vrhneme vôbec na najrozsiahlejšiu tému Bootstrapu, ktorou sú formuláre.

Formuláre v Bootstrape

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ú, pokiaľ použijeme custom štýly. Jednotlivým ovládacím prvkom priraďujeme triedu .form-control. Potom ich obaľujeme obvykle spolu s elementom <label> do elementu <div>.

Úplne základný formulár vytvoríme napríklad takto:

<form>
    <div>
        <label for="login-email">Email</label>
        <input type="email" class="form-control" id="login-email" aria-describedby="emailDescription" placeholder="[email protected]">
        <small class="form-text text-muted">You can type in your phone number instead of an email address.</small>
    </div>
    <div>
        <label for="login-password">Password</label>
        <input type="password" class="form-control" id="login-password">
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
</form>

Na spárovanie elementov <label> a <input> priraďujeme každému formulárovému prvku unikátne ID. Aby nedochádzalo ku kolíziám v prípade viacerých formulárov na jednej stránke, obvykle tieto ID predsadzujeme názvom formulára. V ukážke vyššie je to login-. Pokiaľ na <label> potom klikneme, označí sa daný formulárový prvok.

Výsledok:

Môžeme si skúsiť zmenšiť okno prehliadača a vyskúšať, že sa formulár skutočne zalomí. Všimnime si použitie triedy .form-text pre malý text s pomocníkom.

Checkboxy a rádiobuttóny

Pokiaľ potrebujeme na formulár vložiť checkbox, vkladáme ho celý do labelu, aby sa dalo klikať ako na popis, tak na políčko. Pri checkboxoch využívame triedy .form-check, .form-check-label a .form-check-input.

Môže byť mätúce, že tie isté triedy používame aj na štylovanie rádiobuttonov.

Urobme si prehliadku ďalších prvkov:

<form>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value="">
            I agree to the terms and conditions
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="payment-method" id="payment-method1" value="card" checked>
            Pay by card
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="payment-method" id="payment-method2" value="transfer" checked>
            Pay by transfer
        </label>
    </div>
</form>

A výsledok:

Ďalšie triedy pre checkboxy a rádiobuttony

Pokiaľ 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 nezadať 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.

Selecty, textarea a file inputy

Elementy <select> a <textarea> vkladáme tak, ako sme boli zvyknutí doteraz. Rovnako pri inputoch typu file, ku ktorým priraďujeme triedu .form-control:

<form>
    <div>
        <label for="example-size">Size</label>
        <select class="form-control" id="example-size">
            <option>S</option>
            <option>M</option>
            <option>L</option>
            <option>XL</option>
        </select>
    </div>
    <div>
        <label for="example-note">Note</label>
        <textarea class="form-control" id="example-note" rows="3"></textarea>
    </div>
    <div>
        <label for="example-file">Resume</label>
        <input type="file" class="form-control" id="example-file">
    </div>
</form>

Výsledok:

Veľkosti

Rovnako ako tomu bolo pri tlačidlách, tak aj pri formulárových poliach môžeme ich veľkosť ovplyvniť priradením jednej z nasledujúcich 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 inputy

Pokiaľ pridáme elementu <input> atribút readonly="readonly", bude Bootstrapom ostylovaný ako zašednutý a samozrejme hodnota v ňom nepôjde meniť. Pokiaľ nemáme rád v ortodoxnom 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 neodosielajú na server a nemožno ich ani označiť klávesom Tab. Pomocou atribútu disabled môžeme zakázať aj všetky ovládacie prvky v elemente <fieldset> pokiaľ mu ich priradíme. Pokiaľ sú v zneaktívnenom fieldsete tlačidlá definované elementom <a>, mali by sme ich pre istotu zneaktívniť proti vybraniu tabulátorom pomocou atribútu tabindex="-1" ako sme si hovorili v lekcii Bootstrap - Tlačidlá.

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íklad pole na zadanie mena a priezviska. Keby boli všetky polia dlhého formulára len pod sebou, vyzeral by ešte dlhší ako je nutné a používateľa by odrádzal od jeho vyplnenia. Na tieto účely využijeme gridu (mriežky). Zatiaľ si spomeňme, že nám umožňuje definovať mriežku podobne ako napríklad elementom <table>, pri zmenšení okna sa však elementy zalomia a zarovnajú pod seba. Tabuľka je teda responzívna:

<form>
    <div class="row">
        <div class="col-2">
            <label for="registration-firstname">First Name</label>
            <input type="text" class="form-control" placeholder="First Name" id="registration-firstname">
        </div>
        <div class="col">
            <label for="registration-lastname">Last Name</label>
            <input type="text" class="form-control" placeholder="Last Name" id="registration-lastname">
        </div>
    </div>
</form>

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

Trieda .row efektívne pracuje s mriežkovým systémom Bootstrapu, umožňuje flexibilné rozloženie prvkov formulára a zaisťuje ich responzívne správanie. Na prispôsobenie šírky stĺpcov môžeme využiť ďalšie triedy mriežkového systému, ako sú .col-, .col-sm-, .col-md- a tak ďalej, podľa toho, ako chceme, aby náš formulár vyzeral a fungoval na rôznych zariadeniach.

Elementom <label> v tomto prípade priraďujeme triedu .col-form-label, ktorá zaisťuje, že budú popisky správne zarovnané s ostatnými prvkami formulára. Podobne môžeme štylovať 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 labelom a to priradením triedy .col-form-label-sm alebo .col-form-label-lg. Po zmenšení formulára sa labely v ukážke nižšie zalomia:

Inline formuláre

Menšie formuláre môže byť niekedy výhodné umiestniť do riadka. Napríklad v internetových obchodoch je takto často riešené filtrovanie produktov. Formulár vykreslíme do riadku pomocou flexbox utility tried Bootstrapu. Na malých viewportoch sa prvky opäť zalomia pod seba. Na dosiahnutie zobrazenia v riadku použijeme .d-flex a ďalšie súvisiace utility triedy pre flexbox, ktoré nám umožnia efektívne riadiť rozloženie prvkov formulára. Na 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 .visually-hidden, 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 pri bokovom formulári, použijeme na takýto text triedu .text-muted. Tú obvykle priraďujeme elementu <small>. Trieda .form-text je iba pre blokové formuláre.

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.