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

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


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


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

Aktívny stav

  • #FFBF47
  • $focus-colour

Pomocný text


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


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


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

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

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?


  
    <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

V ktorej časti Slovenska žijete?

alebo


  
    <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č


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

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?

Označte možnosti, ktoré sa vás týkajú

  
    <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


  
    <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

Prepínače

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

Ako vás máme kontaktovať?

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


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

Aká je vaša národnosť?

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

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

  

Príklady