Ekonomski fakultet u Osijeku Kolegij: Elektroničko i mobilno poslovanje Nositelj: prof. dr. sc. Branimir Dukić Nastavni materijali za vježbe 3. HTML obrasci 1. HTML obrasci HTML obrasci služe za prikupljanje podataka od posjetitelja stranice - koriste se za interakciju s korisnikom. Preglednik, preko kojeg se podaci prikupljaju, može prenositi te podatke serveru na daljnju obradu. Kako bi se podaci koje korisnik upiše putem obrasca odnosno forme obradili (poslali na server), forma mora imati određene atribute koji služe za povezivanje sa određenim serverom (za daljnju obradu podataka), te prijenos argumenata programa. Forme imaju široku upotrebu: Ispitivanje mišljenja kupaca (forma u obliku anketnog listića tj. upitnika), Upit nad bazama podataka ili pretraživačima, Elektronička trgovina, Obavještavanje o promjenjivim podacima, i drugo 1. Kako bi forme izvršile dinamičku funkciju slanja i obrade podataka, osim HTML-a potrebne su dodatne skripte u nekom od skriptnih jezika. Temeljni tag za oblikovanje forme je <form>... </form>, koji sadrži dva atributa: atribut ACTION koji sadrži adresu (URL) programa na serveru; atribut METHOD kojim je opisana metoda prijenosa argumenata programa. Ovaj atribut može imati vrijednosti GET ili POST. Češće se koristi metoda POST. Metoda GET ima ograničen broj parametara: mora vrijediti da je dužina URL + dužina parametara < 1KB. Kako bi forme obavile opisanu dinamičku funkciju slanja i obrade podataka, osim HTML-a potrebne su dodatne skripte u nekom od skriptnih jezika, kao npr. CGI, JavaScript, VBScript, ASP, PHP... HTML obrazac: <form> + elementi Input Proces PHP CGI Javascript e-mail www Output Slika 1. Preuzimanje i tijek podataka uz pomoć HTML obrazaca Razrada prema: Essert, M., Web programiranje, Nastavni materijali 2014. 1 Essert, M., Web programiranje, Nastavni materijali 2014. 1
2. SINTAKSA ZA HTML FORME <FORM>...</FORM> Atributi: ACTION= Script - Serverska skripta koja se izvodi prilikom napuštanja forme METHOD = [ get post ] - HTTP metoda za submitiranje forme ONLOAD= Script - Serverska skripta koja se izvodi prilikom učitavanja forme ONUNLOAD= Script - Serverska skripta koja se izvodi prilikom napuštanja forme onsubmit= return imefunkcije() izvršavanje javascript funkcije prilikom klika na gumb submit Sintaksa: <INPUT> Element <INPUT> kao osnovni atribut ima tip 'TYPE' koji može biti 2 : TEXT - za upis informacije PASSWORD - za upis lozinke (umjesto utipkanih znakova pojavljuju se '*') RADIO - okrugli gumb za izbor jednog od ponuđenih CHECKBOX - kvadratni gumb za izbor više (ili nijednog) od ponuđenih TEXT je atribut elementa FILE - za slanje (engl. upload) datoteke preko WEB-a <INPUT>: SUBMIT - za tvorbu gumba na čiji pritisak (klik mišem) se <input type="text">..., podaci uneseni preko forme daju skriptama na obradu dok je TEXTAREA zaseban IMAGE - umjesto gumba za 'SUBMIT' koristi se izabrana slika element RESET - poništavanje informacije upisane u obrasce <TEXTAREA> </TEXTAREA> HIDDEN - za prijenos nevidljive informacije u skipta za za omogućavanje unosa veće obradu količine teksta. Atributi elementa INPUT: TYPE = [ text password checkbox radio submit reset ] - Vrsta unosa NAME= cime Naziv okvira cs VALUE= cvrijednost Početna vrijednost unosnog polja 1 SIZE= cbroj Sugerirani broj karaktera po upisnom polju 1 MAXLENGHT=n Maksimalni broj karaktera po upisnom polju 1 CHECKED Odabire radio button or checkbox 2 DISABLED Onemogućuje element 1,2 READONLY Onemogućuje izmjene 1 cs case-sensitive 1 text, password 2 checkbox, radio 2 Zekić-Sušac, M., Osnove HTML-a 2. dio, Nastavni materijali, http://www.mathos.unios.hr/~mzekic/wpnast/materijali/p3_html2.pdf (8.3.2016.) 2
ONFOCUS= Script Serverska skripta - izvodi se prilikom preuzimanja okusa na polje (prelazak miša preko polja) ONBLUR= Script Serverska skripta - izvodi se prilikom napuštanja polja (gubljenja fokusa) ONSELECT= Script Serverska skripta - izvodi se prilikom odabira tekstualnog elementa ONCHANGE= Script Serverska skripta - izvodi se prilikom izmjene vrijednosti Sintaksa: <TEXTAREA> </TEXTAREA> Atributi: NAME= cime Naziv okvira ROWS=n Broj redova COLS=n Broj kolona DISABLED Onemogućuje element READONLY Onemogućuje izmjene ONFOCUS= Script Serverska skripta - izvodi se prilikom preuzimanja fokusa na polje ONBLUR= Script Serverska skripta - izvodi se prilikom napuštanja polja (gubljenja fokusa) ONSELECT= Script Serverska skripta - izvodi se prilikom odabira tekstualnog elementa ONCHANGE= Script Serverska skripta - izvodi se prilikom izmjene vrijednosti Sintaksa: <SELECT> </SELECT> Atributi: NAME= cime Naziv okvira SIZE=n Broj vidljivih stavki izbornika DISABLED Onemogućuje element Tag SELECT rezultira menijem sa zadanim opcijama, a definira se kao: <SELECT> <OPTION> Neki tekst <OPTION> Neki drugi tekst... </SELECT> MULTIPLE Omogućuje višestruki izbor ONFOCUS= Script Serverska skripta - izvodi se prilikom preuzimanja fokusa na polje ONBLUR= Script Serverska skripta - izvodi se prilikom napuštanja polja (gubljenja fokusa) ONCHANGE= Script Serverska skripta - izvodi se prilikom izmjene vrijednosti Sintaksa: <OPTION> </OPTION> Atributi: VALUE= copcija Vrijednost opcije SELECTED Inicijalno izabrani element 3
3. PRIMJERI RAZLIČITIH FORMI PRIMJER 1. HTML KOD: <!DOCTYPE html> <head><meta charset="utf-8" /> <title>primjer forme: Ime i prezime</title> </head> <body> <form action="akcija" method=post> </form> </body> </html> Unesite svoje ime: <input type=text name="name"><p> Unesite svoje prezime: <input type=text name="age"><p> <input type=submit> REZULTAT U PREGLEDNIKU: 4
PRIMJER 2. HTML KOD: <!DOCTYPE html> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hr" /> <head><title>primjer forme</title></head> <body> <h1>podaci o korisniku</h1> <form> Korisničko ime: <input type="text" name="cime" size=10><p> Lozinka: <input type="password" name="cpass" size=8><p> Odaberite datoteku za upload: <input type="file" name="selectedfile" /><br><br> <input type="submit" name="submit" value="pošalji" /> <input type="reset" name="reset" value="prekid" /> <input type="button" name="ok" value="ok" /> </form> </body> </html> REZULTAT U PREGLEDNIKU: 5
PRIMJER 3. HTML KOD: <!DOCTYPE html> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hr" /> <head><title>primjer forme</title></head> <body> <h1>studentska anketa</h1> <form> Korisničko ime: <input type="text" name="cime" size=10><p> Lozinka: <input type="password" name="cpass" size=8><p> Označite mjesto Vašeg prebivališta:<br> <input type="checkbox" name="coprema" value="o1" checked> Osijek<br> <input type="checkbox" name="coprema" value="o2"> okolica Osijeka<br> <input type="checkbox" name="coprema" value="o3"> ostalo<p> Gdje stanujete u mjestu studiranja?<br> <input type="radio" name="crad" value="r1" checked> studentski dom<br> <input type="radio" name="crad" value="r2"> podstanarstvo<br> <input type="radio" name="crad" value="r3"> vlastiti stan ili kuća<br> <input type="radio" name="crad" value="r4"> ne stanujem u mjestu studiranja (putnik)<p> Jeste li zadovoljni studentskom prehranom u studentskim kantinama i restoranima u Osijeku? <br> Obrazložite svoj odgovor.<br> <textarea name="ctarea" rows=8 cols=50>ovdje upišite vaš tekst </textarea><p> Koja ste godina studija: <select name="cselect"> <option value="s1" selected>1.</option> <option value="s2">2.</option> <option value="s3">3.</option> <option value="s4">4.</option> <option value="s4">5.</option> </select><p> <input type="submit" value="pošalji"> <input type="reset" value="otkaži"><p> </form> </body> </html> 6
REZULTAT U PREGLEDNIKU: 7
PRIMJER 4. HTML KOD: <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hr" /> </head> <body> <h2>forma za slanje e-maila primjer@gmail.com:</h2> <form action="mailto:primjer@gmail.com" method="post" enctype="text/plain"> Ime:<br> <input type="text" name="name" value="vaše ime"><br> E-mail:<br> <input type="text" name="mail" value="e-mail adresa primatelja"><br> Poruka<br> <textarea name="tarea" rows=8 cols=50> ovdje upišite vašu poruku </textarea> <br><br> <input type="submit" value="pošalji"> <input type="reset" value="otkaži"> </form> </body> </html> REZULTAT U PREGLEDNIKU: 8
PRIMJER 5 (HTML + Js). HTML KOD: <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>primjer forme: Upotreba JS-a</title> <script> function zbroj() { var a = parseint(document.getelementbyid("a").value); var b = parseint(document.getelementbyid("b").value); document.getelementbyid("rezultat").innerhtml = a+b; } </script> </head> <body> <form action="javascript:;" onsubmit="return zbroj()" method="post"> Unesite prvi broj: <input type="text" id="a" /><br /> <br /> Unesite drugi broj: <input type="text" id="b" /><br /> <br /> <input type="submit" value="izračunaj"> </form> <p id="rezultat">umjesto ovog teksta se treba prikazati rezultat klikom na izračunaj</p> </body> </html> REZULTAT U PREGLEDNIKU: 9
4. SAVJETI ZA IZRADU HTML STRANICA: Izvori koji vam mogu pomoći u izradi formi: o http://www.w3schools.com/html/html_forms.asp o https://www.w3.org/tr/rec-html40/interact/forms.html o http://www.tutorialspoint.com/html/html_forms.htm Validator ispravnosti HTML koda : o https://validator.w3.org/ 10
ZAVRŠNA HTML ZADAĆA Izraditi HTML stranicu zamišljenog restorana, koja će imati tablicu u funkciji glavnog izbornika ili će sadržaj čitave stranice biti raspoređen u tablicu. Stranica treba sadržavati sve do sada obrađene HTML tagove, minimalno 2 povezane proizvoljno osmišljene HTML stranice i obvezno mora sadržavati HTML formu, koja će biti u funkciji prikupljanja online narudžbi (formi treba urediti samo HTML oblik, bez primjene skriptnog jezika). Zadaća se izrađuje korištenjem isključivo jednostavnog tekst editora (Notepad). Studenti zadaće izrađuju i odgovaraju individualno, a rok za predaju zadaće je tjedan dana. 11