Ime lekcije

Obrazci v HTML straneh

Uporabljene tehnologije

HTML forme, FrontPage

Kaj se boste naučili

Kako narediti enostavno HTML formo in iz nje poslati e-mail

Kaj se boste še naučili

	Kako v formi narediti enostavna tekstovna polja in checkbox polja
	Kako v formo dodati enostavne gumbe
	Kako o vnosu podatkov v formo obvestiti lastnika forme po e-mailu

Pred to lekcijo preberi

Osnove HTML

Večina oblikovalcev HTML strani se kmalu znajde pred sorazmerno zahtevnim problemom - kako narediti anketo, dostopno obiskovalcem strani (najbolj pogosta anketa je seveda knjiga gostov). Izdelava takšne ankete ni zelo zahtevna, zahteva pa obvladovanje treh konceptov:

	kreiranje HTML form
	dodajanje polj v HTML formo
	shranjevanje podatkov, ki jih uporabniki vnesejo v formo, v datoteko ali v e-mail sporočilo.

Kreiranje HTML forme

Forme so del HTML strani, v katerega lahko uporabniki vnašajo podatke. Vsaka HTML stran ima lahko več form, vsaka forma pa poljubno število polj. Polja v formi so lahko tekstovna polja, checkbox polja, radio-button polja ali pull-down polja. Med opisom polj lahko seveda uporabljamo vse ostale HTML ukaze, tako lahko npr. polja v formi uredimo v tabelo, dodamo tekst, ki razlaga pomen polj ipd.

Vsaka forma poleg polj, v katera obiskovalci strani vpisujejo podatke, vsebuje tudi akcijo ki naj se izvede ob zaključku vnosa podatkov (ko uporabnik pritisne submit gumb). Ta akcija je navadno program, ki se izvede na web strežniku.

Več o tem, kakšna akcija naj se izvede ob zaključku vnosa podatkov, boste izvedeli na koncu te lekcije.

HTML formo definirate s HTML ukazom <FORM>, zaključite pa z ukazom </FORM>. V ukazu <FORM> lahko definirate:

Če uporabljate urejevalnik HTML strani, boste v njem našli menujski ukaz za definiranje form. V urejevalniku Frontpage je tak ukaz Insert/Form/Form.

	ime forme s parametrom NAME=ime_forme. Ime forme morate definirati le, če boste v JavaScriptu preverjali vrednosti polj v formi (več o tem v eni od kasnejših lekcij).
	akcijo, ki naj se izvede ob zaključku vnosa podatkov (ob pritisku na submit gumb v formi) s parametrom ACTION="url".

Sintaksa METHOD=GET|POST pomeni, da lahko kot vrednost parametra METHOD uporabimo besedo GET ali besedo POST.

	način prenosa podatkov do web strežnika, ki bo izvedel akcijo, podano v parametru ACTION, s parametrom METHOD=GET\|POST. Prenos podatkov z metodo GET bo vse vrednosti polj v formi dodal v URL, prenos podatkov z metodo POST pa jih bo poslal na drug način. Če se le da (če program, ki ste ga navedli v parametru ACTION to podpira), uporabljajte način POST.
	Po izvedbi akcije, navedene v parametru ACTION, se bodo rezultati te akcije prikazali v oknu browserja in nadomestili stran, v kateri je forma. Če želite, da se rezultati akcije pojavijo v kakšnem drugem oknu, morate navesti parameter TARGET=ime_okna.

Več o pomenu parametra TARGET= in o uporabi več oken v Web browerju si lahko preberete v lekciji Odpiranje novih oken v browserju.

V spodnjem primeru lahko vidite HTML kodo, ki definira enostavno HTML formo (brez polj).

<HTML><HEAD>

<TITLE>Enostavna HTML stran</TITLE>

</HEAD><BODY>

Tekst pred formo

<FORM ACTION="http://www.somewhere.com/cgi/post.pl" METHOD=POST>

Tekst v formi

</FORM>

Tekst za formo

</BODY></HTML>

Definiranje polj v formi

Ko ste definirali formo, lahko vanjo dodate posamezna polja. V tej lekciji bomo uporabljali samo enostavna tekstovna polja in checkbox polja (polja, ki jih lahko odkljukamo).

Večino polj dodajamo v formo s HTML ukazom <INPUT>, izjema so večvrstična polja, ki jih dodajamo z ukazom <TEXTAREA> in pull-down polja, ki jih naredimo z kombinacijo ukazov <SELECT> in <OPTION>. Da bo web browser vedel, kakšno polje želimo imeti v formi, moramo v ukazu <INPUT> obvezno navesti tip polja s parametrom TYPE=tip_polja.

Enostavno tekstovno polje

Za definicijo enostavnega tekstovnega polja uporabimo ukaz <INPUT TYPE=TEXT>, poleg njega pa lahko navedemo še naslednje parametre:

	Ime polja s parametrom NAME=ime. Ta parameter moramo vedno navesti, da bo program, ki se bo izvedel ob zaključku vnosa podatkov, vedel v katero polje je uporabnik vnesel podatke. Parameter lahko uporabljamo tudi v JavaScriptu za dostop do vrednosti posameznih polj (o tem več v kasnejših lekcijah).
	Dolžino polja s parametrom SIZE=dolžina. S tem parametrom podamo dolžino polja na zaslonu obiskovalčevega browserja.
	Najdaljši tekst, ki ga obiskovalec lahko vnese v polje s parametrom MAXLENGTH=dolžina. S tem parametrom lahko omejimo dolžino teksta, ki ga obiskovalec lahko vnese, drugače lahko obiskovalec vnese v polje poljubno dolg tekst (omejitev so le zmožnosti Web browserja).
	Začetno vrednost polja s parametrom VALUE="začetna_vrednost".
	Opis polja s parametrom TITLE="ime_polja". Nekateri browserji (npr. Internet Explorer bodo opis polja prikazali obiskovalcu v obliki plavajočega Tooltip okna kadar bo obiskovalec z miško prišel v bližino polja).

Parametra NAME in TITLE lahko uporabite v vseh poljih v HTML formi, parameter VALUE le v nekaterih (omenjen bo pri vsakem polju posebej), ostali parametri iz zgornjega spiska pa so uporabni samo v enostavnih tekstovnih poljih.

Urejevalniki HTML strani ki podpirajo dodajanje form v HTML stran, zagotovo podpirajo tudi dodajanje posameznih polj. V urejevalniku Frontpage za dodajanje tekstovnega polja uporabite ukaz Insert/Form/One-line text box (Frontpage 2000) oziroma Insert/Form/Textbox (Frontpage 2002). Še vedno pa je dobro poznati parametre HTML ukazov, saj lahko v primeru, da naš urejevalnik ne podpira vseh HTML opcij, parametre ukazov vnesemo na roko.

Primer: HTML ukaz ...

<INPUT TYPE=TEXT NAME=primer SIZE=10 MAXLENGTH=20 VALUE="Nekaj zanimivega">

... bo definiral tekstovno polje z imenom primer, dolžino 10, začetno vrednostjo "Nekaj zanimivega", obiskovalec pa bo lahko vanj vpisal do 20 znakov teksta. Polje bo zgledalo približno takole:

Dodajanje Checkbox polj

Podobno kot tekstovna polja dodajamo check-box polja s HTML ukazom <INPUT TYPE=CHECKBOX>. Ta ukaz bo narisal samo kvadratek, ki ga bo uporabnik lahko odkljukal, tekst, ki bo razložil pomen kvadratka, boste morali napisati sami.

V urejevalniku Frontpage boste checkbox polje dodali z ukazom "Insert/Form/Check box".

Ukaz <INPUT TYPE=CHECKBOX> potrebuje dva parametra - NAME=ime, ki definira ime polja in VALUE="vrednost", ki definira vrednost polja, kadar je to odkljukano. Če želimo, da bo polje v ob nalaganju strani odkljukano, dodamo še parameter CHECKED.

Program, ki smo ga navedli kot akcijo naše forme, bo dobil vrednost checkbox polja le, če bo to polje odkljukano, v nasprotnem primeru ne bo dobil prazne vrednosti.

Primer: HTML sekvenca ...

Prvo polje: <INPUT TYPE=CHECKBOX NAME=prvo VALUE="A">

Drugo polje: <INPUT TYPE=CHECKBOX NAME=drugo VALUE="B" CHECKED>

... bo definirala dve checkbox polji skupaj s spremnim tekstom. Če bo prvo polje odkljukano, bo program, ki se bo izvedel kot akcija forme, dobil podatke o polju prvo z vrednostjo A, če bo odkljukano drugo polje pa podatke o polju drugo z vrednostjo B. Seveda sta lahko hkrati odkljukani obe polje (ali pa nobeno od njih). Prvo polje bo odkljukano ob nalaganju HTML strani, približno takole:

Prvo polje: Drugo polje:

Dodajanje gumbov v formo

V večini HTML form boste našli vsaj dva gumba:

	Gumb, s katerim zaključimo vnos podatkov (gumb submit)
	Gumb, s katerim vrnemo vrednosti vseh polj na njihove začetne vrednosti (gumb reset).

Gumbe, s katerimi v HTML formi zaključimo vnos podatkov, definiramo z ukazom <INPUT TYPE=SUBMIT>, gumbe, s katerimi vrnemo vrednost polj v formi na začetne vrednosti pa z ukazom <INPUT TYPE=RESET>. V obeh ukazih s parametrom VALUE="oznaka" podamo tekst, ki naj bo napisan na gumbu. Lepo je, če damo gumbu tudi ime s parametrom NAME=ime. Vsaka forma ima lahko seveda več submit gumbov in več reset gumbov.

V urejevalniku Frontpage boste vse gumbe v formo dodali z ukazom "Insert/Form/Push button", ki bo dodal tri gumbe (dva od njih boste potem verjetno pobrisali), parametre posameznega gumba pa boste spreminjali z ukazom Format/Properties (ali Alt+Enter).

Primer: HTML ukaz ...

<INPUT TYPE=SUBMIT NAME=finished VALUE="Pritisni me">

... bo definiral submit gumb z oznako "Pritisni me", ki bo izgledal približno takole:

Shranjevanje podatkov vnešenih v formo

Definiranje forme in polj v njej je bilo enostavno. Na tem mestu pa se stvari hudo zapletejo, definirati bo potrebno program, ki bo vrednosti polj, vnešenih v formo, shranil na naš Web strežnik ali poslal lastniku forme. Za izvedbo tega dela posla navadno potrebujemo:

	Strežnik, ki nam bo dovoljeval izvajanje programov na strežniku (CGI programs).
	Programersko znanje ali dostop do programerja, ki nam bo napisal potreben program.

Na srečo je shranjevanje podatkov, vnešenih v formo, tako pogost posel, da marsikateri strežnik nudi program, ki ga lahko navedete kot ACTION parameter vaše forme in ki bo posnel podatke, zapisane v formi, na vaš direktorij na strežniku (za več informacij se obrnite na administratorja vašega strežnika).

Če vaš strežnik podpira FrontPage extensions, mu lahko z dodatnimi HTML ukazi poveste kaj naj naredi s podatki v vaši formi. Če uporabljate urejevalnik FrontPage, si oglejte lekcijo Zapis podatkov iz forme s Frontpage Extensions .

Pošiljanje podatkov iz browserja preko elektronske pošte

Če nimate prav nobene boljše rešitve, lahko kot ACTION parameter forme napišete mailto:e-mail@naslov, kar bo browserju povedalo, da naj pošlje podatke v formi na vaš e-mail naslov. Ta trik navadno deluje le če ima uporabnik pravilno konfiguriran browser, ki ga uporablja tudi za branje pošte, v vsakem primeru pa bo v novejših browserjih sprožilo kup varnostnih pripomb, ki bodo samo zmedle uporabnike. To možnost zato uporabljajte le v skrajnih primerih, ko vse drugo odpove.

Zadnji primer

Zaključimo to lekcijo še z enim primerom, ki bo povzel vse, kar smo se v njej naučili. Naredili bomo formo, v kateri bomo obiskovalca vprašali za njegov e-mail naslov hkrati pa mu ponudili da ga lahko obveščamo o novostih na našem Webu.

Našo stran začnemo tako kot vedno ...

<HTML><HEAD>

<TITLE>Vpis v knjigo gostov</TITLE>

</HEAD><BODY>

... nato napišemo malce uvoda

<H1>Dobrodošli</H1>

<p>Vabimo vas, da se vpišete v našo knjigo gostov</p>

... definiramo našo formo

<FORM ACTION="mailto:moj.email@moj.server.com">

... definiramo polja v naši formi

Vaš e-mail naslov: <INPUT TYPE=TEXT NAME=EMAIL SIZE=40><BR>

Odkljukajte to polje <INPUT TYPE=CHECKBOX NAME=NEWS VALUE="Yes">

če želite da vas obveščamo o novostih.

... in zaključimo formo ter HTML stran

</FORM></BODY></HTML>

Seveda bi v resnični Web strani le-to malce lepše oblikovali, morda s pomočjo HTML tabel, in uporabili več polj.