Forme su dio XHTMLa koje mu povezivanjem s raznim drugim jezicima omogu~tavaju da postane interaktivan: korisnik otvori stranicu, na~de "formular" (formu), popuni polja u njoj, klikom na dugme po~salje podatke serveru, server ih obradi, vrati korisniku novu stranicu, itd. -- ili pak, potpuno bez naknadne aktivnosti servera: klijent (korisnikovo ra~cunalo) obra~duje podatke unesene u formu i na osnovu njih dolazi do nekih zaklju~caka, te obavje~stava korisnika o rezultatima.
No za svaki od tih scenarij~a, treba znati ne~sto osim XHTMLa -- takozvane skriptne jezike, koji slu~ze samoj obradi podataka. Mnogo smo puta rekli, XHTML nije programski jezik, i on ne mo~ze obraditi te podatke. No zato mo~ze slu~ziti za njihovo skupljanje, i to ~temo ovdje poku~sati u najjednostavnijim crtama prikazati. Za kompliciranije primjere, i puno vi~se detalj~a, pogledajte ovu XHTML forms stranicu.
Svejedno, ~cini se da ~temo za ikakve pametnije primjere takvog rada s formama, morati ili napisati (ili imati napisanu) neku skriptu na klijentu (u skriptnom jeziku JavaScript na primjer), ili neku skriptu na serveru (CGI, JSP ili sli~cno). Ipak, za neke jednostavne primjere, to ne~te biti potrebno. Napravit ~temo dva primjera, jedan ~te tretirati skriptu na jednom Internet serveru kao "crnu kutiju", dok ~te drugi iskoristiti ono ~sto na klijentskim ra~cunalima (gotovo) svi ve~t imamo isprogramirano -- mogu~tnost slanja emaila.
Forma je element (form element) u XHTMLu, konkretno blokovski element vi~seg reda, dakle stavljamo je direktno u body element, i unutar nje stavljamo p elemente unutar kojih pi~semo tekst i ostalo. "Ostalo" se odnosi na specijalne elemente koje samo forma mo~ze imati, elemente za unos podataka od strane korisnika. form element ima dva obavezna atributa, method i action.
method se odnosi na na~cin prijenosa prikupljenih podataka preko HTTP protokola, i naj~ce~s~te vrijednosti su "get" (prijenos unutar URLa) i "post" (prijenos unutar same HTTP poruke). Dobra strana spremanja podataka u URL je ~sto zahtjev za obradu mo~zemo smatrati posebnom web stranicom, i kao takvog ga mo~zemo na primjer spremiti u bookmarks (favorites) u browseru. Lo~sa strana je ~sto se na taj na~cin podaci prenose neza~sti~teni, tako da ih je zaista lako vidjeti bilo kome, te ~sto je duljina URLa ipak ograni~cena -- sadr~zaj nekolikokilobajtnog filea skoro sigurno ne~temo slati preko "get" metode.
action atribut form elementa slu~zi specificiranju lokacije na kojoj se nalazi skripta koja ~te primiti na~se podatke. Njegova vrijednost je obi~cno URL, kao kod src atributa img elementa, ili kod href atributa a elementa. Na Internetu ima puno skripti koje rade ne~sto koliko-toliko pametno s poslanim im podacima, mi ~temo vidjeti jedan primjer.
Elementi za unos mogu biti raznih tipova, oblik~a i veli~cin~a; i slu~ze za unos najrazli~citijih vrst~a podataka -- obi~cnog teksta, lozinki, sadr~zaja fileova na lokalnom disku, ve~tih tekstualnih poruk~a, podataka o izboru nula, jedne ili vi~se od nekoliko navedenih mogu~tnosti, podataka o tome na koji dio ponu~dene slike je korisnik to~cno kliknuo prilikom iniciranja prijenosa podataka, te jo~s mnogih drugih. Mnoga (ali ne sva) polja za unos podataka su zapravo instance input elementa, koje se razlikuju po vrijednosti type atributa. input je prazan element, i osim type atributa, mo~ze imati i mnoge druge, koji govore o njegovim svojstvima. Nama ~te trebati:
Vidimo da elementi za unos, osim submit buttona koji je jedinstven, imaju i atribut name. Njegova vrijednost (parametar skripte) je ime pod kojim se prenosi na~s podatak unesen u taj element, kao ime varijable (postoje i skriptni jezici u kojima to doslovce jesu imena varijabli) ~cija je vrijednost ono ~sto mi zovemo podatkom -- tekst, koordinate klika, nekoliko da/ne informacij~a i sli~cno.
Kre~temo na prvi primjer, pretra~zivanje Interneta pomo~tu Googlea. Google tra~zilicu ste svi koristili, i mnogi od vas su ostali fascinirani tako minimalisti~ckim su~celjem na http://www.google.com/, iza kojeg stoji jedan od najmo~tnijih softverskih sustava ikada napisanih. Mo~t tog sustava mo~zemo sasvim lijepo iskoristiti i sa vlastite web stranice, ako znamo da se osnovna skripta nalazi na http://www.google.com/search, da preferira "get" metodu, te da o~cekuje jedan parametar, imena q, vrijednost nekog
input type="text" elementa (op~tenito neki string), koji predstavlja upit tra~zilici. Znaju~ti sve to, mo~zemo napisati unutar body elementa:
<form method="get" action="http://www.google.com/search">
, i dobit ~temo potpuno funkcionalan Google Search na vlastitoj stranici:
<p> ~Sto ~zelite prona~ti danas?
<input type="text" name="q" />
<button type="submit">Na~di!</button>
</p>
</form>
Za detaljno pode~savanje onog ~sto ~saljete Googleu, kao i za listu stvari koje prihva~ta, prosurfajte malo Googleovim Helpom.
Ako i nemamo nikakvu skriptu koja ~te obraditi podatke koje nam korisnici ~salju, uvijek mo~zemo iskoristiti jednostavnu metodu slanja podataka emailom. Jednom kad ih dobijemo u inbox, mo~zemo odlu~citi ~sto dalje s njima.
Da bismo to postigli, postavimo method atribut na post, action atribut na mailto:emailAdresa (kao i u slu~caju a elementa, kad ~zelimo da otvara email program aktiviranjem linka), i jo~s dodajmo jedan atribut, enctype (tip kodiranja u kojem se podaci prenose emailom), kojeg postavimo na vrijednost "text/plain".
U formu mo~zemo staviti proizvoljne elemente za unos -- emailom ~temo dobiti string iz kojeg ~te se mo~ti zaklju~citi ~sto je (i gdje) korisnik napisao. Na~zalost, vrijedi ista napomena kao i za a href="mailto:..." linkove: ako niste potpuno sigurni da znate ~sto radite, ne stavljajte svoju primarnu adresu na web! Ako ~zelite isprobati ovu mogu~tnost, otvorite neki webmail account za jednokratnu/kratkotrajnu upotrebu.
Evo kako bi to moglo izgledati:
<form method="post" action="mailto:vedgar+form@gmail.com" enctype="text/plain">
, i kako gornji kod stvarno izgleda kad se renderira:
<h6>Ako ~zelite, po~saljite mi email:</h6>
<ul><li>Tema: <input type="text" name="tema" /></li>
<li><textarea rows="20" cols="72" name="poruka">...</textarea></li>
<li>Potpis: <input type="text" name="potpis" />
<button type="submit">Po~salji!</button></li>
</ul>
</form>