1 / 32

Vežba IV

Vežba IV. HTML obrasci. S gledišta dizajnera, obrasci omogućavaju uspostavljanje dijaloga s 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

reece-watkins
Download Presentation

Vežba IV

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Vežba IV

  2. HTML obrasci • S gledišta dizajnera, obrasci omogućavaju uspostavljanje dijaloga s 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 • 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

  3. HTTP odnos zahtev/odgovor između čitača Weba i Web servera Č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 podatke Web server šalje čitaču korisnika tražene podatke Čitač korisnika prikazuje stranicu na monitoru 5 1 2 3 4 Web server 1 2 3 4 5

  4. 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 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

  5. Obrada HTML obrazaca CGI skript Aplikacija 4 5 1 Web server 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 Automatizovan odgovor Informacije o zaposlenima 6 3 Predaj Web čitač Informacije primljene Pritisnite ovde da biste prešli na sledeći obrazac 7 1 2 3 4 5 6 7

  6. 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)

  7. 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 p. • 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

  8. 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

  9. Atributi oznake <form> <html> <head><title> Obrazac za unos u jednom redu </title></head> <body> <form name=“ExampleForm” action=http://www.NVBizNet2.com/_scripts/_p1/FrmScrpt.CGI method=“POST” title=“Form ToolTip” enctype=“application/x-www-form-urlencoded”> <p> Polja za unos i dugmad</p> <p> [Dugmad Reset i Submit smeštaju se ovde] </p> </form> </body></html>

  10. Primer 50. <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 Primer50.html na D disk (D:\Grupa I\HTML\Primer50.html)

  11. 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 – svaki id u kodu stranice mora biti jedinstven - vrednost atributa id može se koristi da bi se sadržaj polja za unos obrađivao korišćenjem skripta u HTML kodu • 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

  12. 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

  13. 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

  14. Primer 51. <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 Primer51.html na D disk (D:\Grupa I\HTML\Primer51.html)

  15. 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

  16. 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 • name – ime pomoću koga se identifikuje svako polje za potvrdu • value – znakovni niz koji se serveru prosleđuje kao vrednost u paru ime/vrednost ako posetilac pritisne polje za potvrdu • 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.

  17. Primer 52. <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 Primer52.html na D disk (D:\Grupa I\HTML\Primer52.html)

  18. 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 tačku u radio-dugme koje je posetilac pritisnuo i time izabrao

  19. 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 skup radio dugmadi • 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

  20. Primer 53. <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 Primer53.html na D disk (D:\Grupa I\HTML\Primer53.html)

  21. 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 • multiple – ako ovaj atribut postoji u oznaci stavke, čitač Weba će pružiti posetiocu mogućnost da izabere više od jedne stavke iz liste

  22. 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

  23. Primer 54. <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> [Dugmad Reset i Submit smeštaju se ovde] </p> </form> </body></html> Snimite dokument pod nazivom Primer54.html na D disk (D:\Grupa I\HTML\Primer54.html)

  24. 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”>

  25. Primer 55. <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><input type=“reset”> </p></form> </body></html>

  26. 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”>

  27. 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

  28. Primer 56. <html> <head><title>Submit 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> <input type=“reset”> <input type=“submit” value=“Submit”> </p></form> </body></html>

  29. 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”>

  30. Primer 57. <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 Primer57.html na D disk (D:\Grupa I\HTML\Primer57.html)

  31. Vežba IV

More Related