Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

8. díl - Bootstrap - Další možnosti formulářů

HTML a CSS Bootstrap Bootstrap - Další možnosti formulářů

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Validace v Bootstrap
formular_vali­dace.html

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:

Validace v Bootstrap
formular_vali­dace.html

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:

Validace v Bootstrap
formular_vali­dace.html

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.

Pozn.: 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:

Input groups v Bootstrap
input_groups.html

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-smpro 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:

Input groups v Bootstrap
pokrocile_input_grou­ps.html

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:

Input groups v Bootstrap
segmentovany_drop­down.html

Pokud byste dropdown vložili na levou stranu, nepřidávejte menu třídu .dropdown-menu-right. Tím jsme formuláře dokončili :) Příště na nás čeká komponenta Jumbotron a naučíme se používat Bootstrap odznaky.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
2 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Formuláře
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Jumbotron a Badges
Aktivity (1)

 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:26. listopadu 11:02

Ten je tam schválně, abys to mohl ovládat i klávesnicí. Pokus bys to chtěl z nějakého důvodu odstranit, tak je to nastylované přes pseudoselektor :active.

Odpovědět 26. listopadu 11:02
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
T-fon
Člen
Avatar
T-fon:26. listopadu 11:42

Já jsem včera zkoušel měnit vlastnosti u

.custom-control-input:active~.custom-control-indicator

ale bez úspěchu. Mohl bys mi poradit, co je ten rámeček za vlastnost? Kdybych ho třeba chtěl změnit na červenou.

Editováno 26. listopadu 11:43
 
Odpovědět 26. listopadu 11:42
Avatar
Vlčák
Člen
Avatar
Vlčák:26. listopadu 11:43

Pěkný článek. Pro ty, kteří chtějí jinou barvu označeného radioboxu, checkboxu (výchozí je tuším světlejší modrá) stačí doplnit do stylů následující řádek:
.custom-control-input:checked ~ .custom-control-indicator {background-color: red;}
Kde ~ znamená následující element po .custom-control-input a 'red' je barva, kterou je samozřejmě možné změnit.

 
Odpovědět 26. listopadu 11:43
Avatar
Vlčák
Člen
Avatar
Odpovídá na T-fon
Vlčák:26. listopadu 11:44

Náhoda, teď jsem to sem vložil i s vysvětlením :)

 
Odpovědět 26. listopadu 11:44
Avatar
T-fon
Člen
Avatar
T-fon:26. listopadu 11:51

No ale tohle mi právě nefunguje, ani s checked, ani s active
Živá ukázka
Co dělám blbě?

 
Odpovědět 26. listopadu 11:51
Avatar
Vlčák
Člen
Avatar
Odpovídá na T-fon
Vlčák:26. listopadu 12:04

Něco máš špatně a nevím co. Mě to funguje, ukázku najdeš tady.
Možná špatně zavádíš Bootstrap?
Živá ukázka zde

 
Odpovědět 26. listopadu 12:04
Avatar
T-fon
Člen
Avatar
T-fon:26. listopadu 12:10

Aha, tak to jsme se nepochopili. Mně nejde o pozadí, to je v poho, ale o ten rámeček okolo, co se objeví při kliku (čili při :active).

 
Odpovědět 26. listopadu 12:10
Avatar
Vlčák
Člen
Avatar
Odpovídá na T-fon
Vlčák:26. listopadu 12:38

Jde o akci :focus a box-shadow
Přidal jsem do ukázky.

 
Odpovědět  +2 26. listopadu 12:38
Avatar
T-fon
Člen
Avatar
Odpovídá na Vlčák
T-fon:26. listopadu 13:18

Super, díky.

 
Odpovědět 26. listopadu 13:18
Avatar
T-fon
Člen
Avatar
T-fon:26. listopadu 21:27

Zkusil jsem se ještě potrápit se selectem. Výchozí položka jde nastylovat prakticky neomezeně, ale vyjížděcí options se mi vůbec nepovedly změnit (modrý pozadí, modrý rámeček). Poradíte? Ale kdyžtak existuje hodně knihoven se selectama...

 
Odpovědět 26. listopadu 21:27
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 11. Zobrazit vše