Interaktivne stranice

Da bi stranice bile zanimljivije i korisnije, ponekad im zelimo dodati elemente koji ce omogucavati da preko njih saljemo neke podatke, dobivamo neku povratnu informaciju na stranici ili naprosto da ih ucinimo ljepsima nekom animacijom. Dio toga mozemo postici koristenjem samo HTML-a, dok za vecinu trebamo pomoc jos nekih jezika (JavaScript, PHP, ASP i slicno).

Ono sto uvijek treba imati na umu kod dodavanja takvih elemenata je da web stranica prije svega treba biti funkcionalna. Previse dodataka moze je uciniti ili vrlo sporom za ucitavanje, ili nepreglednom, ili nefunkcionalnom u nekim browserima. Takodjer, stranice na kojima se neprestano nesto krece i mjenja mogu biti i nepregledne ili smetati korisnika. Ipak, web formulari i neki slicni efekti mogu biti vrlo potrebni i korisni. Generalno je pravilo da dok god nam stvarno ne trebaju, bolje je ne uvoditi nikakve ne-HTML elemente.

HTML Forme

Da bi omogucili korisniku unos (input) na nasoj stranici, koristimo tag <form>. HTML forma se nalazi izmedju taga <form> i njegovog zatvaraca.

Unutar forme najcesce koristimo tag <input>. Tip unosa koji se ocekuje specificiran je atributom type.

<form>
Vase ime: 
<input type="text" name="ime">
<br>
Vase prezime: 
<input type="text" name="prezime">
</form>

A evo kako to izgleda u browseru:

Napomene: Uocite da sada mozete pisati u tako stvorene prozore, no bez ikakvog drugog efekta. Atribut name je ovdje samo radi eventualne kasnije lakse reference na element. U vecini browsera, velicina tekstualnog polja je po defaultu 20 znakova.

Postoje jos dva cesto koristena oblika unosa podataka u web stranicu: koriste se polja koja mozemo oznacavati - radio buttons i checkboxes:

<form>
<input type="radio" name="spol" value="muski"> Muski
<br>
<input type="radio" name="spol" value="zenski"> Zenski
</form>

Izgled u browseru:

Uocite da samo jedan od izbora moze biti istovremeno oznacen.

Zadatak 19: Ubacite gornju formu u svoju stranicu. Promijenite vrijednost type sa radio na type="checkbox" i pogledajte rezultat. Uocite da sada mozemo imati istovremeno oznaceno vise izbora.

Jos jedan element preko kojeg korisnik moze vrsiti neki unos na stranici je i drop down box:

Zadatak 20: Ubacite sljedeci drop down box u vasu stranicu i pogledajte rezultat u browseru.

<form action="">
<select name="auti">
<option value="opel">Opel
<option value="bmw">BMW
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>

Mozemo stvoriti i vece slobodno podrucje na stranici za unos znakova nego sto su defaultnih 20 znakova. Za to korisimo tag <textarea>:

<textarea rows="10" cols="30"> Sada smo na vjezbama iz Mreza racunala. </textarea>

Atributi rows i cols definiraju povrsinu podrucja, tekst unutar taga je opcionalan i predstavlja recenicu koja ce vec biti upisana u nasem podrucju.

Do sada smo unosili razne podatke, ali sve to nema nekakvog efekta ukoliko ih ne posaljemo. U tu svrhu tipicno susrecemo submit button ("gumb" na stranici s tekstom "submit" i dodanom funkcionalnoscu da podatke zbilja nekuda i posalje). Za stvaranje "gumba" imamo sljedecu sintaksu:

<form action="">
<input type="button" value="Tekst na gumbu">
</form>

Slanje podataka (submit) ili brisanje svega u formi (reset, obicno u svrhu ispunjavanja ispocetka) su dvije tako ceste akcije, da imaju svoje predefinirane gumbe). Evo primjera jedne tipicne forme koja salje podatke mailom na adresu someone@yahoo.com :

<form action="MAILTO:someone@yahoo.com" method="post" enctype="text/plain">

Ime:<br>
<input type="text" name="ime" value="vaseime" size="20">
<br>
Mail:<br>
<input type="text" name="mail" value="vasmail" size="20">
<br>
Komentar:<br>
<input type="text" name="komentar" value="vaskomentar" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">

Izgled u browseru:

Ime:




Mail:




Komentar:

Isprobajte kako forma radi (unesite nesto, stisnite reset, pokusajte i sa send, ali otkazite slanje maila, ovo je izmisljena adresa, ali nije nemoguce da je netko koristi!).

Skripte u HTML-u

JavaScript i druge skripte mogu omoguciti dodatnu funkcionalnost stranici. Ovdje cemo prikazati samo primjer kako u stranicu dodati jednu najjednostavniju JavaScript skriptu, rezultat koje je ispis "Hello World!" na vasoj stranici. Za unos skripti u HTML-u koristimo <script> tag. Atribut type specificira o kojem je skriptnom jeziku rijec. Nasa skripta sastoji se samo od jedne write naredbe za ispis:

<script type="text/javascript">
document.write("Hello World!")
</script>

Treba imati na umu da stariji web browseri ne podrzavaju skripte. Takvi ce ispisati tekst skripte umjesto da je izvrse. Ukoliko zelite to izbjeci, cesta praksa je stavljanje programskog koda skripte pod HMTL komentar. Takav tekst ce se svejedno izvrsiti ukoliko je to moguce, a ukoliko nije nece se ispisati na stranici:

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>