Textové pole (Input type="text")

Textové polia predstavujú vstupné prvky, ktorých hlavným cieľom je zber dát získaných od používateľov s cieľom dodať im žiadanú informáciu alebo službu. Pre správne pochopenie vyžadovaného údaja je potrebné zrozumiteľne popísať názov textového poľa. Základným pravidlom použitia je oboznámiť používateľa o povinnosti vyplnenia textového poľa.

Použitie textového poľa

Názov inštitúcie

Komponent textové pole sa primárne využíva vo formulároch. Veľkosť poľa zohľadňuje prípustný počet znakov daného poľa. Je potrebné zabezpečiť, aby koncový používateľ mohol zadať potrebné údaje aj na menších obrazovkách mobilných zariadení. Pri menších veľkostiach obrazoviek je vhodné škálovať polia na celú šírku obrazovky.

Samotná veľkosť vstupného poľa sa prispôsobuje typu údajov, ktoré bude používateľ zadávať - napríklad kratšie pole pre PSČ a dlhšie pre názov ulice. Label textového poľa je obmedzený na jeden riadok, pričom jeho maximálna šírka sa odvíja od odporúčaní pre čitateľnosť vzhľadom na použitú veľkosť fontu.

Ako sa používa

Ak zadávaný údaj je krátky voľný text.
Ak údaj nemá pevne definovaný formát.
Ak má používateľ zadať napr. meno a priezvisko, názov ulice, mesta alebo inú krátku informáciu.
Ak veľkosť poľa zodpovedá očakávanej dĺžke textu.
Ak nie je vhodné ani účelné použiť špecializovaný typ vstupu.

Ako sa nepoužíva

Ak je zadávaný údaj dlhý voľný text.
Ak údaj má pevne definovaný formát (e-mail, telefónne číslo dátum, atď.).
Ak používateľ vyberá hodnotu zo zoznamu - použite select, radio button alebo checkbox.
Ak potrebujete vstup automaticky validovať podľa typu.

Prístupnosť (Accessibility)

Komponent je v súlade s normami WCAG 2.2 AA. Komponent spĺňa požiadavky na kontrastné pomery a jeho súčasťou sú interakcie s klávesnicou a čítačkami obrazovky.

Klávesové ovládanie

Tab – presun zamerania klávesnicou do textového poľa alebo na ďalší prvok formulára.
Shift + Tab – presun zamerania klávesnicou na predchádzajúci prvok.
Enter – potvrdenie formulára (ak je pole súčasťou formulára).
Esc – zrušenie vstupu (iba ak je implementované správanie na úrovni formulára).
Zadávanie textu funguje štandardne pomocou klávesnice.

Základné pravidlá prístupnosti

Každý input musí mať jasný, programovo asociovaný label cez for="id" (v Reacte htmlFor).
V prípade zadávania osobných údajov nezabudnite pridať tzv. autocomplete, napr.:
<label for="firstName">Krstné meno:</label> <input name="firstName" id="firstName" type="text" autocomplete="given-name" />
Prípadný placeholder slúži len pre príklad (napr.: Jana Novotná). Placeholder NEFUNGUJE ako náhrada labelu a hintu a NESMIE vysvetľovať funkciu textového poľa.
Neaktívne pole (disabled) nesmie byť focusovateľné (zamerateľné klávesnicou).
Prípadný hint prepojte na textové pole cez atribút aria-describedby.
V prípade povinného poľa nezabudnite pridať inputu atribút required.
Hviezdička (označujúca povinné pole) musí byť vložená prostredníctvom elementu <span>, aby ju bolo možné pred asistenčnými technológiami skryť prostredníctvom atribútu aria-hidden="true".
Nezabudnite, že samotná hviezdička na označenie povinného poľa nestačí - musí byť dodatočne vysvetlená pomocou vysvetlivky označenia povinných polí.
Chybový hint musí mať atribút aria-describedby="error" a okrem farby, ikony a hintu upozornenia nezabudnite pre asistenčné technológie pridať atribút aria-hidden="true".

Implementácia textového poľa z ID-SK Frontend

Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od vašej technologickej infraštruktúry:

Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.

Základné požiadavky

Pred začiatkom integrácie sa uistite, že máte:

Node.js: verzia 4.2.0 alebo vyššia.
Dart Sass: verzia 1.0.0 alebo vyššia.
Nunjucks: verzia 3.0.0 alebo vyššia (ak chcete používať makrá).

Možnosti implementácie

1. Statická HTML implementácia (HTML + minifikované súbory)

Ak váš projekt nevyužíva Node.js alebo bundler (napr. Webpack, Vite), môžete použiť hotové buildy. Pri inštalácii z dist sa používajú kompilované a minifikované verzie šablóny so štýlmi. To znamená, že nebudete môcť:

selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty
zostaviť si vlastné štýly alebo komponenty na základe palety alebo typografických kombinácií
prispôsobiť si kód (napríklad prepísať farby alebo povoliť globálne štýly)
použiť dynamické komponenty z Nunjucks šablón

➜ Stiahnite a zahrňte zdroje

Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov. Skopírujte celý assets priečinok a minifikované súbory do rootu vášho projektu. Štruktúra by mala vyzerať približne takto:

project/ 
│ 
├── assets - images  
           - fonts 
├── index.html 
├── frontend.min.css 
├── frontend.min.js 
├── frontend.min.css.map 
└── frontend.min.js.map

➜ Prepojte štýly a skripty

Do časti head vložte minifikované css. Na záver body pripojte minifikovaný javascript.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Ukážka</title> 
    <link rel="stylesheet" href="frontend.min.css"> 
  </head> 
  <body> 
    <script type="module" src="./frontend.min.js"></script> 
  </body> 
</html>

➜ Skopírujte HTML kód

Zo stránky dokumentácie stiahnite HTML kód komponentu textové pole (otvorí sa v novom okne) a vložte ho do svojho HTML. Ak používate čisté HTML, musíte do značky <div> pridať atribút id. Tento atribút musí byť unikátny v rámci domény.

<div class="govuk-form-group govuk-input-component">
  <label class="govuk-label govuk-body-m" for="input-example">
    Názov textového poľa
    <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input" id="input-example" name="default" type="text">
  </div>
</div>

2. Pokročilá integrácia (NPM + SCSS + JS)

Nainštalujte balíkPre inštaláciu cez NPM spustite (po skončení inštalácie sa balík @id-sk/frontend objaví v node_modules):
```
npm install nunjucks --save
npm i @id-sk/frontend@3.0.0-beta.0-hotfix
```
Pridajte Nunjucks/HTMLDo pripraveného súboru (či už .html alebo .njk) vložte kód, ktorý nájdete vyššie.
Importujte štýlyPre import individuálneho IDSK komponentu, v tomto prípade Textového poľa, do svojho Sass súboru pridajte:
```
@import "node_modules/@id-sk/frontend/idsk/components/input/input";
```
Importujte JavascriptID-SK Frontend komponenty s JavaScript správaním majú vo svojom markupe nastavený atribút data-module. Pre import javascriptu textového poľa, vložte do .js súboru:
```
import { Input, createAll } from 'govuk-frontend' 

createAll(Input)
```

Doména gov.sk je oficiálna

Táto stránka je zabezpečená