03 - Základy editace dynamických stránek

Transkript

1 Dynamické WWW stránky V předchozí kapitole byly popsány tagy jazyka HTML, kterým se říká statické. Jinými slovy, lze jimi vytvořit plnohodnotnou a kvalitní statickou stránku. To znamená, že stránka sice bude obsahovat všechny potřebné informace, obrázky, tabulky, hypertextové odkazy a podobné prvky, ale nebude dávat uživateli žádnou možnost interaktivně reagovat na obsah stránky. Uživatel nebude mít k dispozici tlačítka, rozevírací nabídky, dialogy pro vstup údajů, údaje generované podle aktuálního stavu apod., jak to již nabízejí dynamické WWW stránky. To vše již vyžaduje náročnější strukturu HTML dokumentu a něco víc než pouhé tagy HTML. Na tomto místě je dobré zmínit, že studium této kapitoly bezpodmínečně vyžaduje dobrou znalost kapitoly předchozí, tj. tvorby klasických HTML stránek a tagů! Formuláře Formuláře jsou prvky, jejichž pomocí může návštěvník stránek komunikovat se serverem. Jedná se o nejrůznější rozevírací nabídky, tlačítka, dialogy, přepínače apod. Jejich výhodou je velmi snadné a intuitivní ovládání a to, že vypadají a plní stejnou funkci jako stejné prvky v systému Windows. Na obrázku vpravo je ukázka výřezu z klasické stránky pro vytvoření uživatele na jednom serveru. Můžete si všimnout, že na jedné stránce je hned několik formulářových prvků (dialogy, přepínače, rozevírací nabídka, dialogy s hvězdičkovým zobrazováním a tlačítko). S formuláři jste se jistě na internetových stránkách již setkali. Upozornění: Formuláře jako takové samy o sobě neumějí plnit žádnou funkci. Vždy je potřeba svázat je s nějakou procedurou nebo skriptem, který je naprogramován pro příjem dat z formuláře a jejich zpracování. To znamená, že na následujících řádcích se sice naučíte vytvářet pěkně vyhlížející formuláře, ale pokud jim zároveň nebudete umět vdechnout život, nebudou k ničemu. Párový tag Objeví-li se kdekoliv na stránce jakýkoliv typ formuláře (bez ohledu na to, zda to bude tlačítko, dialog, či cokoliv jiného), musí být ohraničen párovým tagem. Ten sice není důležitý pro samotný formulář, ale je velmi důležitý pro provázání formuláře s konkrétní akcí (viz předchozí upozornění). Tag <INPUT> Většina tagů pro tvorbu formulářů je spjata s tagem INPUT. Ten je proto velmi důležitý. Tag <INPUT> totiž prostřednictvím svého parametru TYPE určuje, o jaký prvek se přesně jedná. Například <input type= text > značí dialog, <input type= radio > značí přepínač apod. Více pochopíte po přečtení následujících odstavců. Dialog Dialog je prvek určený k zadávání textu, resp. textového řetězce ze strany uživatele. K vytvoření dialogu je určen tag <input>. Pro začátek napište do vašeho HTML dokumentu následující tři řádky. Dokument uložte a zobrazte v prohlížeči. <INPUT TYPE= text > 1

2 Na stránce bude vidět dialog o určité velikosti, do kterého budete moci psát libovolný text. Jedná se o naprosto nejjednodušší možnou variantu defi nice dialogu. Tag <input> ale může mít celou řadu parametrů, které ovlivňují jeho chování. Upravte předchozí příklad podle následujícího vzoru. <FORM NAME= pokus > Zadejte Vaše jméno: <INPUT TYPE= text NAME= dialog SIZE= 40 MAXLENGTH= 40 > Před tagem <INPUT> můžete napsat text, který bude na internetové stránce umístěn před dialogem. Podobně lze umístit text i za dialog. V této souvislosti je dobré si uvědomit, že dialog či jiný prvek formuláře je pouze dalším HTML prvkem, který má podobné vlastnosti jako ostatní HTML prvky, např. hypertextové odkazy, obrázky atd. Parametr TYPE Jak již bylo uvedeno v úvodu této kapitoly, parametr TYPE určuje význam formulářového prvku. Jestliže jeho hodnota je text, znamená to, že se jedná o dialog s možností vstupu textového řetězce. Příbuznou hodnotou je password (např. <input type= password >). V tomto případě bude dialog na první pohled zobrazen stejně jako v předchozím případě, ale při vkládání textu budou namísto písmen zobrazovány hvězdičky. Tento typ dialogu se používá hlavně pro vstup a zadávání hesel, aby zadávaný řetězec nebyl vidět. Parametr NAME Parametr NAME formulářový prvek přímo neovlivňuje. Nepřímo je ale důležitý v okamžiku, kdy bude dialog svázán s nějakou konkrétní operací, která se má provést (např. odeslat text na server apod.). Parametr slouží k pojmenování prvku. Parametr SIZE Parametr SIZE je určen k nastavení velikosti (resp. délky) dialogu. Zkuste zadat větší číslo a uvidíte, jak se dialog natáhne. Pozor, velikost dialogu neovlivňuje počet znaků, které může dialog obsahovat. K tomu je určen parametr MAXLENGHT. Parametr MAXLENGHT Parametr MAXLENGHT je určen k nastavení maximálního počtu znaků, které může dialog obsahovat. Nastavíte-li např. maximální počet na 10 a budete chtít psát dál, prohlížeč vás prostě nepustí. Tento parametr nemá nic společného s parametrem SIZE. Je tedy klidně možné do vizuálně malého dialogu zadat dlouhý řetězec, a do velkého dialogu naopak pouze omezeně dlouhý řetězec. Parametr VALUE Parametr VALUE se používá k nadefi nování tzv. přednastaveného textu. Pokud jako součást tagu INPUT uvedete např. VALUE= Karel, znamená to, že v dialogu bude předem vepsán text Karel. Uživatel ho pochopitelně může smazat nebo jakkoliv editovat. Tento parametr má význam v těch případech, kdy tvůrce stránky předpokládá, co asi uživatel zadá, a proto se mu jeho práci snaží usnadnit. Poznámka: Uvedené parametry a jejich význam se u velké části formulářů opakují. Proto u následujících prvků nebudou všechny opakující se parametry uváděny. 2

3 Textový rámeček (pole) Textový rámeček je prvek, který umožňuje ze strany uživatele zadávat delší texty (např. delší odstavce, články, popisy apod.), pro něž by nebylo vhodné použít prostý dialog. Velikost vloženého textu není omezena. Textový rámeček vytvoříte prostřednictvím tagu TEXTAREA. Pozor, jedná se o párový tag! To znamená, že musí být ukončen! Mezi úvodním tagem <TEXTAREA> a koncovým tagem </TEXTAREA> je možné zadat text, který bude tvořit přednastavený text uvnitř textového rámečku. Pokud si žádný přednastavený text nepřejete, můžete koncový tag </TEXTAREA> umístit hned za uvozující tag <TEXTAREA>. <TEXTAREA NAME= ramecek COLS= 40 ROWS= 5 > Toto je text uvnitř textového rámečku. </TEXTAREA> Parametr COLS Parametr COLS slouží k nastavení šířky textového rámečku. Šířka se defi nuje v počtech znaků. Parametr ROWS Parametr ROWS slouží k nastavení počtu řádků rámečku. Měl by činit minimálně 2 řádky, aby jej nebylo možné zaměnit za klasický dialog. Zatržítko Zatržítko je prvek, který dává uživateli možnost výběru z několika nabídnutých variant. Volba probíhá tzv. zatržením prvku. Je důležité si uvědomit, že v seskupení několika zatržítek je možné vybrat jednu variantu, ale i několik variant, případně všechny, nebo žádnou variantu (na rozdíl od přepínače). <INPUT TYPE= checkbox NAME= jmeno > První položka <BR> <INPUT TYPE= checkbox NAME= jmeno > Druhá položka Parametr CHECKED Jedním z důležitých parametrů zatržítka je CHECKED. Nastaví ihned po zobrazení stránky zatržítko jako aktivní, tj. zatržené. Poté může uživatel tento stav pochopitelně změnit. Parametr CHECKED se zadává bez jakýchkoliv dalších údajů. <INPUT TYPE= checkbox NAME= jmeno CHECKED> Parametr DISABLED Parametr DISABLED znemožní jakoukoliv manipulaci se zatržítkem. Zadává se opět bez jakýchkoliv dalších atributů stačí napsat pouze slovo. <INPUT TYPE= checkbox NAME= jmeno DISABLED> 3

4 Přepínač Přepínač je prvek velmi podobný zatržítku. Nabízí uživateli možnost výběru maximálně a zároveň minimálně jedné z nabídnutých možností. To znamená, že vybrána musí být vždy alespoň jedna volba, a zároveň maximálně jedna volba. Syntaxe je téměř stejná jako u zatržítka. <INPUT TYPE= radio NAME= jmeno CHECKED> První položka <BR> <INPUT TYPE= radio NAME= jmeno > Druhá položka Parametry CHECKED a DISABLED se používají stejně jako u zatržítka. Rozevírací nabídka Rozevírací nabídka slouží uživateli k výběru jedné z mnoha nabídnutých položek. Položkou přitom může být jakýkoliv text, číslo nebo jiný údaj. Počet položek, které rozevírací nabídka může obsahovat, je teoreticky neomezen. Vytvořte podle následující předlohy jednoduchou rozevírací nabídku, uložte ji a prohlédněte v prohlížeči. <SELECT NAME= nabidka > <OPTION VALUE= Ostrava > Ostrava</OPTION> <OPTION VALUE= Olomouc > Olomouc</OPTION> <OPTION VALUE= Praha > Praha</OPTION> <OPTION VALUE= Brno > Brno</OPTION> </SELECT> Pozor, rozevírací nabídka je složena z párového tagu SELECT. Nezapomeňte jej proto na konci uzavřít. V tagu SELECT se nastavují parametry nabídky a tagem OPTION jsou defi novány jednotlivé položky. Tag OPTION je opět párový. Mezi oba páry tagu OPTION umístěte text, který bude zobrazen v nabídce jako položka. Parametr tagu OPTION - SELECTED Má-li být některá z položek nastavena jako výchozí vybraná, stačí k tagu OPTION přidat parametr SELECTED. Tento parametr nemá žádné atributy. Seznam Seznam je ovládací prvek příbuzný rozevírací nabídce. Umožňuje uživateli vybrat některou z nabídnutých položek. Rozdíl od rozevírací nabídky spočívá v tom, že seznam povoluje výběr dvou a více položek současně. Při takovém výběru je nutné držet stisknutou klávesu CTRL a poté klepnout na požadované položky. Důležitým parametrem pro vytvoření seznamu je MULTIPLE. Tento parametr je jedinou odlišností mezi rozevírací nabídkou a seznamem a právě on způsobí, že bude možné vybírat i více položek v rámci jednoho seznamu. <SELECT NAME= nabidka MULTIPLE> <OPTION VALUE= Ostrava > Ostrava</OPTION> <OPTION VALUE= Olomouc > Olomouc</OPTION> <OPTION VALUE= Praha > Praha</OPTION> <OPTION VALUE= Brno > Brno</OPTION> </SELECT> 4

5 Tlačítko Tlačítko je jedním ze základních a velmi důležitých prvků formulářů. Vytvoříte je známým tagem INPUT, kde parametr TYPE bude nabývat hodnotu BUTTON. Text tlačítka nastavíte parametrem VALUE. <INPUT TYPE= button VALUE= OK - Potvrdit > Parametr DISABLED Tento parametr způsobí deaktivaci tlačítka, tj. tlačítko se zobrazí jako neaktivní a nebude možné je stisknout. Parametr nemá žádné další atributy ani hodnoty, zadává se pouze jako jednoslovná součást tagu INPUT. Odeslání dat z formuláře Jak již bylo uvedeno na začátku kapitoly, formulář sám o sobě neumí nic. Vždy je nutné ho nějakým způsobem aktivovat. To se na většině stránek děje pomocí JavaScriptu. Popsat ovšem v této učebnici JavaScript (resp. jeho základy) by vzhledem k obsáhlosti látky bylo nemyslitelné, proto si v následujících odstavcích uvedeme příklad odeslání dat z vyplněného formuláře em. Bude se jednat o dotazník, který ve spodní části bude obsahovat dvě tlačítka. Tlačítkem Odeslat bude obsah dotazníku odeslán em na předem nastavenou adresu a tlačítkem Vymazat formulář bude obsah vyplněných polí vymazán. Aby byl dotazník alespoň trochu přehledný, budou jeho jednotlivé položky (resp. pole formuláře) umístěny v tabulce. Podle předlohy opište přesně příklad a po uložení ho v prohlížeči spusťte. <HTML> <HEAD> <TITLE>DOTAZNÍK</TITLE> </HEAD> <BODY> <FORM NAME= Dotaznik ACTION= mailto:info@computermedia.cz?subject=formulář METHOD= POST ENCTYPE= text/plain > <TABLE> <TD><FONT size= 2 FACE= Arial >Jméno a příjmení</font></td> <TD><INPUT TYPE= text NAME= jmeno SIZE= 20 MAXLENGTH= 20 > </TD> <TD><FONT SIZE= 2 FACE= Arial > </FONT></TD> <TD><INPUT TYPE= text NAME= SIZE= 20 MAXLENGTH= 20 > </TD> <TD><FONT SIZE= 2 FACE= ARIAL >Adresa</FONT></TD> 5

6 <TD><INPUT TYPE= text NAME= Adresa SIZE= 20 MAXLENGTH= 20 > </TD> <TD> <BR></TD><TD> <BR></TD> <TD><FONT SIZE= 2 FACE= ARIAL >Chcete nám něco vzkázat?</font></ TD> <TD><TEXTAREA NAME= Vzkaz COLS= 20 ROWS= 5 ></TEXTAREA></TD> </TABLE> <INPUT TYPE= submit VALUE= Odeslat > <INPUT TYPE= reset VALUE= Vymazat formulář > </BODY> </HTML> Po spuštění stránky, kterou jste podle předchozí předlohy vytvořili, doplňte do jednotlivých dialogů požadované údaje a klepněte na tlačítko Odeslat. Ihned poté se zobrazí okno s upozorněním, že údaje vložené do formuláře budou odeslány elektronickou poštou. Zde klepněte na OK, bude zformátován podle zadaných parametrů. Nový se automaticky zařadí do pošty k odeslání, a to do poštovního programu, který je v počítači nastaven jako výchozí (většinou je to Outlook nebo Outlook Express). Všimněte si, že je přednastaven příjemce a předmět. Tyto údaje byly nadefi novány jednotlivými atributy tagu FORM. Na tag FORM se podíváme trochu podrobněji. <FORM NAME= Dotaznik ACTION= mailto:info@computermedia.cz?subject=fo rmulář METHOD= POST ENCTYPE= text/plain > Parametry tagu FORM Parametr METHOD= POST Pomocí tohoto parametru určíte, že data z formuláře budou odeslána poštou, resp. em. Parametr ACTION= mailto:info@computermedia.cz?subject=formulář Parametr ACTION určí ovou adresu, na kterou budou data z formuláře zaslána (v tomto případě info@computermedia.cz). Za otazníkem je rovněž možné přednastavit předmět zprávy (v tomto případě text formulář ). Parametr ENCTYPE= text/plain Parametr ENCTYPE nastavuje způsob formátování textu zprávy. Vzhledem k tomu, že potřebujeme pouze text bez jakéhokoliv formátování a dalších řídicích znaků, nabývá parametr hodnoty text/plain. Tlačítka pro odeslání Formulář obsahuje dvě tlačítka. Zde je rozhodující parametr TYPE. Pokud nabývá hodnotu submit, je formulář zpracován metodou, která je uvedena v tagu METHOD. Pokud parametr TYPE obsahuje hodnotu reset, dojde k vymazání obsahu všech dialogů a polí vyplněného formuláře. Příklad defi nice tlačítka pro odeslání dat: 6

7 <INPUT TYPE= submit VALUE= Odeslat > <INPUT TYPE= reset VALUE= Vymazat formulář > Poznámka: Chcete-li se zabývat skutečným programováním internetových stránek, budete velmi pravděpodobně muset sáhnout po jazyce JavaScript, později možná také po PHP apod. Jedná se o velmi rozsáhlé jazyky umožňující provádět v rámci HTML dokumentu takové operace, kterých nelze standardními tagy dosáhnout - jedná se o výpočty, práce s databázemi, operace se soubory atd. 7