Webové komponenty

Formulá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

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example-1">
    Meno a priezvisko
  </label>
  <input class="govuk-input" id="input-example-1" name="fullName"  type="text">
</div>

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

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail-1">
    Prečo nemôžete poskytnúť číslo vášho preukazu poistenca?
  </label>
  <textarea class="govuk-textarea" id="more-detail-1" name="more-detail" rows="5"></textarea>
</div>

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.

Aktívny stav

• yellow
• #FFDF0F

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example-2">
    Meno a priezvisko
  </label>
  <input class="govuk-input  :focus" id="input-example-2" name="fullName"  type="text">
</div>

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

Uvádza sa na vašom preukaze poistenca. Napríklad ‘QQ 12 34 56 C’.

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example-3">
    Číslo preukazu poistenca
  </label>
  <span id="input-example-3-hint" class="govuk-hint">
    Uvádza sa na vašom preukaze poistenca. Napríklad ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input" id="input-example-3" name="fullName"  type="text" aria-describedby="input-example-3-hint">
</div>

Odsadenie elementov

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

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example-4-name">
    Krstné meno
  </label>
  <input class="govuk-input" id="input-example-4-name" name="name"  type="text">
</div>


<div class="govuk-form-group">
  <label class="govuk-label" for="input-example-4-surname">
    Priezvisko
  </label>
  <input class="govuk-input" id="input-example-4-surname" name="surname"  type="text">
</div>

Nahratie súboru

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

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</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.

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Označenie poľa
  </label>
  <select class="govuk-select" id="select-1" name="select-1">
      <option value="1">slovensko.sk voľba 1</option>
      <option value="2" selected>slovensko.sk voľba 2</option>
      <option value="3" disabled>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

Máte už vytvorený osobný účet?

<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    Máte už vytvorený osobný účet?
  </legend>
  <div class="govuk-radios govuk-radios--inline">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-1" name="example" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="example-1">
        Áno
      </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-1-2" name="example" type="radio" value="no">
          <label class="govuk-label govuk-radios__label" for="example-1-2">
        Nie
      </label>
        </div>
  </div>
</fieldset>
</div>

Prepínače umiestnené pod sebou

V ktorej časti Slovenska žijete?

alebo

<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    V ktorej časti Slovenska žijete?
  </legend>
  <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-2" name="example" type="radio" value="zs">
          <label class="govuk-label govuk-radios__label" for="example-2">
        Západné Slovensko
      </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-2-2" name="example" type="radio" value="ss">
          <label class="govuk-label govuk-radios__label" for="example-2-2">
        Stredné Slovensko
      </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-2-3" name="example" type="radio" value="vs">
          <label class="govuk-label govuk-radios__label" for="example-2-3">
        Východné Slovensko
      </label>
        </div>
        <div class="govuk-radios__divider">alebo</div>        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-2-5" name="example" type="radio" value="ms">
          <label class="govuk-label govuk-radios__label" for="example-2-5">
        Žijem mimo Slovenska
      </label>
        </div>
  </div>
</fieldset>
</div>

Neaktívny prepínač

Máte už vytvorený osobný účet?

<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    Máte už vytvorený osobný účet?
  </legend>
  <div class="govuk-radios govuk-radios--inline">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-3" name="example" type="radio" value="yes" disabled>
          <label class="govuk-label govuk-radios__label" for="example-3">
        Áno
      </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="example-3-2" name="example" type="radio" value="no" disabled>
          <label class="govuk-label govuk-radios__label" for="example-3-2">
        Nie
      </label>
        </div>
  </div>
</fieldset>
</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 políčka 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

Aké druhy odpadu pravidelne prepravujete?

Aké druhy odpadu pravidelne prepravujete? Označte možnosti, ktoré sa vás týkajú

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="nationality-1-hint">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">
      Aké druhy odpadu pravidelne prepravujete?
    </h1>
  </legend>
  <span id="nationality-1-hint" class="govuk-hint">
    Aké druhy odpadu pravidelne prepravujete? Označte možnosti, ktoré sa vás týkajú
  </span>
  <div class="govuk-checkboxes">
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="nationality-1" name="nationality" type="checkbox" value="odpad1">
          <label class="govuk-label govuk-checkboxes__label" for="nationality-1">
        Odpad živočíšneho charakteru
      </label>
        </div>
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="nationality-1-2" name="nationality" type="checkbox" value="odpad2">
          <label class="govuk-label govuk-checkboxes__label" for="nationality-1-2">
        Odpad z baní a lomov
      </label>
        </div>
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="nationality-1-3" name="nationality" type="checkbox" value="odpad3">
          <label class="govuk-label govuk-checkboxes__label" for="nationality-1-3">
        Odpad z fariem a poľnohospodárstva
      </label>
        </div>
  </div>
</fieldset>
</div>

Neaktívne začiarkavacie políčko

<div class="govuk-form-group">
  <div class="govuk-checkboxes">
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="odpad3d" disabled>
          <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
        Odpad z fariem a poľnohospodárstva
      </label>
        </div>
  </div>
</div>

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

<div class="govuk-form-group">
  <label class="govuk-label" for="input-tel-1">
    Zadajte vaše telefónne číslo
  </label>
  <input class="govuk-input" id="input-tel-1" name="tel"  type="text">
</div>



<div class="govuk-form-group">
  <div class="govuk-checkboxes">
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="checkbox-sms" name="sms" type="checkbox" value="sms">
          <label class="govuk-label govuk-checkboxes__label" for="checkbox-sms">
        Chcem byť kontaktovaný SMS správou
      </label>
        </div>
  </div>
</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:

How do you want to be contacted?

<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    How do you want to be contacted?
  </legend>
  <div class="govuk-radios govuk-radios--inline govuk-radios--conditional" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="how-contacted" name="how-contacted" type="radio" value="email" data-aria-controls="conditional-how-contacted">
          <label class="govuk-label govuk-radios__label" for="how-contacted">
        Email
      </label>
        </div>
          <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted">
            <label class="govuk-label" for="context-email">E-mailová adresa</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">

          </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="how-contacted-2" name="how-contacted" type="radio" value="phone" data-aria-controls="conditional-how-contacted-2">
          <label class="govuk-label govuk-radios__label" for="how-contacted-2">
        Mobil
      </label>
        </div>
          <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
            <label class="govuk-label" for="contact-phone">Telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">

          </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="how-contacted-3" name="how-contacted" type="radio" value="text" data-aria-controls="conditional-how-contacted-3">
          <label class="govuk-label govuk-radios__label" for="how-contacted-3">
        SMS
      </label>
        </div>
          <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-3">
            <label class="govuk-label" for="contact-text-message">Telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">

          </div>
  </div>
</fieldset>
</div>

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.

<div class="govuk-inset-text">
  <div class="govuk-form-group">
  <label class="govuk-label" for="input-tel-2">
    Zadajte vaše telefónne číslo
  </label>
  <input class="govuk-input" id="input-tel-2" name="tel"  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".

Aká je vaša národnosť?

Označte všetky možnosti, ktoré sú pre vás relevantné.

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="national-conditional-hint">
  <legend class="govuk-fieldset__legend">
    Aká je vaša národnosť?
  </legend>
  <span id="national-conditional-hint" class="govuk-hint">
    Označte všetky možnosti, ktoré sú pre vás relevantné.
  </span>
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="national-conditional" name="with-conditional-items" type="checkbox" value="sk">
          <label class="govuk-label govuk-checkboxes__label" for="national-conditional">
        slovenská
      </label>
        </div>
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="national-conditional-2" name="with-conditional-items" type="checkbox" value="cz">
          <label class="govuk-label govuk-checkboxes__label" for="national-conditional-2">
        česká
      </label>
        </div>
        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="national-conditional-3" name="with-conditional-items" type="checkbox" value="text" data-aria-controls="conditional-national-conditional-3">
          <label class="govuk-label govuk-checkboxes__label" for="national-conditional-3">
        občan inej národnosti
      </label>
        </div>
          <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-national-conditional-3">
            <label class="govuk-label" for="contact-text-message-2">Názov krajiny</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message-2" type="text" id="contact-text-message-2">

          </div>
  </div>
</fieldset>
</div>

Príklady

• Formulárové prvky
• Prepínače a začiarkavacie políčka
• Zarovnanie formuláru
• Malé ovládacie prvky