Formulářové tipy - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » JavaScript  

13. března 2001, 00.00 | Bez formulářů se dnes při tvorbě www stránek bezesporu neobejdete - jde o základní prvek komunikace mezi návštěvníkem a webmasterem. My si v tomto článku ukážeme, jak lze tyto obvykle stereotypní formuláře oživit.

Bez formulářů se dnes při tvorbě www stránek bezesporu neobejdete - je to základní prvek komunikace mezi návštěvníkem a webmasterem, bez které kvalitní web nemůže fungovat. My si v tomto článku ukážeme, jak jdou tyto obvykle stereotypní formuláře oživit.

Metoda Focus a zašedávání tlačítek
Pokud používáte na svých stránkách fulltextové vyhledávání či přístup přes heslo, pak váš návštěvník jistě ocení, pokud mu ušetříte práci a hned při nahrání stránky mu nastavíte kurzor do tohoto textového políčka. Vše si ukážeme na příkladě:

<form name="nasForm" onSubmit="return false;"> <input size=30 type="text" name="nasText"> <input type="submit" value="Hledej!" name="naseTlacitko"> </form> <script type="text/JavaScript"> document.forms.nasForm.nasText.focus(); </script>

Vidíme, že nastavení kurzoru na určené místo ve stránce zajišťuje metoda focus() a že v tomto případě jsme si pojmenovali formulář nasForm a textové políčko nasText. Metodu focus() podporují všechny prohlížeče s podporou JavaScriptu.

Z operačního systému Windows určitě znáte zašedlá políčka - my si ukážeme, jak pomocí nich zajistit, aby, pokud bude textové políčko prázdné, bylo políčko pro odeslání zašedlé a formulář tak nešel odeslat. Podporu zašedlých políček má však v sobě zabudovanou pouze Internet Explorer od verze 4. Tady už je ale předchozí zdrojový kód obohacený o volání funkce validation:

<form name="nasForm" onSubmit="return false;"> <input size=30 type="text" name="nasText"> <input type="submit" value="Hledej!" name="naseTlacitko"> </form> <script type="text/JavaScript"> document.forms.nasForm.nasText.focus(); validation(); </script>

Funkce validation potom vypadá takhle:

function validation () { if (document.forms.nasForm.nasText.value == "") document.forms.nasForm.naseTlacitko.disabled = true; else document.forms.nasForm.naseTlacitko.disabled = false; setTimeout("validation()" , 200); }

Nejprve zjistí, jestli textové políčko obsahuje text a podle toho buď zapne nebo vypne vlastnost disabled našeho tlačítka pro odeslání. Zajímavý je potom poslední řádek - ten zajišťuje neustálé opakování funkce po 200 milisekundách. Oba dosud popsané skripty si můžete vyzkoušet v následujícím příkladě:



Označení textu v políčku a dynamická změna barvy
Nyní si ukážeme následující příklad: Textové políčko, do kterého musíte napsat jméno vašeho oblíbeného serveru. Při špatné odpovědi na to budete upozorněni dialogovým oknem a zároveň bude text v políčku označen do bloku (toto podporuje jak Netscape Navigator (NN), tak Internet Explorer (IE)). Při správné odpovědi na to opět budete upozorněni dialogovým oknem a navíc se textové políčko i tlačítko zbarví do modra (to NN nepodporuje) a již nebude možné změnit text v políčku ani opětovně stisknout tlačítko (podporuje NN i IE). Nemusím doufám připomínat, že jediná správná odpověď je Builder :o) Tady už je slíbená otázka, doporučuji vyzkoušet obě varianty:

Váš oblíbený server:

A tady už je zdrojový kód celého formuláře:

<form name="nasForm2" onSubmit="check();return false;"> Váš oblíbený server: <input size=30 type="text" name="nasText2" onFocus="rdnl();"> <input type="submit" value="OK" name="naseTlacitko2"> </form>

Můžeme si všimnout, že při odeslání se formulář ve skutečnosti neodešle řídícímu skriptu, ale pouze se spustí funkce check(). Dále se při najetí kurzorem na textové políčko spustí funkce rdnl(). Nyní si již můžeme ukázat zdrojové kódy obou funkcí:

var dfctr; function check () { if (document.forms.nasForm2.nasText2.value != "Builder") { window.alert ('Špatná odpověď. Zkuste to znovu.'); document.forms.nasForm2.nasText2.focus(); document.forms.nasForm2.nasText2.select(); } else if (dfctr != true) { dfctr = true; window.alert ('Správná odpověď :o)'); document.forms.nasForm2.naseTlacitko2.blur(); document.forms.nasForm2.nasText2.blur(); if (document.all) { document.all.naseTlacitko2.style.backgroundColor = "#336699"; document.all.nasText2.style.backgroundColor = "#336699"; } } } function rdnl () { if (dfctr == true) document.forms.nasForm2.nasText2.blur(); }

Nejdříve inicializujeme proměnnou dfctr, jejíž význam si vysvětlíme později. V případě odpovědi jiné než Builder se ukáže dialogové okno, poté se zaměří kurzor na textové políčko (metoda focus()) a nakonec se text v něm označí do bloku (pomocí metody select()).

V případě odpovědi Builder uložíme do proměnné dfctr hodnotu true a kurzor se přesune mimo políčko i tlačítko (pomocí metody blur()). Nakonec prohlížeče, které znají zápis document.all, změní pomocí parametru backgroundColor barvu políčka i tlačítka.

Pokud poté najedeme kurzorem na textové políčko, spustí se funkce rdnl(), která kurzor přesune mimo políčko pomocí metody blur() (díky tomu, že proměnná dfctr již má hodnotu true). Z tohoto důvodu nemůže být změněna hodnota Builder v tomto políčku. Pokud stiskneme tlačítko, spustí se sice funkce check(), ale nic se nestane, protože hodnota dfctr je true a není tak splněna jedna z podmínek.

Změna barvy elementu v reakci na událost
V předchozím příkladě jsme si ukázali změnu barvy uprostřed funkce pomocí dlouhého zápisu. Nyní si ukážeme, jak takovou změnu udělat bez zvláštních funkcí pomocí "kouzelného" slovíčka this. Bohužel podpora změny barvy pozadí formulářových elementů úplně chybí v NN 4.x a nevím, jak je na tom v tomto ohledu NN 6.

Pokud tedy používáte IE, podívejte se na příklad:


A zdrojový kód formuláře:

<form onSubmit="return false;"> <input type="button" value="Stiskni" onMouseOver="if (document.all) { this.style.backgroundColor='#000000';this.style.color='#ffffff';}" style="background-color:#ffffff;" onMouseOut="if (document.all) { this.style.backgroundColor='#ffffff';this.style.color='#000000';}"> <input size=30 type="text" style="background-color:#eff1f8;" onFocus="if (document.all) this.style.backgroundColor='#ffffff';" onBlur="if (document.all) this.style.backgroundColor='#eff1f8';"> </form>

Jenom doplním, že barvu textu elementu určuje parametr color a barvu pozadí elementu parametr backgroundColor.

A to už jsme na konci dnešního článku. Doufám, že se vám dnešní tipy líbily a budou vám inspirací při tvorbě vašich vlastních formulářů.