Lekce 10 - Bootstrap - Další možnosti formulářů
V minulé lekci, Bootstrap - Formuláře, jsme začali s formuláři v Bootstrapu.
V dnešním CSS tutoriálu Bootstrapu budeme pokračovat s tématem formulářů. Tentokrát se zaměříme na klientské validace, vlastní styly a skupiny inputů.
Validace v Bootstrapu
Další silnou stránkou Bootstrap formulářů jsou klientské
validace. Pokud je k prvkům definujeme, Bootstrap nám pomůže s
obarvením špatně vyplněných ovládacích prvků a zobrazí k nim
chybové hlášky. Interně je k tomu využíváno pseudotříd
:invalid
a :valid
, podle kterých se formulář
obarví, pokud je na něj použita třída .was-validated
. Třídu
nám Bootstrap přidá automaticky po odeslání formuláře.
V ukázce níže zobrazujeme vlastní hlášky při klientské validaci.
Před tím musíme vypnout výchozí hlášky prohlížeče typu "Musíte
vyplnit toto pole.", a to přidáním atributu
novalidate="novalidate"
elementu <form>
. K
zobrazení hlášek použijeme vlastní JavaScriptovou funkci:
<form id="needs-validation" novalidate="novalidate"> <div> <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> <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ýsledek:
Když JavaScript vynecháme, dojde k postupnému vyvolání hlášek tak, jak
je zobrazuje prohlížeč a nebudou vypsány všechny najednou. Zkusme si
identický kód bez skriptu a bez atributu novalidate
:
Serverová validace
Pokud bychom chtěli formulář takto obarvit i při serverové validaci,
přidáme jeho prvkům třídy .is-valid
a
.is-invalid
. V tu chvíli již formulář nemusí mít třídu
.was-validated
.
Serverovou validaci bychom měli vždy provádět, jelikož na klientskou validaci se nelze spolehnout! Klientská validace je pouze zpříjemnění validace pro uživatele tím, že získají chybovou hlášku ještě než se formulář odešle na server.
Klientskou validaci můžeme dále ovlivnit i v JavaScriptu, viz metoda
setCustomValidity()
.
Vlastní styly
Vzhled checkboxů, radiobuttonů, fileinputů a selectů se často přebírá
z operačního systému nebo výchozího nastavení prohlížeče, které
nevypadá nejlépe. Proto Bootstrap přináší možnost ostylovat i tyto
ovládací prvky plně po svém. Docílí toho třídami
.form-check
, .form-select
a
.form-control
.
Třída .form-check
se používá pro stylování standardních
kontrolních prvků, jako jsou zaškrtávací políčka (checkboxes). Tato
třída zajistí, že tyto prvky budou mít konzistentní vzhled napříč
různými prohlížeči a zařízeními. Pro použití je nutné tuto třídu
přiřadit ke kontejneru, který obaluje samotný vstupní prvek
<input>
a jeho popisek <label>
. Příklad
použití může vypadat takto:
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault">Souhlasím s obchodními podmínkami</label> </div>
Tento kód vytvoří standardní zaškrtávací políčko s popiskem.
Třída .form-switch
se používá pro vytvoření
přepínačů, které jsou vizuálně odlišné od standardních
zaškrtávacích políček a nabízejí uživatelům jiný způsob interakce.
Tyto prvky jsou často používány pro zapínání a vypínání nastavení.
Třídu .form-switch
přidáme do stejného kontejneru jako
.form-check
, aby se změnil vzhled kontrolního prvku. Podobně
jako zaškrtávací políčka, i přepínače používají
.form-check-input
pro vlastní vstupní prvek.
Formulář s ostylovanými prvky vypadá následovně:
<form> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="customCheck1"> <label class="form-check-label" for="customCheck1"> Souhlasím s obchodními podmínkami </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="platebni-metoda" id="platebni-metoda1" value="kartou" checked> <label class="form-check-label" for="platebni-metoda1"> Platba kartou </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="platebni-metoda" id="platebni-metoda2" value="prevodem" checked> <label class="form-check-label" for="platebni-metoda2"> Platba převodem </label> </div> <div> <label for="formular-select">Velikost</label> <select class="form-select" id="formular-select"> <option>S</option> <option>M</option> <option>L</option> <option>XL</option> </select> </div> <div> <label for="customFile" class="form-label">Nahrát soubor</label> <input type="file" class="form-control" id="customFile"> </div> </form>
U checkboxů přiřazujeme elementu <input>
třídu
.form-check-input
a přidruženému elementu
<label>
třídu .form-check-label
. Checkboxy
stále podporují vlastnost indeterminate
, která na checkboxu
způsobí, že není ani zaškrtnutý ani nezaškrtnutý (je na něm vykreslen
symbol pomlčky -
). Tuto vlastnost je třeba nastavit přes
JavaScript. Pro radiobuttony používáme stejné třídy:
.form-check-input
pro <input>
a
.form-check-label
pro <label>
. Pro výběrové
pole <select>
používáme .form-select
. Pro
vstupní pole typu file aplikujeme třídu .form-control
přímo na
element <input type="file">
.
Výsledek v prohlížeči:
Custom controls se řadí vedle sebe. Chceme-li je místo toho
uspořádat vertikálně, je třeba je obalit do <div>
prvků, kde každý ovládací prvek bude v samostatném
<div>
s třídou .form-check
. Tato třída
zajišťuje správné vykreslení a uspořádání prvků pod sebou.
Skupiny inputů
Input groups nám v CSS frameworku Bootstrap umožňují vkládat další elementy jako jsou texty nebo tlačítka vedle textových polí. Takové inputy jsme již viděli v lekci Bootstrap - Formuláře, ale podrobněji jsme si je ještě nepopisovali. Udělejme si základní ukázku:
<div> <div class="input-group"> <span class="input-group-text" 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> <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-text" id="email-addon">@itnetwork.cz</span> </div> </div>
Input vložíme do divu se třídou .input-group
. Text vložíme
na levou nebo pravou stranu inputu pomocí elementu <span>
se
třídou .input-group-text
. Není podporované vkládání
dalších textových polí nebo labelů.
Výsledek:
Velikosti
Pro změnu velikosti inputu přiřadíme elementu <div>
se
třídou .input-group
jednu z následujících tříd:
.input-group-lg
pro velkou velikost,- žádnou pro standardní velikost,
.input-group-sm
pro malou velikost.
Další addony
Addonů můžeme na strany přidat více za sebe. Kromě textových addonů, které jsme viděli výše, můžeme přidávat také checkboxy, radiobuttony, tlačítka a dropdowny. Podívejme se na ukázku s pokročilejšími addony:
<div class="input-group"> <span class="input-group-text" id="checkbox-addon"> <input type="checkbox" aria-label="Checkbox"> </span> <span class="input-group-text" id="text-addon">Text</span> <button class="btn btn-secondary" type="button">Tlačítko</button> <input type="text" class="form-control" aria-label="Ukázkový input"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-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>
Pro správnou funkčnost dropdown tlačítek nezapomeňme nalinkovat Bootstrap JavaScript. Výsledek v prohlížeči:
Dropdown můžeme i tzv. segmentovat, tedy rozdělit na dvě samostatná tlačítka, kdy větší tlačítko funguje zcela samostatně a jen menší tlačítko otevírá nabídku:
<div class="input-group"> <button type="button" class="btn btn-secondary">Dropdown</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Rozbalit Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">Položka 1</a></li> <li><a class="dropdown-item" href="#">Položka 2</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Položka 3</a></li> </ul> </div>
Výsledek:
Pokud bychom dropdown vložili na levou stranu, nepřidáváme menu třídu
.dropdown-menu-end
. Tím jsme formuláře dokončili
V následujícím cvičení, Řešené úlohy k 9.-10. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.