Lekce 10 - Bootstrap - Další možnosti formulářů
V minulé lekci, Bootstrap - Formuláře, jsme načali formuláře v Bootstrapu.
V dnešním CSS tutoriálu budeme s tímto tématem pokračovat a také jej dokončíme. Čekají nás klientské validace, vlastní styly a skupiny inputů.
Validace
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 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ýsledek:
Když JavaScript vynecháte, 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 vnitřně jejich skrytím přes
opacity: 0
. Elementu <label>
přiřadíme
třídu .custom-control
a nové prvky místo těch skrytých
přidáme jako elementy <span>
se třídami
.custom-control-indicator
a
.custom-control-description
.
Formulář s ostylovanými prvky by měl následující 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 checkboxů přiřazujeme elementu <label>
třídu
.custom-checkbox
a elementu <input>
třídu
.custom-control-input
. Checkboxy podporují i vlastnost
indeterminate
, která na checkboxu způsobí, že není ani
zaškrtnutý ani nezaškrtnutý (je na něm vykreslen symbol pomlčky
-
). Vlastnost je elementu případně třeba nastavit přes
JavaScript. U radiobuttonů přiřazujeme elementu <label>
třídu .custom-radio
, inputu opět třídu
.custom-control-input
. Elementu <select>
nastavujeme třídu .custom-select
a inputům typu
file
třídu custom-file-input
a jeden
<span>
se třídou .custom-file-control
.
Výsledek:
Pokud byste chtěli přeložit text u inputu na výběr souboru, je závislý
na definici jazyka stránky pomocí atributu lang
elementu
<html>
a na textech nastavených v SASS zdrojových kódech
Bootstrapu, konkrétně proměnná $custom-file-text
. Ve
výchozím buildu se bohužel custom file input renderuje pouze pro jazyk
en
.
Custom controls se řadí vedle sebe. Pokud je chceme dát pod
sebe, je třeba je vkládat do divů jako v ukázce výše. Použili jsme zde
třídu .form-group
. Bootstrap poskytuje také třídu
.custom-controls-stacked
, kdy není třeba vkládat každý
ovládací prvek do samostatného divu, ale stačí je vložit do jednoho divu,
kterému tuto třídu přiřadíme.
Skupiny inputů
Input groups nám v CSS frameworku Bootstrap umožňují vkládat další elementy jako jsou texty nebo tlačítka na strany textových inputů. Tato rozšíření pojmenoval addons. Takové inputy jsme již viděli v lekci o formulářích, ale podrobněji jsme si je ještě nepopisovali. Udělejme si základní ukázku:
<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 se třídou .input-group
. Text vložíme
na levou nebo pravou stranu inputu pomocí elementu <span>
se
třídou .input-group-addon
. 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. Udělejme si druhou ukázku 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>
Pro správnou funkčnost dropdown tlačítek nezapomeňte nalinkovat Bootstrap JavaScript. Výsledek v prohlížeči:
Dropdown můžeme i tzv. segmentovat, tedy rozdělit na 2 samostatná tlačítka, kdy větší tlačítko funguje zcela samostatně a jen menší tlačítko otevírá nabídku:
<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ýsledek:
Pokud byste dropdown vložili na levou stranu, nepřidávejte menu třídu
.dropdown-menu-right
. 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í.