HTML obrasci Vežba IV
HTML obrasci Sa gledišta dizajnera, obrasci omogućavaju uspostavljanje dijaloga sa posetiocima lokacije Iako deluju veoma različito, svi obrasci imaju nekoliko zajedničkih elemenata. Sastoje se od: jednog ili više polja za unos, polja za potvrdu, radio-dugmadi ili padajućih menija pomoću kojih posetioci unose informacije Obrasci, takođe, sadrže: dugme Submit koje posetilac pritiska da bi obrazac poslao Web serveru većina ima i dugme Reset, za brisanje svih prethodno unesenih odgovora i početak ponovnog popunjavanja
HTTP odnos zahtev/odgovor između čitača Weba i Web servera 1 5 2 3 4 Web čitač Web server Čitač korisnika traži HTML stranicu od Web servera Web server šalje traženu HTML stranicu čitaču korisnika Čitač korisnika traži od Web servera preostale slike i podatke Web server šalje čitaču korisnika tražene podatke Čitač korisnika prikazuje stranicu na monitoru 1 2 3 4 5
Automatizovan odgovor Obrada HTML obrazaca Pri radu sa stranicom koja sadrži obrazac, čitač i server obavljaju prethodno opisanu dvosmernu komunikaciju da bi preuzeli stranicu i njen sadržaj (uključujući i obrazac) CGI skript Aplikacija 4 5 1 Web server 2 Automatizovan odgovor Informacije o zaposlenima 6 3 Predaj Web čitač Informacije primljene Pritisnite ovde da biste prešli na sledeći obrazac 7
Automatizovan odgovor Obrada HTML obrazaca CGI skript Aplikacija 4 5 Web server 1 2 Automatizovan odgovor Informacije o zaposlenima 6 3 Predaj Web čitač Informacije primljene Pritisnite ovde da biste prešli na sledeći obrazac 7 1 Web server šalje obrazac čitaču posetioca. Čitač Weba prikazuje obrazac koji posetilac, potom, popunjava. Posetilac pritiska dugme Submit da bi Web serveru poslao podatke. Web server prosleđuje podatke (rezultate) obrasca CGI skriptu. CGI skript, koji obrađuje podatke iz obrasca, može formatirati podatke i poslati ih drugoj aplikaciji na dalju obradu. CGI skript pravi i šalje Web serveru poruku potvrde. Web server šalje poruku potvrde čitaču da bi je on prikazao. 2 3 4 5 6 7
HTML oznake i atributi kojima se pravi obrazac Početna i završna oznaka <form> </form> obrasca govore Web čitaču koji deo HTML datoteke da stavi u obrazac Oznaka <form> obično sadrži sledeće atribute: action - URL ili Web adresa kojoj čitač šalje odgovore iz obrasca posetioca pošto posetilac pritisne dugme Submit enctype - govori čitaču Weba koju metodu kodiranja da koristi za prosleđivanje podataka obrasca CGI skriptu na server. Obično se vrednost ovog atributa podešava na “application/x-www.” id - koristi se za davanje jedinstvenog imena obrascu preko koga mu se pristupa u skriptu. Ako se ne imenuje, pristupa mu se po broju Document.forms[0], Document.forms[1],.. Document.IDobrasca (ili samo IDobrasca)
Atributi oznake <form> method označava način na koji čitač treba da pošalje rezultate na naznačenu URL adresu u atributu action. Vrednost atributa method biće: POST - čitač će podatke obrasca poslati u zasebnoj HTML poruci – koriste se ako obrada rezultata obrasca izaziva neke prateće pojave, kao što je promena podataka u bazi podataka GET - čitač će poslati podatke obrasca Web serveru na kraju URL-a koji je dat atributom action u oznaci <form> - koristi se kada obrada obrasca ne menja podatke čuvane na Web serveru name tekstualni znakovni niz koji se može koristiti da bi se obrascu u skriptu, na Web stranici pristupilo po imenu
Atributi oznake <form> onReset - naziv funkcije (tj. skripta u HTML kodu Web stranice) koju čitač treba da izvrši ako posetilac pritisne dugme Reset onSubmit - naziv funkcije (tj. skripta u HTML kodu Web stranice) koju čitač treba da izvrši ako posetilac pritisne dugme Submit target - naziv prozora u kome će čitač prikazati Web stranicu s potvrdom obrasca title - tekst (kao što je naziv ili opis obrasca) koji će se prikazati kada posetilac nekoliko sekundi drži pokazivač miša nad jednim mestom unutar obrasca
Primer 39. <html> <head><title> Obrazac za unos u jednom redu </title></head> <body> <form name=“ExampleForm”> <p>First Name:<input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p> [Dugmad Reset i Submit smeštaju se ovde] </p> </form> </body></html> Snimite dokument pod nazivom Primer39.html na D disk (D:\Grupa I\HTML1\Primer39.html)
Atributi oznake <input> Oznaka jednorednog polja <input> može da sadrži sledeće atribute: type - podešen na “text” govori čitaču da je element obrasca jednoredno polje za unos teksta id - koristi se za dodelu imena polju – koristi se da bi se sadržaj polja za unos mogao obrađivati korišćenjem skripta u HTML kodu Web stranice name – identifikacija polja za unos – koristi se za pristup vrednosti u ulaznom polju u okviru skripta koji se pokreće u čitaču size - širina polja (iskazana brojem znakova) value - govori čitaču da, prilikom crtanja obrasca tekst koji je dodeljen atributu postavi u polje za unos
Atributi oznake <input> maxlength - maksimalan broj znakova koje posetilac može upisati u polje za unos readonly - kada je ovaj atribut naznačen, polje može doći u fokus, ali posetilac ne može menjati vrednost polju disabled - kada je ovaj atribut naznačen, polje ne može doći u fokus, niti posetilac može menjati vrednost polju tabindex – zadavanje redosleda po kom elementi obrasca dolaze u fokus kada posetilac pritiska taster Tab acceskey – taster koji korisnik može pritisnuti dok drži taster alt da bi prešao na polje za unos
Pravljenje višerednog polja za unos teksta Posetilac lokacije ima mogućnost da unese nekoliko redova teksta ukoliko se između početne i završne oznake obrasca <form></form> umetne početna i završna oznaka tekstualnog polja (<textarea></textarea>) Oznaka za višeredno polje za unos teksta ima atribute: rows – broj redova teksta koje će čitač prikazati unutar polja za tekst cols – broj znakova koje će čitač prikazati u svakom redu polja za tekst id – koristi se za dodelu imena ulaznom polju – vrednost ovog atributa koristi se za rad sa sadržajem polja za unos u okviru skripta umetnutog u HTML kod Web stranice name – ime pomoću koga se identifikuje polje za unos
Primer 40. <html> <head><title> Obrazac sa višerednim poljem za unos teksta </title></head> <body> <form name=“ExampleForm”> <p>First Name: <input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p>Message: <textarea name=“TextMessage” rows=“5” cols=”60”> </textarea></p> <p> [Dugmad Reset i Submit smeštaju se ovde] </p> <form> </body></html> Snimite dokument pod nazivom Primer40.html na D disk (D:\Grupa I\HTML 1\Primer40.html)
Polja za potvrdu Mogućnost da posetilac Web lokacije izabere jedan ili više elemenata liste pritiskajući polje za potvrdu pored svakog od tih elemenata realizuje se podešavanjem atributa type na checkbox u oznaci <input> za svaki elemenat liste U narednom primeru koristi se pet polja za potvrdu obrasca ExampleForm: Kada posetilac pritisne prazno polje za potvrdu, čitač izabere element obrasca tako što stavi znak za potvrdu u to polje Ukoliko posetilac pritisne već izabrano polje za potvrdu, čitač Weba taj elemenat obrasca izuzima iz izbora tako što uklanja znak iz polja za potvrdu
Polja za potvrdu Oznaka <input> za svako polje za potvrdu ima atribute: type - podešen na “checkbox” govori čitaču da je element obrasca polje za potvrdu id – koristi se za dodelu jedinstvenog imena polju za potvrdu – vrednost ovog atributa se može koristiti za pristupanje određenom polju za potvrdu u skriptu koji se nalazi u HTML kodu Web stranice name – ime pomoću koga se identifikuje svako polje za potvrdu – vrednost ovog atributa se može koristiti za proveru određenog polja za potvrdu u skriptu koji izvršava čitač Weba value – tekstualni niz koji se serveru prosleđuje kao vrednost u paru ime/vrednost označenog polja za potvrdu ako posetilac pritisne dugme Submit checked – podešen na vrednost True (checked=“true”) govori čitaču da pri crtanju obrasca označi (tj. izabere) polje za potvdu. Atribut je podrazumevano postavljen na False, pa ga nije potrebno zadavati za polja za potvrdu koja na početku ne treba da budu izabrana.
Primer 41. <html> <head><title> Polja za potvrdu </title></head> <body> <form name=“ExampleForm”> <p>First Name: <input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p>Message: <textarea name=“TextMessage” rows=“5” cols=”60”> </textarea></p> <p> Oblast interesovanja:<br> O.S.: <input type=“checkbox” name=“Win98” value=“ON”>Windows 98 <input type=“checkbox” name=“WinXP” value=“ON”>Windows XP <br> Hardver: <input type=“checkbox” name=“DT” value=“ON”>Desktop <input type=“checkbox” name=“LT” value=“ON”>Laptop <input type=“checkbox” name=“Mon” value=“ON”>Monitors</p> <p> [Dugmad Reset i Submit smeštaju se ovde] </p> </form> </body></html> Snimite dokument pod nazivom Primer41.html na D disk (D:\Grupa I\HTML 1\Primer41.html)
Dodavanje radio-dugmadi u obrazac Oznaka <input> sa atributom type podešenim na radio – koriste se za odabir samo jednog elementa iz liste U narednom primeru koriste se dva radio dugmeta Yes i No iz grupe dugmadi ShareEmail u obrascu ExampleForm Čitač Weba treba da se pobrine da posetilac izabere samo jedno radio-dugme iz grupe Kada posetilac pritisne radio-dugme, čitač obriše prethodno označenu dugmad iz te grupe (ako ih je bilo) i stavi crnu (zelenu) tačku u radio-dugme koje je posetilac pritisnuo i time izabrao
Dodavanje radio-dugmadi u obrazac Oznaka <input> za radio dugme ima atribute: type - podešen na “radio” govori čitaču da je element obrasca radio dugme id – koristi se za dodelu jedinstvenog imena radio-dugmetu name – ime pomoću koga se identifikuje radio dugmad value – znakovni niz koji se serveru prosleđuje kao vrednost u paru ime/vrednost ako posetilac pritisne radio-dugme checked – postavljanje ovog atributa u oznaku <input> za radio dugme upućuje čitača na odabir radio-dugmeta pri crtanju obrasca (i svaki put kad posetilac pritisne dugme Reset) checked=“True” podrazumevano je ovaj atribut podešen na False pa nije potrebno naznačavati za dugmad koja ne treba da budu izabrana
Primer 42. <html> <head><title> Radio dugmad </title></head> <body> <form name=“ExampleForm”> <p>First Name: <input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p>Message: <textarea name=“TextMessage” rows=“5” cols=”60”> </textarea></p> <p> Oblast interesovanja:<br> O.S.:<input type=“checkbox” name=“Win98” value=“ON”>Windows 98 <input type=“checkbox” name=“WinXP” value=“ON”>Windows XP <br> Hardver:<input type=“checkbox” name=“DT” value=“ON”>Desktop <input type=“checkbox” name=“LT” value=“ON”>Laptop <input type=“checkbox” name=“Mon” value=“ON”>Monitors </p> <p> Da li želite da postavite svoju e-mail adresu? <input type=“radio” value=“Yes” name=“ShareEmail”>Yes <input type=“radio” value=“No” checked=“True” name=“ShareEmail”>No </p> <p> [Dugmad Reset i Submit smeštaju se ovde] </p> <form> </body></html> Snimite dokument pod nazivom Primer42.html na D disk (D:\Grupa I\HTML 1\Primer42.html)
Padajuća lista (meni) u obrascu Izbor jednog ili više elemenata iz padajuće liste omogućava se posetiocu umetanjem opcije menija između početne i završne HTML oznake izbora <select></select> koja može imati sledeće atribute: size – broj stavki menija (ili opcija) koje se odjednom vide na ekranu id - koristi se za dodelu jedinstvenog imena stavki padajuće liste – koristi se za pristupanje statusu stavki liste u skriptovima koji se nalaze u kodu name - identifikovanje stavki padajuće liste – koristi se za pristupanje statusu stavki u padajućoj listi unutar skripta koji izvršava čitač Weba
Padajuća lista (meni) u obrascu Da bi se dodale stavke padajućoj listi, tekst svake od njih potrebno je staviti između početne i završne oznake opcije <option></option> Svaka oznaka <option> može imati sledeće atribute: value – tekstualni znakovni niz koji se Web serveru prosleđuje kao vrednost iz para ime/vrednost ako posetilac lokacije pritisne stavku padajućeg menija da bi je izabrao selected - čitaču govori da izabere stavku pri crtanju padajuće liste i svaki put kada posetilac pritisne dugme Reset
Primer 43. <html> <head><title> Padajući meni </title></head> <body> <form name=“ExampleForm”> <p>First Name: <input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p>Message: <textarea name=“TextMessage” rows=“5” cols=”60”> </textarea></p> <p> Oblast interesovanja:<br> O.S.:<input type=“checkbox” name=“Win98” value=“ON”>Windows 98 <input type=“checkbox” name=“WinXP” value=“ON”>Windows XP <br> Hardver:<input type=“checkbox” name=“DT” value=“ON”>Desktop <input type=“checkbox” name=“LT” value=“ON”>Laptop <input type=“checkbox” name=“Mon” value=“ON”>Monitors </p> <p> Da li želite da postavite svoju e-mail adresu? <input type=“radio” value=“Yes” name=“ShareEmail”>Yes <input type=“radio” value=“No” name=“ShareEmail”>No </p> <p> Izaberite najviši nivo ovlašćenja: <br> <select size=“1” name=“Sadržaj porudžbine”> <option value=“OOK” selected="true“> Odluka o kupovini</option> <option value=“OT”> Odabir trgovca</option> <option value=“OP” > Odabir proizvoda</option> <option value=“SZ”> Specifikacija zahteva</option> </select> </p> <p> [Dugmad Reset i Submit smeštaju se ovde] </p> </form> </body></html> Snimite dokument pod nazivom Primer43.html na D disk (D:\Grupa I\HTML 1\Primer43.html)
Dodavanje dugmeta Reset u obrazac Ukoliko posetilac pritisne dugme Reset – svi elementi obrasca vraćaju se na početne vrednosti (polja za unos teksta, polja za potvrdu, radio-dugmad, padajući meni) Za postavljanje dugmeta Reset u obrazac koristi se oznaka <input> sa atributom type podešenim na “reset” <input type=“reset”> Dugme za Reset može da ima drugačiji natpis, na primer: <input type=“reset” value=“Obriši obrazac”>
Primer 44. <html> <head><title> Reset dugme</title></head> <body> <form name=“ExampleForm”> <p>First Name: <input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p>Message: <textarea name=“TextMessage” rows=“5” cols=”60”> </textarea></p> <p> Oblast interesovanja:<br> O.S.:<input type=“checkbox” name=“Win98” value=“ON”>Windows 98 <input type=“checkbox” name=“WinXP” value=“ON”>Windows XP <br> Hardver:<input type=“checkbox” name=“DT” value=“ON”>Desktop <input type=“checkbox” name=“LT” value=“ON”>Laptop <input type=“checkbox” name=“Mon” value=“ON”>Monitors </p> <p> Da li želite da postavite svoju e-mail adresu? <input type=“radio” value=“Yes” name=“ShareEmail”>Yes <input type=“radio” value=“No” name=“ShareEmail”>No </p> <p> Izaberite najviši nivo ovlašćenja: <br> <select size=“1” name=“Sadržaj porudžbine”> <option value=“OOK”> Odluka o kupovini</option> <option value=“OT”> Odabir trgovca</option> <option value=“OP”> Odabir proizvoda</option> <option value=“SZ”> Specifikacija zahteva</option> </select></p> <p><input type=“reset”> </p> </form> </body></html> Snimite dokument pod nazivom Primer44.html na D disk (D:\Grupa I\HTML 1\Primer44.html)
Dodavanje dugmeta Submit u obrazac Kada posetilac pritisne dugme Submit, čitač Weba šalje Web serveru rezultate obrasca (tj. par ime/vrednost za polja sa tekstom, izabranu radio-dugmad, polja za potvrdu i elemente izabrane iz padajućeg menija) Server prosleđuje rezultate obrasca programu (ili skriptu) navedenom u atributu action oznake <form> Za umetanje dugmeta Submit u obrazac koristi se oznaka <input> sa atributom type podešenim na “submit” <input type=“submit” value=“Submit”>
Dodavanje dugmeta Submit u obrazac Dugme Submit ima sledeće atribute: Value tekst koji će čitač postaviti kao natpis na dugme za slanje obrasca Name atribut koji se koristi za povezivanje imena s dugmetom Submit
Primer 45. <html> <head><title> Reset dugme</title></head> <body> <form name=“ExampleForm”> <p>First Name: <input type=“text” name=“FirstName” size=“15”> Last Name: <input type=“text” name=“LastName” size=“20”></p> <p>Message: <textarea name=“TextMessage” rows=“5” cols=”60”> </textarea></p> <p> Oblast interesovanja:<br> O.S.:<input type=“checkbox” name=“Win98” value=“ON”>Windows 98 <input type=“checkbox” name=“WinXP” value=“ON”>Windows XP <br> Hardver:<input type=“checkbox” name=“DT” value=“ON”>Desktop <input type=“checkbox” name=“LT” value=“ON”>Laptop <input type=“checkbox” name=“Mon” value=“ON”>Monitors </p> <p> Da li želite da postavite svoju e-mail adresu? <input type=“radio” value=“Yes” name=“ShareEmail”>Yes <input type=“radio” value=“No” name=“ShareEmail”>No </p> <p> Izaberite najviši nivo ovlašćenja: <br> <select size=“1” name=“Sadržaj porudžbine”> <option value=“OOK”> Odluka o kupovini</option> <option value=“OT”> Odabir trgovca</option> <option value=“OP”> Odabir proizvoda</option> <option value=“SZ”> Specifikacija zahteva</option> </select> </p> <p> <input type=“reset”> <input type=“submit” value=“Submit”> </p> </form> </body></html> Snimite dokument pod nazivom Primer45.html na D disk (D:\Grupa I\HTML 1\Primer45.html)
Polje za unos lozinke Polje za unos lozinke je varijacija jednorednog polja za unos teksta Čitač Weba prikazuje polje lozinke na ekranu, ali ne prikazuje tekst koji posetilac unosi, već umesto svakog upisanog znaka prikazuje ispunjenu crnu tačku ili zvezdicu Polje lozinke pravi se podešavanjem atributa type na “password” u HTML oznaci <input> <input type=“password” name=“Password” id=“PW” size=“20”>
Primer 46. <html> <head><title> Polja za unos lozinke </title></head> <body> <form name=“ExampleForm”> <p> User Name:<input type=“text” name=“FirstName” size=“15”> Password:<input type=“password” name=“Pasword” id=“PW” size=“20”></p> <p> <input type=“reset”> <input type=“submit” value=“Submit”> </p> <form> </body></html> Snimite dokument pod nazivom Primer46.html na D disk (D:\Grupa I\HTML 1\Primer46.html)
HTML obrasci Vežba IV