1. Komponenty

Formulář

angl. Form

Slouží k zadávání a odesílání dat a získávání informací.

Ukázka použití formulářových prvků


<form>
    <fieldset>
        <legend class="sr-only">Ukázka formuláře</legend>
        <div class="row">
            <div class="col-xs-16 col-md-7">
                <div class="form-group">
                    <input type="text" class="form-control" id="textfield" placeholder="Ukázka">
                    <label for="textfield" class="control-label">Popis textového pole</label>
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="3" id="textarea" placeholder="Ukázka"></textarea>
                    <label for="textarea" class="control-label">Popis víceřádkového textového pole</label>
                </div>
                <div class="form-group mb-0 pt-0">
                    <div class="select select--primary">
                        <select>
                            <option hidden="">Vyberte ze seznamu</option>
                            <option>Option 1 lorem ipsum</option>
                            <option>Option 2 dolor</option>
                            <option>Option 3 sit amet</option>
                        </select>
                    </div>
                </div>
                <div class="mt-2">
                    <h4>Vyberte možnosti</h4>
                
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="custom-checkbox1">
                        <label for="custom-checkbox1">Možnost 1</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="custom-checkbox2">
                        <label for="custom-checkbox2">Možnost 2</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="mt-2">
                    <h4>Zvolte variantu</h4>
                
                    <div class="form-group custom-control custom-radio">
                        <input type="radio" class="custom-control-input" id="custom-radio1" name="example2">
                        <label for="custom-radio1">Varianta 1</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                    <div class="form-group custom-control custom-radio">
                        <input type="radio" class="custom-control-input" id="custom-radio2" name="example2">
                        <label for="custom-radio2">Varianta 2</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="mt-2">
                    <div class="date-picker">
                        <div class="form-group">
                            <input class="form-control form-control--date-picker" name="date" type="text" placeholder="16. listopad 2017" autocomplete="off">
                            <span class="pvs-theme-icon-calendar date-picker--icon"></span>
                            <span class="help-block">Vyberte datum</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <h4>Notifikace e-mailem</h4>
                    <div class="form-group custom-control custom-toggle">
                        <input type="checkbox" class="custom-control-input" id="custom-toggle">
                        <label for="custom-toggle">Toggle</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="mt-2">
                    <button type="submit" class="btn btn-primary">Odeslat</button>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

Formulář použijte, pokud potřebujete získat od uživatelů nějaké informace. Při navrhování formuláře je důležité myslet na jeho strukturu.

Složení formulářů

Formulářové komponenty

Formulář se může skládat z následujících komponent:

Typ Využití
Vypínač Poskytuje uživateli výběr mezi dvěma možnostmi s okamžitou odezvou (více)
Přepínač Poskytuje uživateli výběr mezi několika možnostmi s odezvou po odeslání formuláře (více)
Zaškrtávací pole Možnost nezávisle vybrat kteroukoli z 1-n možností vč. jejich kombinací (více)
Textové pole Pro textový vstup uživatele, který může mít jeden nebo více řádků (více)
Rozbalovací seznam Pro výběr z několika souvisejících možností, např. měsíc / den v týdnu / kraj apod. (více)
Výběr data Pro výběr konkrétního data nebo termínu od-do (kombinace dvou výběrů) (více)
Tlačítko Pro odeslání formuláře nebo nahrání souboru (více)

Prvky formulářových komponent

Formulářové komponenty se skládají ze 6 prvků:

  1. Označení (Label) - krátké označení, které by mělo vyjadřovat, jaké informace se mají do pole vyplnit. Zarovnáváme doleva.
  2. Pole pro vyplnění (Field) - místo, kam uživatelé vkládají text, nebo kde provádějí výběr.
  3. Zástupný text (Placeholder text) - dává informaci, jak by pole mělo být používáno (např. “Začněte psát”). Používejte pouze tam, kde je třeba objasnění, snažte se jej nepoužívat nadměrně.
  4. Nápověda (Help text) - poskytuje pomoc při vyplňování pole. Text nápovědy je nepovinný.
  5. Akce (Action) - umožňuje uživatelům odeslat formulář.
  6. Validace (Validation) - zajišťuje, aby údaje odeslané uživatelem odpovídaly přijatelným parametrům.

Schéma formulářových prvků

Logika výběrových formulářových komponent

Vypínač (Toggle) lze použít pro jednu možnost, kterou může uživatel zapnout nebo vypnout.

Přepínač (Radio button) se používá v případě dvou nebo více možností, které se navzájem vylučují a uživatel musí zvolit pouze jednu volbu. Jinými slovy, klepnutím na nevybraný přepínač zrušíte volbu libovolného jiného dříve vybraného přepínače (vybrané volby).

Zaškrtávací pole (Checkbox) se používá v případě jedné (např. Souhlas se zpracováním osobních údajů) nebo více možností a uživatel může vybrat libovolný počet možností, včetně nuly, jedné nebo několika. Jinými slovy, každé zaškrtávací pole je nezávislé na všech ostatních zaškrtávacích polích v seznamu, takže zaškrtnutím jednoho pole se nezruší ostatní zaškrtnuté.

U polí, ve kterých je požadován jediný výběr a existuje mnoho možností, je vhodné použít Rozbalovací seznam (Select box).

Schéma použítí formulářových prvků

Obecná pravidla pro tvorbu formulářů

Udržte formulář krátký

Při navrhování formulářů buďte co nejpřísnější. Přemýšlejte u každého pole jakou hodnotu údaje přinesou - co získáte shromažďováním daných informací?

  • Formulář maximálně zjednodušte - ať obsahuje co nejméně polí
  • V případě potřeby rozdělte formulář do více kroků
  • Při strukturování formuláře zvažte jeho kontext - pokud spolu informace souvisí, je možné jich na stránku umístit víc
  • Jednotlivé kroky formuláře musí vždy obsahovat související informace - kroky pojmenujte srozumitelně tak, aby z názvu bylo patrné, co je jejich obsahem

Povinná a nepovinná pole

  • Požadujte po uživatelích pouze ty údaje, které jsou bezprostředně potřebné pro spuštění služby
  • Pro nepovinné údaje je potřeba tyto pole označit jako nepovinné (nepovinný údaj)
  • Povinná pole se neoznačují hvězdičkou

Začněte tím, že se zeptáte:

  • Je to pro nás cenné?
  • Je to tak cenná informace, že pokud ji uživatel neposkytne, je nutné mu zabránit v pokračování?

Označení pole (Label)

Každé formulářové pole má přiřazené výstižné označení.

  • Označení je umístěno ideálně nad daným polem, případně nalevo od pole (zarovnané na levý prapor)
  • Označení je krátké, srozumitelné a výstižné
  • Dvojtečka za označení pole nepatří
  • Označení neumisťujte dovnitř pole - jakmile uživatel začne psát, označení zmizí, což je pro snadné vyplňování matoucí

Nápověda (Help text)

Text nápovědy je relevantní informace, která pomáhá uživateli při vyplňování pole

  • Používejte vždy tam, kde lze předpokládat komplikace s vyplněním pole
  • Vyhněte se nadměrnému užívání u jednoznačných údajů (např. jméno, příjmení, ulice, atp.)
  • Textem v nápovědě musí být jednoznačně sděleno, co konkrétně má uživatel v daném poli vyplnit nebo zvolit, případně k čemu tento údaj slouží (např. u pole pro heslo uveďte: “minimálně 6 znaků, jedno velké písmeno, jedno číslo”)

Zástupný text (Placeholder text)

Zástupný text je text, který zmizí poté, co uživatel začne psát/vkládat údaje do textového pole. Používejte pouze tam, kde je třeba objasnění, snažte se jej nepoužívat nadměrně.

  • Neměl by obsahovat zásadní informace o tom, jaká data má uživatel vyplnit
  • V případě, že jde o zásadní informace pro vyplnění, nabízí se použití nápovědy
  • Piště jako přímý příkaz bez interpunkce (např. “Začněte psát”)

Chyby a validace

Validace

Vyplněné údaje ověřujte průběžně, ještě před odesláním samotného formuláře - pro uživatele je těžké zorientovat se na stránce, pokud se vyskytlo více chyb současně

Přehled o chybách

  • Zobrazujte v horní části stránky tak, aby byl viditelný, když se stránka aktualizuje a ihned jej dokázala přečíst pomocná zařízení
  • Přidejte nadpis, který uživatele na chybu/y upozorní
  • V přehledu použijte odkaz, který povede na každé pole, kde byla zaznamenána chyba

Chybové hlášky

  • Pište tak, aby uživatel pochopil, proč se chyba vyskytla a jak ji má odstranit
  • Vkládejte do prvku <label> k dané položce
  • Zobrazujte pod vyplňovaným polem

Zvýraznění chyb

Pro zvýraznění chybové hlášky použijte červenou barvu

Odeslání formuláře

Na tlačítku pro odeslání formuláře použijte textaci, která jasně říká, co se s formulářem stane (např. “Odeslat”, “Přihlásit”, atp.).

Podívejte se na popis komponenty Tlačítko.