10. diel - Bootstrap - Ďalšie možnosti formulárov
V minulej lekcii, Bootstrap - Formuláre , sme načal formuláre v Bootstrap. V dnešnom CSS tutoriálu budeme s touto témou pokračovať a tiež ho dokončíme. Čakajú nás klientske validácie, vlastné štýly a skupiny inputov.
Validácia
Ďalšou silnou stránkou Bootstrap formulárov sú klientske validácie. Ak
je k prvkom definujeme, Bootstrap nám pomôže s sfarbením zle vyplnených
ovládacích prvkov a zobrazí k nim chybové hlášky. Interne je k tomu
využívané pseudotried :invalid
a :valid
, podľa
ktorých sa formulár zafarbia, ak je na neho použitá trieda
.was-validated
. Triedu nám Bootstrap pridá automaticky po
odoslaní formulára.
V ukážke nižšie zobrazujeme vlastné hlášky pri klientskej validáciu.
Pred tým musíme vypnúť predvolené hlášky prehliadača typu "Musíte
vyplniť toto pole." a to pridaním atribútu
novalidate="novalidate"
elementu <form>
. K
zobrazenie hlášok použijeme vlastné javascriptové funkciu.
<form id="needs-validation" novalidate="novalidate"> <div class="form-group"> <label for="formular-jmeno">Jméno</label> <input type="text" class="form-control" id="formular-jmeno" placeholder="Jan Novák" required="required"> <div class="invalid-feedback"> Zadejte prosím své celé jméno. </div> </div> <div class="form-group"> <label for="formular-email">Email</label> <input type="text" class="form-control" id="formular-email" placeholder="[email protected]" required="required"> <div class="invalid-feedback"> Zadejte prosím validní emailovou adresu. </div> </div> <button class="btn btn-primary" type="submit">Odeslat</button> </form> <script> (function() { 'use strict'; window.addEventListener('load', function() { var form = document.getElementById('needs-validation'); form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }, false); })(); </script>
výsledok:
Keď JavaScript vynecháte, dôjde k postupnému vyvolaniu hlášok tak, ako
ich zobrazuje prehliadač a nebudú vypísané všetky naraz. Skúsme si
identický kód bez skriptu a bez atribútu novalidate
:
Serverová validácia
Ak by sme chceli formulár takto zafarbiť aj pri serverové validácii,
pridáme jeho prvkom triedy .is-valid
a .is-invalid
. V
tej chvíli už formulár nemusí mať triedu .was-validated
.
Serverovú validáciu by sme mali vždy vykonávať, keďže na klientskú validácii sa nedá spoľahnúť! Klientská validácie je len spríjemnenie validácia pre užívateľov tým, že získajú chybovú hlášku ešte než sa formulár odošle na server.
Klientskú validáciu môžeme ďalej ovplyvniť aj v JavaScripte, pozri
metódu setCustomValidity()
.
Vlastné štýly
Vzhľad checkboxov, radiobuttonov, fileinputů a Selecta sa často preberá z
operačného systému alebo východiskového nastavenia prehliadača, ktoré
nevyzerá najlepšie. Preto Bootstrap prináša možnosť ostylovat aj tieto
ovládacie prvky plne po svojom. Docieli toho vnútorne ich skrytím cez
opacity: 0
. Elementu <label>
priradíme triedu
.custom-control
a nové prvky miesto tých skrytých pridáme ako
elementy <span>
sa triedami
.custom-control-indicator
a
.custom-control-description
.
Formulár s ostylovanými prvkami by mal nasledujúci zdrojový kód:
<form> <div class="form-check"> <label class="custom-control custom-checkbox"> <input class="custom-control-input" type="checkbox" value=""> <span class="custom-control-indicator"></span> <span class="custom-control-description">Souhlasím s obchodními podmínkami</span> </label> </div> <div class="form-check"> <label class="custom-control custom-radio"> <input class="custom-control-input" type="radio" name="platebni-metoda" id="platebni-metoda1" value="kartou" checked> <span class="custom-control-indicator"></span> <span class="custom-control-description">Platba kartou</span> </label> </div> <div class="form-check"> <label class="custom-control custom-radio"> <input class="custom-control-input" type="radio" name="platebni-metoda" id="platebni-metoda2" value="prevodem" checked> <span class="custom-control-indicator"></span> <span class="custom-control-description">Platba převodem</span> </label> </div> <div class="form-group"> <label for="formular-select">Velikost</label> <select class="custom-select" id="formular-select"> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </div> <div class="form-group"> <label class="custom-file"> <input type="file" class="custom-file-input"> <span class="custom-file-control"></span> </label> </div> </form>
U checkboxov priraďujeme elementu <label>
triedu
.custom-checkbox
a elementu <input>
triedu
.custom-control-input
. Checkboxy podporujú aj vlastnosť
indeterminate
, ktorá na checkboxu spôsobí, že nie je ani
zaškrtnutý ani zrušiť výber (je na ňom vykreslený symbol pomlčky
-
). Vlastnosť je elementu prípadne potrebné nastaviť cez
JavaScript. U radiobuttonov priraďujeme elementu <label>
triedu .custom-radio
, inputu opäť triedu
.custom-control-input
. Elementu <select>
nastavujeme triedu .custom-select
a inputům typu file
triedu custom-file-input
a jeden <span>
sa
triedou .custom-file-control
.
výsledok:
Ak by ste chceli preložiť text u inputu na výber súboru, je závislý na
určenie jazyka stránky pomocou atribútu lang
elementu
<html>
a na textoch nastavených v SASS zdrojových kódoch
Bootstrap, konkrétne premenná $custom-file-text
. V
predvolenom buildu sa bohužiaľ custom file input renderuje len pre jazyk
en
.
Custom controls sa radí vedľa seba. Ak ich chceme dať pod
seba, treba ich vkladať do divov ako v ukážke vyššie. Použili sme tu
triedu .form-group
. Bootstrap poskytuje tiež triedu
.custom-controls-stacked
, kedy nie je potrebné vkladať každý
ovládací prvok do samostatného divu, ale stačí ich vložiť do jedného
divu, ktorému túto triedu priradíme.
Skupiny inputov
Input groups nám v CSS frameworku Bootstrap umožňujú vkladať ďalšie elementy ako sú texty alebo tlačidlá na strany textových inputov. Tieto rozšírenia pomenoval addons. Také Input sme už videli v lekcii o formulároch, ale podrobnejšie sme si ich ešte neopisovali. Urobme si základné ukážku:
<div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="adresa-addon">itnetwork.cz/</span> <input type="text" class="form-control" placeholder="název článku" aria-label="Název článku" aria-describedby="adresa-addon"> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="vaše jméno" aria-label="Vaše jméno" aria-describedby="email-addon"> <span class="input-group-addon" id="email-addon">@itnetwork.cz</span> </div> </div>
Input vložíme do divu sa triedou .input-group
. Text vložíme
na ľavú alebo pravú stranu inputu pomocou elementu <span>
sa triedou .input-group-addon
. Nie je podporované vkladanie
ďalších textových polí alebo labelov.
výsledok:
Veľkosti
Pre zmenu veľkosti inputu priradíme elementu <div>
sa
triedou .input-group
jednu z nasledujúcich tried:
.input-group-lg
pre veľkú veľkosť- žiadnu pre štandardnú veľkosť
.input-group-sm
pre malú veľkosť
Ďalšie addony
Addon môžeme na strany pridať viac za seba. Okrem textových addon, ktoré sme videli vyššie, môžeme pridávať tiež checkboxy, RadioButton, tlačidlá a dropdown. Urobme si druhú ukážku s pokročilejšími addony.
<div class="input-group"> <span class="input-group-addon" id="checkbox-addon"> <input type="checkbox" aria-label="Checkbox"> </span> <span class="input-group-addon" id="text-addon">Text</span> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Tlačítko</button> </span> <input type="text" class="form-control" aria-label="Ukázkový input"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Položka 1</a> <a class="dropdown-item" href="#">Položka 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Položka 3</a> </div> </div> </div>
Pre správnu funkčnosť dropdown tlačidiel nezabudnite nalinkovať Bootstrap JavaScript. Výsledok v prehliadači:
Dropdown môžeme i tzv. Segmentovať, teda rozdeliť na 2 samostatné tlačidlá, kedy väčšie tlačidlo funguje úplne samostatne a len menšie tlačidlo otvára ponuku:
<div class="input-group-btn"> <button type="button" class="btn btn-secondary">Dropdown</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Rozbalit Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Položka 1</a> <a class="dropdown-item" href="#">Položka 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Položka 3</a> </div> </div>
výsledok:
Ak by ste dropdown vložili na ľavú stranu, nepridávajte menu triedu
.dropdown-menu-right
. Tým sme formuláre dokončili Nabudúce, v lekcii Kvíz - Tabuľky a tlačidlá v Bootstrap , na
nás čaká komponenta Jumbotron a naučíme sa používať Bootstrap
odznaky.
V nasledujúcom kvíze, Kvíz - Tabuľky a tlačidlá v Bootstrap, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.