Formulárové prvky http://govuk-elements.herokuapp.com/form-elements/ Formuláre udržujte čo najjednoduchšie vždy vyžadujte iba údaje nevyhnutné pre spustenie danej služby. Obsah: Povinné a nepovinné polia Menovky Formulárové polia Textové polia Zvýraznenie aktívneho poľa Pomocný text Odsadenie Nahratie súboru Legendy Rozbaľovacie zoznamy Prepínače Začiarkávacie políčka Podmienečne zobrazovaný obsah Príklady Povinné a nepovinné polia Vyžadujú sa iba tie údaje, ktoré sú bezprostredne potrebné k spusteniu služby. Pri nepovinných údajoch je potrebné tieto polia označiť ako nepovinné (nepovinné). Povinné polia sa neoznačujú hviezdičkou. Názov dátového poľa Každý formulárový prvok má priradený výstižný názov dátového poľa.
Názvy dátových polí sa skrývajú iba v prípade, že sú vďaka okolitému kontextu nepotrebné. Názvy dátových polí súmusia zarovnané nad polia, ktoré označujú. Názvy dátových polí by mali byť krátke, zrozumiteľné a výstižné. Je vhodné sa vyhýbať dvojbodkám za menovkami. Názvy dátových polí sa uvádzajú v súlade s účelom použitia dátových prvkov a ich názvami, ak také existujú. Názvy dátových polí súmusia priradené k poliam pomocou atribútu for. Formulárové polia Veľkosť polí musí zohľadňovať prípustný počet znakov daného dátového poľa (proporčne prispôsobená údajom, ktoré do nich budú vpisované). Je potrebné sa uistiť, že používatelia budú schopní zadať potrebné údaje aj na menších obrazovkách. Pri menších veľkostiach obrazoviek je vhodné roztiahnuť polia na celú šírku obrazovky. Formátovanie dátových polí je poskytované v súlade s formátom príslušných dátových prvkov. Textové polia Výšku textového poľa nastavujeme úmerne k množstvu textu, ktorý sa doň bude vpisovať.
Zvýraznenie aktívneho poľa Všetky elementy používajú žltú farbu na zvýraznenie aktívneho poľa. Žltou farbou sa vyplní celé vnútro poľa alebo sa použije žltý obrys veľkosti 3 pixelov. Ukážka: Pre zobrazenie aktívneho stavu kliknite v nasledujúcom príklade na Meno a priezvisko alebo do textového poľa. Pomocný text Nepoužívajte pomocný text vo vnútri textového poľa, keďže tento text sa stratí, akonáhle používateľ zadá akýkoľvek znak do textového poľa. Pomocný text alebo príklad, v akom formáte je potrebné zadať údaje, umiestnite nad konkrétnym elementom vo formulári tak, aby mohli byť zobrazené po celú dobu zadávania údajov.
V pomocnom texte musí byť jednoznačne uvedené, čo má používateľ v danom prvku vyplniť alebo zvoliť a ako s ním má používateľ zaobchádzať. Overte si, že čítačky obrazoviek dokážu pomocný text správne prečítať. Odsadenie elementov Uistite sa, že medzi jednotlivými elementami vo formulári je dostatok voľného miesta.
Nahratie súboru Pre nahratie súboru použite ovládací prvok, ktorý umožňuje používateľovi vybrať súbor. Používajte natívny input element (načrtnutý v ukážke kódu vyššie) pomocou type="file" a to z nasledovných dôvodov: na ovládací prvok sa dostaneme aj pri prechádzaní stránky len za pomoci tabulátora, funguje ovládanie pomocou klávesnice, funguje ovládanie pomocou asistenčných technológií, funguje aj pri vypnutom javascripte, môže byť rozšírený aj o pokročilú funkcionalitu cez javascript, pričom musí zostať zachovaná natívna funkcionalita a štandardy prístupnosti. Vlastné riešenia na nahratie súboru musia spĺňať vyššie uvedené kritériá. Legendy a skupiny polí (ang. fieldset) Skupiny polí (ang. fieldset) používame na zoskupenie súvisiacich prvkov. Prvým z elementov vo fieldsete musí byť legenda, ktorá popisuje celú skupinu prvkov. Celý text, ktorý je dôležitý pri vypĺňaní formulára a nie je možné ho umiestniť ako pomocný text, by sa mal nachádzať v legende (viď príklad nižšie začiarkavacie políčka). Legenda by taktiež nemala byť, kvôli asistenčným technológiam, príliš dlhá.
Rozbaľovacie zoznamy (ang. drop-down lists) Je potrebné sa vyhýbať používaniu rozbaľovacích zoznamov (drop-down lists). Namiesto nich je lepšie použiť prepínače (radio button) alebo začiarkavacie políčka (checkbox). Prepínače (ang. radio buttons) Využívajú sa v prípade, ak si má používateľ vybrať jednu z možností. Pre viac ako dve možnosti sa prepínače zarovnávajú pod seba. Prepínače by mali byť dostatočne veľké, aby sa dali ľahko použiť na PC (myš) ale aj dotykových zariadeniach (mobil, tablet). Prepínače umiestnené vedľa seba
Prepínače umiestnené pod sebou
Neaktívny prepínač Začiarkavacie políčka (ang. checkboxes) Používa sa na výber viacerých možností zo zoznamu, alebo na zapnutie/vypnutie. Vždy je potrebné používateľovi zdôrazniť, či si môže vybrať jednu alebo viacero možností. Začiarkavacie políčka umiestnené pod sebou
Neaktívne začiarkavacie políčko
Automaticky predvyplníme (začiarkneme) políčka iba vtedy, ak je to dôležité z hľadiska používateľa. Podmienečné odhaľovanie obsahu Dodatočné otázky, ktoré zobrazujeme na základe predchádzajúceho kontextu. Na zvýraznenie dodatočnej otázky používame vodiacu linku zarovnanú naľavo. Prepínače Ukážka:, Vyberte jednu z možností uvedených v nasledujúcom príklade:
Tak ako je uvedené v časti kódu vyššie, pri každom názve dátového poľa sa nachádza atribút data-target="" (ang. label), keďže pri každej z možností sa zobrazí extra pole. Šedá vodiaca linka na ľavej strane vizuálne spája obsah s otázkou umiestnenou vyššie. Začiarkavacie políčka Ukážka: Pre ukážku kliknite v nasledujúcom príklade na "Občan inej národnosti".
Príklad: Formulárové prvky Príklady nižšie podrobne popisujú odsadenie jednotlivých nadpisov a elementov vo formulároch ako aj použitie chybových hlášok a pomocného textu. Pod menovkou, legendou a textovým poľom použite 10px medzeru. Medzeru 10px použite tiež pod menovkou alebo legendou ak zobrazujete pomocný text.
Pri zobrazení chybovej hlášky použite štandardne medzeru 10px pod menovkou, legendou a textovým poľom. Navyše použite medzeru 15px nad samotnou chybovou hláškou.
Príklady nižšie zobrazujú text legendy v rovnakom štýle, aký sa používa na menovky. Príklady chybových hlášok
Príklad: Textové pole s parametrom form-control classes
Príklad: Textové polia a chybové hlášky
Príklad: Rozbaľovacie zoznamy a chybové hlášky
Nasledovné príklady sú príkladmi zobrazenia jednej otázky na stránku. Nemalo by sa ich na stránke nachádzať viac. Otázka je v kóde umiestnená v časti heading v rámci legendy daného poľa (fieldsetu).
Príklad: Dátumy
Príklad: Prepínače a začiarkavacie políčka Príklady nižšie zobrazujú použitie.multiple-choice prepínačov (ang. radio buttons) a začiarkavacích políčiek (ang. checkboxes). Takisto zobrazuje nastavenie ARIA pri zobrazovaní a schovávaní dodatočného obsahu - použitím show-hide-content.js.