Webové komponentyFormulárové prvky

Formuláre udržujte čo najjednoduchšie – vždy vyžadujte iba údaje nevyhnutné pre spustenie danej služby.

Obsah:

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ý údaj)”.
Povinné polia sa neoznačujú hviezdičkou.

Názov dátového poľa (ang. label)

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í musia byť zarovnané nad polia, ktoré označujú.
Názvy dátových polí by mali byť krátke, zrozumiteľné a výstižné.
Je potrebné 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.
Názvy dátových polí musia byť priradené k poliam pomocou atribútu for

Meno a priezvisko

<label class="form-label" for="full-name-f1">Meno a priezvisko</label>
<input class="form-control" id="full-name-f1" type="text" name="full-name-f1">

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ť.

Prečo nemôžete poskytnúť číslo vášho preukazu poistenca?

<label class="form-label" for="textarea">
  Prečo nemôžete poskytnúť číslo vášho preukazu poistenca?
</label>
<textarea class="form-control form-control-3-4" name="textarea" id="textarea" rows="5"></textarea>

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ť.

Európsky preukaz poistencaUvádza sa na vašom preukaze poistenca.
Napríklad ‘QQ 12 34 56 C’.

<label class="form-label" for="ni-number">
  Európsky preukaz poistenca
  <span class="form-hint">
    Uvádza sa na vašom preukaze poistenca.
    <br>
    Napríklad ‘QQ 12 34 56 C’.
  </span>
</label>
<input class="form-control" id="ni-number" type="text" name="ni-number">

Odsadenie elementov

Uistite sa, že medzi jednotlivými elementami vo formulári je dostatok voľného miesta.

Krstné meno

Priezvisko

<!-- Use .form-group to create spacing when wrapping label and input pairs -->
<div class="form-group">
   <label class="form-label" for="first-name-2">Krstné meno</label>
   <input class="form-control" id="first-name-2" name="first-name-2" type="text">
</div>
<div class="form-group">
   <label class="form-label" for="last-name-2">Priezvisko</label>
   <input class="form-control" id="last-name-2" name="last-name-2" type="text">
</div>

Nahratie súboru

Pre nahratie súboru použite ovládací prvok, ktorý umožňuje používateľovi vybrať súbor.

Nahrať súbor

<div class="form-group">
  <label class="form-label" for="file-input">
    Nahrať súbor
  </label>
  <input type="file" id="file-input">
</div>

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).

Pri rozbaľovacích zoznamoch používajte natívne prvky pretože:

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ôžu byť rozšírené aj o pokročilú funkcionalitu cez javascript, pričom musí zostať zachovaná natívna funkcionalita a štandardy prístupnosti.

Toto je nadpis

<div class="form-group">
  <label class="form-label" for="select-box">Toto je nadpis</label>
  <select class="form-control" id="select-box" name="select-box">
    <option>slovensko.sk voľba 1</option>
    <option>slovensko.sk voľba 2</option>
    <option>slovensko.sk voľba 3</option>
  </select>
</div>

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).

Pri prepínačoch používajte natívne prvky pretože:

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ôžu byť rozšírené aj o pokročilú funkcionalitu cez javascript, pričom musí zostať zachovaná natívna funkcionalita a štandardy prístupnosti.

Prepínače umiestnené vedľa seba

<form>
  <div class="form-group">
    <fieldset class="inline">
      <legend>
        <h1 class="heading-medium">Máte už vytvorený osobný účet?</h1>
      </legend>
      <div class="multiple-choice">
        <input id="radio-inline-1" type="radio" name="radio-inline-group" value="Áno">
        <label for="radio-inline-1">Áno</label>
      </div>
      <div class="multiple-choice">
        <input id="radio-inline-2" type="radio" name="radio-inline-group" value="Nie">
        <label for="radio-inline-2">Nie</label>
      </div>
    </fieldset>
  </div>
</form>

Prepínače umiestnené pod sebou

<form>
  <div class="form-group">
    <fieldset>
      <legend>
        <h1 class="heading-medium">V ktorej časti Slovenska žijete?</h1>
      </legend>
      <div class="multiple-choice">
        <input id="radio-1" type="radio" name="radio-group" value="Západné Slovensko">
        <label for="radio-1">Západné Slovensko</label>
      </div>
      <div class="multiple-choice">
        <input id="radio-2" type="radio" name="radio-group" value="Stredné Slovensko">
        <label for="radio-2">Stredné Slovensko</label>
      </div>
      <div class="multiple-choice">
        <input id="radio-3" type="radio" name="radio-group" value="Východné Slovensko">
        <label for="radio-3">Východné Slovensko</label>
      </div>
      <p class="form-block">alebo</p>
      <div class="multiple-choice">
        <input id="radio-3" type="radio" name="radio-group" value="Žijem mimo Slovenska">
        <label for="radio-3">Žijem mimo Slovenska</label>
      </div>
    </fieldset>
  </div>
</form>

Neaktívny prepínač

Západné Slovensko

<div class="multiple-choice">
  <input id="radio-disabled-example" type="radio" name="radio-disabled-group" value="Západné Slovensko" disabled>
  <label for="radio-disabled-example">Západné Slovensko</label>
</div>

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í.
Ak sa jedná o súhlas alebo potvrdenie, je dôležité nechať začiarkávacie v predvolenom stave prázdne.

Pri začiarkávacích políčkach používajte natívne prvky pretože:

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í,
fungujú aj pri vypnutom javascripte,
môžu byť rozšírené aj o pokročilú funkcionalitu cez javascript, pričom musí zostať zachovaná natívna funkcionalita a štandardy prístupnosti.

Začiarkavacie políčka umiestnené pod sebou

<form>
  <fieldset>
    <legend>
      <h3 class="heading-medium">Aké druhy odpadu pravidelne prepravujete?</h3>
      <span class="body-text">Označte možnosti, ktoré sa vás týkajú</span>
    </legend>
    <div class="multiple-choice">
      <input id="waste-type-1" name="waste-types" type="checkbox" value="waste-animal">
      <label for="waste-type-1">Odpad živočíšneho charakteru</label>
    </div>
    <div class="multiple-choice">
      <input id="waste-type-2" name="waste-types" type="checkbox" value="waste-mines">
      <label for="waste-type-2">Odpad z baní a lomov</label>
    </div>
    <div class="multiple-choice">
      <input id="waste-type-3" name="waste-types" type="checkbox" value="waste-farm-agricultural">
      <label for="waste-type-3">Odpad z fariem a poľnohospodárstva</label> 
    </div>
  </fieldset>
</form>

Neaktívne začiarkavacie políčko

Odpad z fariem a poľnohospodárstva

<div class="multiple-choice">
  <input id="checkbox-disabled-example" name="checkbox-disabled-group" type="checkbox" value="Odpad z fariem a poľnohospodárstva" disabled>
  <label for="checkbox-disabled-example">Odpad z fariem a poľnohospodárstva</label>
</div>

Automaticky predvyplníme (začiarkneme) políčka iba vtedy, ak je to dôležité z hľadiska používateľa.

<div class="form-group">
  <label class="form-label" for="telephone-number">Zadajte vaše telefónne číslo</label>
  <input class="form-control" id="telephone-number" name="telephone-number" type="text">
</div>
<div class="multiple-choice">
  <input id="checkbox-telephone-number" name="contact-by-text-phone" type="checkbox" value="true">
  <label for="checkbox-telephone-number">Chcem byť kontaktovaný SMS správou</label>
</div>

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

Vyberte jednu z možností uvedených v nasledujúcom príklade:

<form>
  <div class="form-group">
    <fieldset>
      <legend>
        <h1 class="heading-medium">Ako vás máme kontaktovať?</h1>
      </legend>
      <div class="multiple-choice" data-target="contact-by-email">
        <input id="example-contact-by-email" type="radio" name="radio-contact-group" value="Yes">
        <label for="example-contact-by-email">E-mail</label>
      </div>
      <div class="panel panel-border-narrow js-hidden" id="contact-by-email">
        <label class="form-label" for="contact-email">E mailová adresa</label>
        <input class="form-control" name="contact-email" type="text" id="contact-email">
      </div>
      <div class="multiple-choice" data-target="contact-by-phone">
        <input id="example-contact-by-phone" type="radio" name="radio-contact-group" value="No">
        <label for="example-contact-by-phone">Mobil</label>
      </div>
      <div class="panel panel-border-narrow js-hidden" id="contact-by-phone">
        <label class="form-label" for="contact-phone">Telefónne číslo</label>
        <input class="form-control" name="contact-phone" type="text" id="contact-phone">
      </div>
      <div class="multiple-choice" data-target="contact-by-text">
        <input id="example-contact-by-text" type="radio" name="radio-contact-group" value="No">
        <label for="example-contact-by-text">SMS</label>
      </div>
      <div class="panel panel-border-narrow js-hidden" id="contact-by-text">
        <label class="form-label" for="contact-text-message">Telefónne číslo</label>
        <input class="form-control" name="contact-text-message" type="text" id="contact-text-message">
      </div>
    </fieldset>
  </div>
</form>

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.

Mobilné telefónne číslo

<div class="form-group">
  <div class="panel panel-border-narrow">
    <label class="form-label" for="example-phone-number">Mobilné telefónne číslo</label>
    <input class="form-control" id="example-phone-number" name="example-phone-number" type="text">
  </div>
</div>

Začiarkavacie políčka

Ukážka: Pre ukážku kliknite v nasledujúcom príklade na "Občan inej národnosti".

<form>
  <div class="form-group">
    <fieldset>
      <legend>
        <h1 class="heading-medium">Aká je vaša národnosť?</h1>
        <span class="body-text">Označte všetky možnosti, ktoré sú pre vás relevantné.</span>
      </legend>
      <div class="multiple-choice">
        <input id="nationalities-slovak" name="nationalities" type="checkbox" value="Slovak">
        <label for="nationalities-slovak">slovenská</label>
      </div>
      <div class="multiple-choice">
        <input id="nationalities-czech" name="nationalities" type="checkbox" value="Czech">
        <label for="nationalities-czech">česká</label>
      </div>
      <div class="multiple-choice" data-target="example-different-country">
        <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
        <label for="nationalities-other">občan inej národnosti</label>
      </div>
      <div class="panel panel-border-narrow js-hidden" id="example-different-country">
        <label class="form-label" for="nationalities-other-country">Názov krajiny</label>
        <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
      </div>
    </fieldset>
  </div>
</form>