Experimenty s formulářovým elementem input type="range"
Nový formulářový prvek podle specifikace HTML5 input type="range", někdy nazývaný slider a jeho praktické použití v několika příkladech najdete v tomto článku. V browserech Opera, Chrome, nebo Safari uvidíte celé ukázky, ostatní browsery zobrazí místo slideru běžný prvek typu text a ukázky nejsou funkční. Cross browser řěšení podobného prvku, složeného z klasických HTML prvků s pomocí JavaSkriptu můžete najít na stránce formulář datum a čas, nebo v článku Ajax na serveru.
Element input type="range" nabývá číselné hodnoty v rozmezí atributů min a max, s krokem step. Hodnotu nastavíme kliknutím na vodící lištu, tažením jezdce, nebo pomocí kurzorových kláves (zatím umí jen Opera). Když je rozměr prvku v pixelech menší než celkový možný počet kroků a ovládání myší tak není dost přesné, kurzorovými klávesami nastavíme i "subpixelovou" hodnotu, která může být i desetinné číslo.
Výhodou prvku je plynulé nastavení a optická vazba na rozsah, kde se nastavená hodnota nachází. Použití je spíše jako interaktivní prvek v aplikacích, než zadávání hodnoty v běžných formulářích. Ostatně dovedete si představit řízení hlasitosti pomocí běžného textového formulářového prvku a zápisem čísla? Ukážeme i další možnosti použití prvku input type="range".
Stránkování pomocí input type="range"
Procházení záznamů z databázové tabulky, která obsahuje mnoho záznamů většinou vyžaduje stránkování. Na jedné webové stránce je zobrazena jen část databáze (stránka), zbývající stránky se zobrazují pomocí navigace. Experimentální navigační formulář umožní přechod na sousední stránky, přímou volbu libovolné stránky s použitím prvku input type="range" a naznačuje směr pohybu stránkování.
| id | col 1 | col 2 | --- |
|---|---|---|---|
| 1000 | --- | --- | --- |
| 999 | --- | --- | --- |
| 998 | --- | --- | --- |
| 997 | --- | --- | |
| 996 | --- | --- | Simulace databázové tabulky s celkovým počtem 1000 záznamů. |
| 995 | --- | --- | Velikost stránky je nastavena na 10 záznamů na jednu stránku. |
| 994 | --- | --- | |
| 993 | --- | --- | --- |
| 992 | --- | --- | --- |
| 991 | --- | --- | --- |
Při prvním přístupu k databázi je načtena stránka s nejnovějšími záznamy a ukazatel prvku range je vpravo a ukazuje na poslední stránku. Postupné zobrazování stránky po stránce dosáhneme standardně pomocí tlačítek označených: « » . Když potřebujeme zobrazit určitou stránku použijeme slider a odesílací tlačítko. Element range umožní zvolit stránku jen z nastaveného rozsahu, proto není potřeba validace hodnoty.
Záměrně bylo vynecháno ne zcela jednoznačné slovíčko další pro nápis na stránkovacím tlačítku. Není totiž zcela jasné, zda slovo další znamená novější, nebo starší záznamy v databázi, či příspěvky do blogu. Aplikace na intranetu obvykle zobrazují databázové tabulky i grafy a uvedený způsob stránkování je shodný pro oba pohledy na data.
HTML: <form method="get" name="f1" action="range.asp"> <input type="hidden" name="act" value="47"> <input type="submit" name="bck" value="«"> stránka 47 ze 100 <input type="submit" name="fwd" value="»"> <input type="range" name="page" value="47" min="1" max="100" step="1" onchange="fn1(page.value)"> <input type="submit" name="subm" value="nastav ukazatel" id="subm"> </form> JavaScript: function fn1(x) { document.getElementById("subm").value = "načti stránku " + x; }
Výpis kódu pro stránkovací formulář neobsahuje serverový kód pro práci s databází. Serverový skript musí zjistit celkový počet záznamů v tabulce, podle nastavené velikosti stránky a vyžádaného čísla stránky přejít na požadované záznamy a doplnit do HTML kódu parametry stránky (označené červeně). Zobrazený HTML kód zobrazuje stav kdy byla vyžádána stránky přibližně uprostřed tabulky.
Nastavení datumu a času pomocí input type="range"
Nastavení datumu a času je v intranetových formulářích často používáno pro označení některých událostí (prostoj, změna výrobního sortimentu, plánování času ap). Jak by mohlo vypadat zadávání času a datumu pomocí prvku input type=range ukazuje následující experiment.
V nepřetržitém provozu je obvykle den rozdělen na 3 pracovní směny. Vzhledem ke střídání směn, pracovní den začíná ráno v 6:00 a končí následující den v 5:59. Výrobní data se obvykle vztahují k určité směně, nebo výrobnímu dni. Proto experimentální prvek pro zadávání času začíná v 2011-12-31 06:00, o půlnoci se mění datum a konec rozsahu je následující den v 05:50. Pro naše potřeby je krok stanoven na 10 minut, což je odpovídající požadovaná přesnost vzniku události. Hodnotu step je možné změnit a tak nastavit přesnost např. na jednu minutu.
HTML: <form method="get" name="f2" action="range.asp"> <input type="range" name="dt" min="1325307600000" max="1325393400000" step="600000" onchange="dtToStr(dt.value)"> <input type="text" name="inpDt" id="inpDt" value="..."> </form> JavaScript: function dtToStr(n) { var dto = new Date(0); dto.setMilliseconds(n); var s = dto.getFullYear() + "-" + (dto.getMonth() + 1) + "-" + dto.getDate(); var tm = dto.getHours(); s += " "; s += (tm < 10) ? "0" + tm : tm; tm = dto.getMinutes(); s += ":" s += (tm < 10) ? "0" + tm : tm; document.getElementById("inpDt").value = s; }
Hodnoty atributů rozsahu min, max a step jsou nastaveny tak aby vyhověly JavaSkriptovému objektu Date, odpovídá to počtu milisekund od 1970-1-1, proto tak velká čísla. Červeně označené hodnoty jsou začátek a konec ukázkové pracovního dne, aktuální hodnoty může dopočítat serverový skript, nebo klient. Objekt Date obsahuje řadu metod pro převod číselné hodnoty na datum (řetězec), zde je použita uživatelská funkce.
input type="range" jako přepínač
Formulářový prvek range, neboli slider je možné použít i ve funkci přepínače, nebo jako checkbox. Element nastavíme tak, aby mohl nabývat jen pro dvě možné hodnoty: 0/1. Experimentální switchbox v současné době bohužel funguje jen v browserech založených na renderovacím jádru webkit.
Pokud si prohlížíte tuto stránku v jiném browseru než Chrome, nebo Safari, vpravo najdete screenshot tohoto experimentu se zobrazením obou stavů prvku. V Opeře je sice prvek funkční, ale protože není možné použít styl pro ukazatel prvku (thumb) je vzhled nedokonalý. Ostatní browsery jsou z tohoto experimentu spíše zmatené.
Ošetření běžného prvku checkbox na straně serveru není právě intuitivní. Uložení stavu prvku checkbox z formuláře do databáze a obnovení HTML kódu formuláře z databáze vyžaduje testy if {...} else {...} Při zápisu je nutné testovat zda formulář obsahuje hodnotu prvku checkbox, při obnovení formuláře je potřeba testovat zda vložit atribut checked do prvku. Uvedený experimentální prvek umožní ukládat i obnovit hodnotu prvku přímo, bez testů.
CSS: input[type='range'].swB { width: 86px; height: 26px; -webkit-appearance: none; background-image: url("../files/rangeSwBg.png"); } input[type='range'].swB::-webkit-slider-thumb { width: 43px; height: 26px; -webkit-appearance: none; background-image: url("../files/rangeSwThumb.png"); } HTML: <input type="range" class="swB" name="cB" min="0" max="1" step="1" value="0">
Prvek range jako přepínač je složen ze dvou obrázků, jeden tvoří pozadí prvku s popisem stavů přepínače, druhý obrázek je ukazatel, který střídavě skrývá text neaktivního stavu. Selektor pro styl ukazatele nazývaný shadow DOM umí pouze browsery postavené na jádru webkit.
Úprava vzhledu input type="range" pomocí CSS
Použít CSS na prvek input type="range" je poněkud předčasné, ale přece jen několik pokusů. Součást prvku v Opeře je i stupnice, kterou jsem se pokusil dostat i do Chrome a Safari. Dále jsem se pokusil změnit tvar ukazovátka, změnit vodorovnou polohu prvku na svislou a označit aktivní prvek pomocí vlastnosti outline.
Stupnici lze vložit pomocí vlastnosti background, ale není to dokonalé. Opera neumožní zrušit původní stupnici, takže se obě stupnice "hádají". Tvar ukazovátka se podařilo nastavit jen v Chrome a Safari, v Opeře tvar ukazovátka změnit nejde.
Svislá orientace prvku se podařila v Opeře, Chrome i Safari. V Opeře dojde ke změně na základě porovnání vlastností width a height podle větší hodnoty. Pro browsery na bázi Webkitu je nutné použít specifický prefix -webkit-appearance: slider-vertical;, pak ale nejde nastavit stupnici a ukazatel.
Označení focus je výhodné když chceme prvek ovládat pomocí kurzorových kláves, protože tyto klávesy se používají i pro rolování stránky a focus označí kam je směrován text z klávesnice. Focus je viditelný jen v Opeře, a také jen Opera reaguje na kurzorové klávesy. Následuje výpis použitého CSS kódu.
.rangeH {width: 100px; height: 20px; margin: 0; padding: 0; border: 0;
background-image: url("../files/rangeScale.png");
-webkit-appearance: none; background-repeat: no-repeat;}
.rangeH::-webkit-slider-thumb, {-webkit-appearance: none;
width: 11px; height: 11px;
background-image: url("../files/rangeThumb.png")}
.rangeH:focus, .rangeV:focus {outline: 1px solid #28f;}
.rangeV {width: 20px; height: 100px; margin: 0; padding: 0;
-webkit-appearance: slider-vertical;}
Browsery Chrome a Safari umožní vykreslit opravdu stylovaný prvek range. Opera zvládne fungující prvek, s omezenou možností použití stylů. Browsery IE a FF místo prvku range vykreslí běžný formulářový prvek typu text a není jasné kdy v těchto browserech bude možné element range používat.
updated 2011-03-19