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="your@email.com">
        <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 jedinečné ID. Aby nedochádzalo ku kolíziám v prípade viacerých formulárov na jednej stránke, zvyčajne 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ť, či sa formulár skutočne zalomí. Všimnime si použitie triedy .form-text na malý text s nápovedou.

Checkboxy a radiobuttony

Pokiaľ potrebujeme do formulára vložiť checkbox, vkladáme ho celý do labelu, aby sa dalo kliknúť na popis aj 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 š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="">
            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 radiobuttony

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 to 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", Bootstrap ho bude štýlovať ako šedý a samozrejme hodnota v ňom sa nebude dať zmeniť. Pokiaľ nemáme v obľube ortodoxný XML, stačí atribút uviesť aj bez hodnoty len ako readonly. To platí pre všetky ďalšie HTML atribúty v kurze. Neaktívne <inputy> je tiež možné vykresliť len ako obyčajný text bez ovládacieho prvku. To docielime pridaní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ť voči vybraniu tabulátorom pomocou atribútu tabindex="-1" ako sme si hovorili v lekcii Bootstrap - Tlačidlá.

Mriežka

Ovládacie prvky sú štýlované 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 grid (mriežku). 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, čo sme docielili 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ú popisy správne zarovnané s ostatnými prvkami formulára. Podobne môžeme štýlovať aj elementy <legend> priradením triedy .col-form-legend. Pre rôzne veľkosti ovládacích prvkov môžeme nastavovať rôzne veľkosti aj 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 poziciovanie v takomto formulári teda používame utility triedy pre okraje alebo utility triedy pre flexbox, ktoré nájdeme ď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 blokovom formulári, na takýto text použijeme triedu .text-muted. Tú zvyčajne priraďujeme elementu <small>. Trieda .form-text je iba pre blokové formuláre.

V ďalšej 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.