Forme
Forma Sadrže polja (ili dugmad) koja korisnik može da popuni traženim podacima ili učini izbor između više ponuđenih opcija i unetu informaciju vrati vlasniku stranice. Klikom na dugme submit, uneti podaci se šalju serveru od koga je uzet HTML dokument HTML se ne bavi obradom unetih podataka na strani servera! Polje za tekst (text box) Radio dugme (radio button) Polje za potvrdu (checkbox) Dugme za slanje (submit button) Padajuća lista (list box) - Nije na formi -
Definisanje forme -tag form - <form > </form> : predsavlja okvir za formu <html> <body> <form action= /php/racun.php method= post >... </form> </body> </html> Ova forma je prazna jer ne sadrži elemente (tekst polja, dugmad i td...), koji se definišu između tagova <form> i </form> Klikom na submit dugme, sadržaji svih elemenata forme se pakuju i šalju serveru. Server prima podatke i pokreće program za obradu primljenih podataka. Ovaj program se nalazi u fajlu čije je ime (tj. URL) navedeno kao vrednost atributa action. Rezultat ove obrade je obično nova stranica koja se kreira i vraća klijentu, gde zamenjuje stranicu forme.
Formatiranje tekst polja <html> <body> <form action="/php/racun.php" method="post"> Ime: <input type="text" name="ime"><br> Br. Indeksa: <input type="text" name= indeks" size="25" maxlength="5" value="ovde upisite broj indeksa"> </form> </body> </html> Tag <input > definiše jedan element za unos podataka. Atribut type definiše tip elementa <input type="text > definiše polje za tekst Atribut name definiše ime elementa (ne prikazuje se) Atribut size - definiše dužinu polja za tekst Atribut maxlength definiše maksimalan broj karaktera koji se mogu uneti u polje za tekst Atribut value definiše tekst koji će inicijalno biti upisan u tekst polju (tekst koji korisnik treba da zameni svojim tekstom)
Formatiranje polja za lozinku <html> <body> <form action="/php/racun.php" method="post"> Korisnicko ime:<br> <input type="text" name="user_name" size="20" maxlength="20"/> <br> Lozinka:<br> <input type="password" name= lozinka" size="20"maxlength="20" /> <br> <br> <!-- Dugmad za Submit i Reset --> <input type="submit" value="login" name="submit"> <input type="reset" value= Obrisi" name="reset"> </form> </body> </html> O dugmićima kasnije! U polju za lozinku, uneti tekst se ispisuje u vidu tačaka (radi sigurnosti)
Formatiranje oblasti za tekst <html><body> <form action="/php/komentar.php" method="post"> User Name:<br> <input type="text" name="ime" width"30 maxlength="20"> <br><br> Napisite svoj komentar:<br> <textarea name="komentari" cols=40 rows=7 wrap></textarea> <br><br> <!-- Submit & Reset Buttons --> <input type="submit" value="posalji" /> <input type="reset" value="obrisi" /> </form> </body></html> Tag textarea definiše oblast za tekst Atribut col definiše broj kolona, a atribut row broj vrsta (redova) u oblasti za tekst. Atribut wrap definiše da se tekst koji se unosi u oblast lomi kada se stigne do kraja reda. 7 40
Formatiranje polja za potvrdu <html> <body> <form action="/php/komentar.php" method="post"> <p>koji su vasi omiljeni sportovi? </p> <input name="sportovi" type="checkbox" value="fudbal checked> Fudbal<br> <input name="sportovi" type="checkbox" value="kosarka">kosarka<br> <input name="sportovi" type="checkbox" value="odbojka">odbojka </form> </body> </html> type= checkbox - kreira polje za potvrdu name = sportovi definiše ime polja za potvrdu (isto za sva polja za potvrdu iz iste grupe). value = fudbal definiše vrednost koja se vraća serveru ako je konkretno polje za potvrdu selektovano. checked - ako postoji, konkretno polje za potvrdu biće selektovano prilikom otvaranja stranice Dozvoljeno je štiklirati više od jedne opcije
Formatiranje radio dugmadi <html> <body> <form action="/php/komentar.php" method="post"> <p>kojom rukom pisete?</p> <input type="radio" name="ruka" value="desnom" checked> Desnom <br> <input type="radio" name="ruka" value="levom"> Levom <br> <input type="radio" name="ruka" value="obema"> Obema </form> </body> </html> type= radio - kreira radio dugme name = ruka definiše ime radio dugmeta (isto za sva dugmad iz iste grupe). value = desnom definiše vrednost koja se vraća serveru ako je konkretno radio dugme selektovano. checked - ako postoji, konkretno radio dugme biće selektovano prilikom otvaranja stranice Uvek je izabrana samo jedna opcija (pod uslovom da sva radio dumad imaju isto ime - name)
Formatiranje padajuće liste <html><body> <form action="/php/good_sense.pl" method="post"> Koje je vase omiljeno voce? <br> <select name="voce"> <option>izaberite voce</option> <option>----------------------</option> <option value="jabuka">jabuka</option> <option value="breskva">breskva</option> <option value="visnja">visnja</option> </select> </form></body></html> <select> </select> okvir za padajuću listu <select name= voce > - ime padajuće liste <option > </option> - definiše jednu stavku padajuće liste <option value= jabuka> - definiše vrednost stavke, tj. vrednost koja se vraća serveru ako je konkretna stavka izabrana. Klikom na listu, ona se otvara
Formatiranje okvira sa listom <html><body> <form action="/php/jezik.php" method="post"> <p>koje strane jezike znate?</p> <select name="jezici" size="4" multiple="multiple"> <option value="engleski">engleski</option> <option value="francuski">francuski</option> <option value="nemacki">nemacki</option> <option value="spanski">spanski</option> </select> <p>da biste izabrali vise opcija, drzite pritisnutim taster Ctrl</p> </form></body></html> <selection size= 4 multiple= multiple > definiše okvir sa listom koji sadrži 4 stavke Mogućnost višestrukog izbora
Formatiranje polja za biranje datoteka <html> <head> <title>file Fields</title> </head> <body> <form action="/php/file.php" method="post"> <p>prenesite (upload) vasu fotografiju u GIF formatu:</p> <input type="file" name="upload" size="20" maxlength= 50 accept="image/gif" /> </form></body></html> <input type= file > definiše polje za biranje datoteka name definiše ime polja size definiše dužinu polja za tekst maxlength definiše maksimalan broj karaktere koji korisnik može da unese u polje za tekst accept definiše MIME tip fajla koji dozvoljeno izabrati Korisniku je omogućeno da upise ime datoteke (zajedno sa putanjom), ili da klikom na dugme Browse otvori dijalog za izbor fajla Šta će se desiti klikom na Browse, prikazan je na sledećem slajdu
Formatiranje polja za biranje datoteka Nakon izvršenog izbora fajla, klikom na Open, dijalog se zatvara u tekst polje se upisuje ime fajla zajedno sa putanjom
Formatiranje Submit i Reset dugmadi <html><body> <form action="/php/poruka.php" method="post"> E-mail Adresa:<br> <input type="text" name="email" size="20" /> <br><br> Message:<br> <textarea cols="50" rows="10" name="message wrap></textarea> <br><br> <input type="submit" value="posalji" /> <input type="reset" value="obrisi" /> </form></body></html> <input type="submit" value="posalji"> definiše submit dugme. value= Posalji definiše tekst ispisan na dugmetu <input type= reset" value= Obrisi"> definiše reset dugme. Klik na dugme submit inicira slanje podataka iz svih elemenata forme serveru Klik na dugme reset inicira brisanje svih podataka unetih u elemente forme
Slika kao dugme Submit <html><body> <form action="/php/poruka.html" method="post"> E-mail Address:<br> <input type="text" name="email" size="20" /><br><br> Message:<br> <textarea cols="50" rows="10" name="message" wrap></textarea><br> <input type="image" src="posalji.gif" width="110" height="45" name="submit_image" alt="submit"> </form></body></html> <input type= image > definiše sliku kao dugme submit src= posalji.gif definise fajl slike width i height definišu dimenzije slike name definiše ime ovog elementa alt definiše alternativni tekst za sliku
Korišćenje skupova polja (field set) Mogućnost grupisanja srodnih elemenata forme radi preglednijeg vizelnog prikaza <html><body> <form action="/php/podaci.php" method="post"> <fieldset> <table> <tr> <td>ime:</td> Tabela se koristi radi poravnanja teksta i tekst polja <td><input name="ime_kandidata" type="text"></td> </tr> <tr> <td>prezime:</td> <td><input name="prezime_kandidata" type="text"> </td></tr> <tr> <td>adresa:</td> <td><input name="adresa_kandidata" type="text"> </td></tr> </table></fieldset></form></body></html> Bez tabele Ovaj okvir potiče od <fieldset> </fieldset>