JavaScript – formuláře

17. března 2000

•

Vážení čtenáři, ve čtvrtém díle provedeme malý úvod do formulářů, a spojení formulářů s JavaScriptem. Formuláře jsou přirozenou součástí HTML jazyka už velice dlouhou dobu. Umožňují zapisovat různé údaje a odesílat je různými způsoby na různá místa. Určitě jste se sami s nějakým formulářem na internetové dálnici setkali. A proč údaje z formuláře nezasílat pomocí JavaScriptu?

Začněme malým příkladem. Vytvořím editační řádek, do kterého se bude zapisovat adresa nějaké webové stránky. A k tomu tlačítko s nápisem "Otevři stránku". Pokud se na tlačítko klikne, prohlížeč otevře nové okno, které načte stránku zapsanou v editačním řádku. Takto to bude vypadat:

Pokud jste si vyzkoušeli funkci, vrhneme se na to, abychom vše byli schopni v JavaScriptu naprogramovat, a hlavně pochopit. Začnu rovnou tím, že uvedu výpis HTML stránky, která je provádí to, co jste si teď vyzkoušeli:

<html>
<head>
<title>První pokus</title>
</head>
<body>
<form name="fred">
<input type="text" name="adresa" value="http://www.interval.cz">
<input type="button" name="otevirac" value="Otevři stránku"
onClick="self.open(self.document.forms.fred.adresa.value,’bill‘)">
</form>
</body>
</html>

Začnu tím, že trochu vysvětlím, jak se formuláře píší v HTML. Pokud totiž neprogramujete v JavaScriptu, pak nemáte moc příležitostí použít formuláře. Formuláře v HTML začínají značkou <form> a končí </form>. V jedné HTML stránce můžete mít formulářů i více. Uvnitř formulářů můžete mít různé prvky, jako jsou tlačítka, editační řádky, různé seznamy a mnoho dalších věcí. Smyslem formulářů je, že údaje, které navolíte do prvků uvnitř formuláře, lze poslat někomu, kdo je zpracuje.

V ukázkové HTML stránce můžete vidět, že jsem použil značku <form> s atributem name="fred". Tím jsem udělal to, že jsem si formulář pojmenoval. Můj formulář se tedy jmenuje fred. Jméno formuláře, jak později uvidíme, je důležité, abychom s ním mohli pracovat pomocí JavaScriptu. Uvnitř formuláře mám dva prvky, a to editační řádku a tlačítko. V HTML je to zapsáno pomocí značky <input>, která říká, že jde o prvek formuláře. (Pro přesnost raději napíši, že jsou i takové prvky formuláře, které začínají jinou značkou, než <input>.) O tom, o jaký prvek se jedná, rozhoduje atribut type. Pokud chci editační řádku, napíšu type="text". Pokud chci tlačítko, napíšu type="button".

Dále vidíte, že jsem si jak editační řádku, tak i tlačítko pojmenoval pomocí atributu name. Editační řádka se jmenuje adresa a tlačítko má název otevirac. Oba prvky také mají atribut value. U editační řádky atribut value určuje text, který se objeví v řádce, a který může být editací přepsán. Zde je to text "http://www.interval.cz". U tlačítka atribut value určuje text, který se objeví na tlačítku, u nás je to "Otevři stránku".

Zatím jsem tedy mluvil pouze o HTML, a teď navážeme na JavaScript. Pokud se podíváte do výše uvedeného výpisu HTML, můžete tam u tlačítka najít atribut onClick. Tento atribut určuje, co se má udělat, když klikneme na tlačítko. A to, co má udělat mu předepíšeme jako příkaz v JavaScriptu.

A nyní konečně rozeberu příkaz, který se provede při kliknutí na tlačítko. Asi už poznáváte příkaz self.open, který otevírá nové okno. Jak jsem uvedl v minulém díle, je potřeba pro otevírání okna uvést alespoň dva údaje, a to adresu stránky, která se načte do nového okna a jako druhý údaj jméno okna. Adresa je dána trochu krkolomně jako:

self.document.forms.fred.adresa.value

Jako druhý údaj je jméno okna, které je v našem případě bill. Ovšem zajímavý pro nás bude podrobnější popis adresy. Zkusme si tedy zahrát na luštitele a rozšifrovat, co se pod tou záhadnou adresou myslí. Adresa je vlastně několik jmen oddělených tečkami. A protože jsme tečky uváděli v minulém díle v souvislosti s objekty, tak je jasné, že o objekty půjde.

Jako první je uvedeno self. Toto jméno už známe z minulého dílu o JavaScriptu, pomocí self můžeme pracovat s oknem prohlížeče. Jako další je uvedeno document. Document je objekt, který představuje obsah okna, tedy pomocí něho můžeme pracovat s HTML stránkou zobrazenou v okně. Celá dvojice self.document tedy znamená, že požadujeme práci s dokumentem zobrazeným v okně prohlížeče. Jinak řečeno, self.document nám umožňuje zasahovat do HTML stránky v okně, tedy mimo jiné i do formuláře, což právě potřebujeme.

Za self.document je další jméno, a to je forms. Populárně řečeno, forms je šéfem všech formulářů, a pomocí něho se můžeme dostat na libovolný formulář na stránce. Protože máme jediný formulář, a ten jsme pojmenovali fred, hned se přes šéfa forms dostáváme na freda. tedy self.document.forms.fred je cesta, jak pracovat s naším formulářem nazvaným fred.

Protože adresu webové stránky, která se zobrazí v novém okně chceme přečíst z editační řádky, poprosíme formulář fred, aby nás přenesl na naší editační řádku. Tu jsme pojmenovali adresa, takže následuje adresa:

self.document.forms.fred.adresa

A tímto krkolomným postupem jsme se přes objekty dostali až na naší editační řádku, ve které je zapsána webová adresa. Abychom jí získali, musíme zakřičet na editační řádku příkazem value, který nám umožní získat to, co je v editační řádce napsáno:

self.document.forms.fred.adresa.value

Celý tento magický řádek nám tedy získává to, co je psáno v editační řádce. A výsledek vidíte na začátku toho dílu.

Vážení čtenáři, dnešní díl byl trochu náročnější, ale doufám, že se podařilo o další kousíček poodkrýt tajemství zvané JavaScript. A to je pro tento díl vše.