HTML5 dio TABELE FORME KOLSKA 20192020 ODJELJENJA S

HTML-5. dio TABELE, FORME ŠKOLSKA 2019/2020 ODJELJENJA S 4 A, S 4 D, S 4 E VLADIMIR KOVAČ

tabele- uvod § Tabela se definiše pomoću taga <table> § Pojedinačna ćelija se definiše u okviru <td> </td> § Novi red se definiše sa <tr> </tr>.

tabele- uvod <table> <caption> sadržaj naslova tabele </caption> <tr> <th> sadržaj prve ćelija headera </th> <th> sadržaj posljednje ćelije headera </th> </tr> <td> sadržaj prve ćelije prvog reda </td> <td> sadržaj posljednje ćelije prvog reda </td> </tr> <td> sadržaj prve ćelije posljednjeg reda </td> <td> sadržaj poslednje ćelije posljednjeg reda </td> </tr> </table>

tabele- redovi <table border="3" cellpadding="5" cellspacing="5"> <tr> <td>prva 1</td> <td>prva 2</td> <td>prva 3</td> </tr> </table> U datom primjeru “prva 1“, “prva 2” i “prva 3” su ćelije u okviru istog reda

tabele- kolone Da bi se napravila nova kolona potrebno je koristiti sljedeći kod <table border="3" cellpadding="5" cellspacing="5"> <tr><td>prva kolona 1</td></tr> <tr><td>prva kolona 2</td></tr> <tr><td>prva kolona 3</td></tr> U datom primjeru “prva kolona 1“, “prva kolona 2” i “prva kolona 3” su ćelije u okviru iste kolone.

tabele- primjer 1 <table border="2"> <tr> <th>Ime: </th> <th>Prezime: </th> <th>Zvanje: </th> </tr> <td>Marko</td> <td>Marković</td> <td>Učenik</td> </tr> </table>

tabele- primjer 2 <table border="2" height="30%" width=100%"> <tr> <th>Ime : </th> <th>Prezime : </th> <th>Zvanje : </th> </tr> <td>Marko</td> <td>Marković</td> <td>Učenik</td> </tr> </table>

tabele- cellpadding i cellspacing Dva atributa koja imaju veliku primjenu su i cellpadding i cellspacing. Pomoću cellpadding atributa definiše se rastojanje između sadržaja ćelije i njene granične linije. Pomoću cellspacing atributa se može odrediti rastojanje između pojedinih ćelija tabele. <table border="2" cellpadding="30" cellspacing="10">

tabele- colspan i rowspan HTML dopušta mogućnost da se pojedine ćelije tabele protežu duž više redova ili kolona tabele. Ovakav efekat se može postići pomoću atributa colspan i rowspan, koji se ubacuju u <td> ili <th> tag one ćelije koja se želi posebno da formatira. Vrijednost ovih atributa se zadaje brojem kolona ili redova tabele duž kojih treba da se prostire data ćelija.

FORME

forme- uvod Za implementaciju formi koristi se osnovni tag <form>. Opšti oblik ovog taga je: <form> . . . </form> Najvažnija dva atributa taga <form> su: ACTION koji sadrži adresu (URL) programa na serveru; METHOD kojim je opisana metoda prenosa argumenata programa. Ovaj atribut može imati vrijednosti GET ili POST.

forme- dugme (button) button – definiše dugme opšteg tipa. Pritiskom na dugme koje je definisano pomoću ove vrijednosti korisnik izvršava akciju koja se mora definisati u okviru samog taga. Najčešće je to Java Script funkcija koja izvršava određene provjere prije samog slanja podataka na server. <input type="button" name=“provjeri" on. Click=”funkcija. Za. Provjeru()”>

forme- dugme (button) submit - definiše dugme pomoću koga se podaci šalju na server. <input type=“submit“ name=“posalji"> reset – definiše dugme koje postavlja sve vrijednosti elemenata forme na predefinisane tj. podrazumjevane vrijednosti. <input type=“reset" name=“ponisti“/>

forme- input tekst polje Koristi se atribut type sa definisanom vrijednošću text. <input type="text" name="ime_prez" value="Unesite ime i prezime" size="30"> Pomoću atributa value definiše se početni tekst koji će se pojaviti u tekst polju Pomoću atributa size se zadaje maksimalan broj karaktera koji se mogu unijeti od strane korisnika. Vrijednost atributa name definiše samo ime elementa pomoću koga drugi elementi aplikacije (Java. Script, serverski deo aplikacije tj PHP i dr. ) mogu čitati ili mijenjati unijetu vrijednost u okviru tekst polja. Ako se želi da se zamaskira tekst koji korisnik unosi u tekst polje umesto vrednosti text, treba koristiti vrijednost password.

forme- polje za potvrdu (checkbox) Polje za potvrdu se definiše korišćenjem taga input i njegovog atributa type sa vrijednošću checkbox <i>Koje programske jezike poznajete? </i> <ul type=”square”> <li> <input type=”checkbox” name=”C”> C</li> <li><input type=”checkbox” name=”C++”> C++</li> </ul>

forme- radio dugme Radio dugmad se definišu korišćenjem taga <input> i njegovog atributa type sa vrijednošću radio. <i>Poznajete li web programirenje? </i> <ul type=”square”> <li> <input type=”radio” name=”webpro”> Da</li> <input type=”radio” name=”webpro”> Ne</li> </ul>

forme- padajuća lista (select i option) Padajuća lista se definiše pomoću taga <select> i opcija <option>. Polje <select> opisuje izbor između mogućih vrijednosti navedenih u okviru taga <option>. Tag <option> sa atributom selected se uzima kao izabrana vrijednost. Tag <select> se realizuje kao padajući meni sa vrijednostima zadatim u okviru taga <option>. Atributi uz tag <select> su: § § size kojim je opisan broj elementa u opciji koje će biti prikazane, multiple kojim se omogućava izbor više opcija u istom trenutku. <b><i>Moj omiljene boje su : </i></b> <select name="predmeti"> <option>bijela</option> <option>žuta</option> <option>narandžasta</option> </select>

forme- tekst polje (textarea) Tag <textarea> prikazuje tekst u odvojenom tekst prozoru sa scrollbarovima. Dimenzije prozora su određene atributima rows (broj redova teksta) i cols (broj kolona). Atribut name dodjeljuje simboličko ime području u kome se nalazi tekst. <TEXTAREA name=”ime” rows=”n” cols=”m”>. . . neki tekst. . . </TEXTAREA>

forme- primjer 1 <html> <head> <title>Forma za komentare</title> </head> <body> <h 1>Posaljite svoje komentare</h 1> <form action=“komentari. php" method="post" > <p>Ime i prezime: <input type=“text” name="name“ > <p>Email adresa: <input type= "text" name="email“ size="50" > <p>Komentar: <textarea name="comments" rows="15" cols="70" > </textarea> <input type=“submit” value="Posalji"> <input type=“reset” value="Obrisi"> </form> </body> </html>

forme- primjer 2 ( lijevi + desni kod ) <html> <head> <title>Restoran italijanske hrane</title> </head> <body> <h 1> Restoran italijanske hrane </h 1> <form action=“narudzba. php" method=“post”> <h 2>Pice</h 2> <p>Koliko pica želite? <input name=“brojpica" value="0" size=“ 3” maxlength=“ 3”> </p> <input type=“radio” name=“velicina" value=“velika" checked>Velika <input type=“radio” name=“velicina" value=“srednja">Srednja <input type=“radio” name="size" value=“mala">Mala <h 3>Dodaci</h 3> <p> <input type=“checkbox” name=“dodaci" value=“ljutapap">Ljuta paprika <input type=“checkbox” name=“dodaci" value=“pecurke">Pecurke <input type=“checkbox” name=“dodaci" value=“kecap">Kecap <input type=“checkbox”name=“dodaci" value=“jaje">Jaje <input type=“checkbox” name=“dodaci" value=“masline">Masline <p>Ime: <input type=“text” name=“ime"> <p>Broj telefona: <input type=“phone” name=“telefon"> <p>Adresa: <textarea name="adresa" rows=6 cols=50> </textarea> <p>Broj kreditne kartice: <input type=password name=“kartica" size=“ 20”></p> <input type=“submit” value="Posaljite narudzbinu">