site logo

Čísla ve formuláři podle HTML5

Zadávání čísel do formulářů a kontrolu správnosti zapsaného čísla značně zjednodušuje návrh standardu HTML5, který specifikuje nový formulářový element input type=number. Pomocí atributů můžeme nastavit povolený rozsah čísla, povolený počet desetinných míst a také povinnost vyplnit vstupní pole. Zda je číslo správné zkontroluje browser pomocí naitivní validace i při vypnutém javascriptu.

Pro účely testování tohoto prvku je připraven miniformulář s jedním vstupním polem typu number, jedním textovým polem pro zobrazení odeslaného čísla a odesílacím tlačítkem. Testování nového formulářového prvku má smysl jen v browserech Chrome, Safari a Opera. Browsery Firefox a IE prvek number zpracují jako běžný prvek typu text, tedy neprovádí se žádná kontrola. Povolený rozsah čísla je 0...2000000 (dva miliony), jedno desetinné místo a vyplnění pole je povinné.

viditelný formát
odeslaný formát

Číslo můžete zapsat přímo z klávesnice, použít tlačítek ve formulářovém prvku (spinner), nebo hodnotu nastavit pomocí kurzorových šipek na klávesnici (nahoru, dolů). Při odesílání formuláře je provedena kontrola a pokud je číslo není správné je ohlášena chyba. Správné číslo je odesláno na server, který je vrátí zpět do dvou polí formuláře, aby byl viditelný případný rozdíl ve formátování čísla podle národních zvyklostí.

Nativní validace v browserech Opera, Safari a ve starším Chrome vyžaduje zápis čísla bez oddělení tisíců a s oddělením desetinné části tečkou. To je běžně používaný formát zápisu čísel při programování. Národní zvyklosti vyžadují poněkud jiný způsob zápisu čísel viz. Wikipedie a tomu se snaží přizpůsobit i Chrome.

Který znak bude platit pro oddělení desetinné části (čárka, nebo tečka) určí Chrome podle jazyka browseru, nyní podle nastavení v ovládacích panelech. Oddělení řádů (tisíců) je diskutabilní a nyní není použito. Např. pro údaj letopočtu formátování vhodné není, pro částku v bankovním převodu vhodné je. Důležité ale je aby všechny browsery používaly stejný způsob formátování desetinných čísel.

Desetinné číslo z elementu number odeslané na server a také hodnota tohoto elementu získaná pomocí javascriptu je vždy s desetinnou tečkou. Formát odeslaného čísla, tak jak je viditelný na serveru najdete v šedém poli formuláře (po odeslání formuláře) a je vždy s desetinnou tečkou. POZOR to platí jen tehdy, když browser umí pracovat s formulářovým prvkem typu number.

Atributy elementu number

<input type="number" name="..." min="0" max="2000000" step="0.1" value="123.4" required>

Atribut  type="number" je povinný pro tento typ formulářového prvku. Stejně tak jako všechny ostatní prvky formuláře, i prvek number by měl mít unikátní jméno  name="...". Nepovinné atributy rozsahu  min a max nastavují přípustné hranice velikosti vloženého čísla. Atribut  step pak určuje velikost kroku, o který se číslo bude zvětšovat, nebo zmenšovat při nastavení hodnoty kurzorovými klávesami, nebo pomocí ovládacího prvku spinner. Počet případných desetinných míst v atributu step určuje přesnost zadaného čísla, větší počet zapsaných desetinných míst se vyhodnotí jako chyba. Defaultní hodnota pro velikost kroku je step=1. Pokud má být některý atribut rozsahu desetinné číslo, použijte desetinnou tečku jako oddělovač desetinné části bez ohledu na lokalizaci.

Když potřebujete zrušit omezení počtu desetinných míst podle atributu step, zadáte step="any". Potom platí defaultní hodnota kroku "jedna" a desetinnou část čísla zapíšete pomocí numerických kláves. Opera tuto formu atributu zatím dobře nezvládá.

Nepovinný atribut  value="..." použijeme při editování hodnoty uložené v databázi, případná real  hodnota opět musí být uvedena s desetinnou tečkou s počtem desetinných míst ve shodě s atributem step. Atribut  required určuje, že pole nesmí zůstat prázdné.

Nepovinný atribut  placeholder="..." lze využít jen v Opeře, v Chrome a Safari nefunguje. Pokud chcete využít tento atribut pro nápovědu zda použít desetinnou tečku, nebo čárku nejde to.

Element number a CSS

Pomocí CSS je možné nastavit všechny běžné rozměry prvku jako je width, height, lze nastavit typ rámečku pomocí vlastnosti border a nastavit barvu pozadí background. Nastavení barvy pozadí přepne vzhled prvku do podoby klasik, tak jak je známý z win2000.

Často je zvykem zarovnat čísla vpravo. Tak zarovná čísla Opera v defaultním nastavení elementu number. Chrome zarovná čísla vlevo (stejně jako obecný text), i když je možné explicitně předepsat zrovnání vpravo (text-align: right;). Ovládací tlačítka spinner vykreslí Chrome a Safari uvnitř rámečku prvku, Opera vykreslí spinner až za rámeček a to umožní vykreslit ovládací tlačítka poněkud větší. Opera zobrazuje tento element chybně o 2 pixely širší.

V browserech na bázi webkitu lze odstranit ovládací prvek spinner  pomocí následujícího kódu CSS. Na druhou stranu spinner slouží jako symbol formulářového prvku number.


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;}

Poznámky

Praktická implementace slibného formulářového elementu input type="number"  v několika browserech je spíše rozpačitá. Zatím zcela chybí v browserech Firefox a IE. Webové aplikace na intranetech, které pracují převážné s číselnými údaji ještě nějakou dobu musí spoléhat na klasický textový box a validaci dat pomocí javascriptu, místo aby spoléhaly na nativní validaci a nastavení několika atributů.

Pokud zadáváte celá čísla a nezkoušíte oddělovat tisíce, většinou nenarazíte na žádný problém. Desetinná čísla jsou náročnější. Chybu může způsobit klávesnice přepnutá do jiného jazyka, než na jaký je nastaven browser Chrome ve Windows. Znak "tečka" na numerické části klávesnice mění význam podle národních zvyklostí. Např. při zapnuté české klávesnici se tečka změní na čárku. Pak v anglické verzi Chrome a české klávesnici budeme zadávat z numerické klávesnice chybné desetinné číslo.

Počet desetinných míst určuje atribut step, ale není k dispozici jednoduchý nástroj jak sdělit uživateli kolik desetinných míst se má vyplnit. Při překročení nastaveného počtu desetinných míst vznikne chyba, stejně tak je ohlášena chyba, když číslo zapsané z klávesnice, není násobek kroku. Pak je potřeba použít spinner, nebo kurzorové klávesy a číslo upravit. Zadávání velkých čísel pomocí spinneru, nebo kurzorových kláves je zdlouhavé, většinou uživatel asi použije přímý zápis z klávesnice.

Chybové validační zprávy ohlásí překročení a podkročení limitů, pokud je nastaven atribut required ohlásí i povinnost vyplnit pole. Všechny ostaní chyby např. záměna desetinného oddělovače, nebo záměna číslice "nula" za znak "O", a zapomenutá mezera v čísle (Opera) jsou shrnuty do jednoho typu chybové zprávy a není vždy zcela jasné o jakou chybu se jedná. V takovém případě je potřeba použít spinner, nebo kurzorové klávesy a zvýšit, nebo snížit hodnotu. Taková akce upraví číslo podle požadovaného tvaru. Chybové hlášky v Chrome i v Opera jsou lokalizované.

updated 2011-10-12