Embed Size (px)
Citation preview
7. Forme
Vrste formi
Dodavanje teksta
Submitting forme
Izborne liste
Dodavanje fajlova
Jedna od dva
metoda: get ili
post
Element <form> i prateći atribut action
Osnovna struktura formi
Kod elementa <form> moramo definisati atribute action i method.
Postoje 2 vrste metoda: get i post. Get je obično odgovarajući kada
nam ne treba dodavanje unesenog u bazu (npr.samo pretraga) a
post obično koristimo kada korisniku forme dozvoljavamo da
aploduje fajlove, unosi šifre, dodaje podatke u bazu podataka i sl.
Atribut id se koristi za odvajanje vrijednosti od drugih vrijednosti na
stranici (ne koristimo trenutno u primjeru).
URL za stranicu na
serveru koja će primiti
informaciju kada se
sumituje
Element
<form> i
prateći atribut
action
Tekst input
Element <input> se koristi za kreiranje nekih kontrola forme.
Vrijednost pratećeg atributa type definiše kakav će biti unos. Kada
ovaj atribut ima vrijenost teksta onda se kreira polje za unos teksta.
Da bi server prepoznao potrebno je unijeti o kakvom vrstu unosa je
riječ (npr.korisnočno ime tj.username, šifra password i sl.).
Maxlenght atribut se koristi kada želimo da ograničimo maksimalan
broj mogućih unesenih karaktera. Npr.koliko bi bilo ograničenje kod
unosa godina?
Element <input> sa pratećim atributima za tekst,
veličinu i maksimalnu veličinu
Forma za unos šifre
Identičan unos kao i u predhodnom slučaju sa tim da moramo dodati
novi paragraf gdje ćemo definisati da je type password kako bi ga
server mogao prepoznati prilokom prijavljivanja.
Element <input> sa pratećim atributima za šifru,
veličinu i maksimalnu veličinu
Tekstualno polje
Element <textarea> se koristi za kreiranje tekstualnih polja za
višelinijski unos teksta. Ovo nije samozatvarajući element.
Tekst koji se nalazi između otvarajućeg i zatvarajućeg taga ovog
elementa je tekst koji će se naći u tekstualnom polju prije kucanja
teksta od strane korisnika.
Element <textarea> sa pratećim atributima name, cols,
rows. Između je tekst koji će se naći u tekstualnom polju
prije unosa tekst od strane korisnika.
Radio dugme
Element <input> se koristi i za kreiranje radio dugmeta ali sa
upotrebom atributa type=“radio”. Ovaj atribut nam omogućava da
odaberemo samo 1 od ponuđenih odgovora. Value atribut u ovom
slučaju definiše vrijednost koja će se poslati serveru nakon odabire
od strane korisnika (napomena: nema diselekcije nego samo odabir
druge opcije).
Element <input > sa pratećim atributima type, name,
value i za radio dugme karakterističnim atributom
CHECKED.
Checkbox
Atribut i njegova vrijednost type checkbox> se koristi za kreiranje
checkbox formi. Ova forma omogućava korisniku da selektuje jedan
ili više odgovora.
Element <input > sa pratećim atributtom type koji
ovdje ima vrijednost “checkbox”. Primjetićete da
onaj kojeg postavite da je checked će biti čekiran.
Padajuća lista
Forma padajuća lista (eng. Drop down listi ili select box) dozvoljava
korisniku da odabere jednu vrijednost iz padajućeg liste. Element
<select> se koristi za kreiranje padajuće liste unutar koje se mogu
definisati jedna ili više mogućnosti izbora.
Atribut selected se može dodatno koristiti kada želimo da jedna
opcija unaprijed bude odabrana.
Element <option> koristimo za definisanje
mogućnosti za izbor koje će korisnik imati.
Dodatni element
select
Polje za višestruki odabir
Element <select> skupa sa elementom <option> ali sa dodatnim
atributom multiple se koristi za kreiranje polja sa višestrukim
odabirom (po potrebi zamjeniti sa drugim mogućnostima). Za
višestruki odabir je potrebno koristiti i ctrl dugme na tastaturi
Dodatni atribut multiple
Dodavanje fajlova
Element <input> se koristi i za dodavanje fajlova (od .doc i .pdf do
jpeg formata) ali sa upotrebom atributa i vrijednosti type=“file”.
Ovdje će se pojaviti “browse” tj.pretraži sa mogućnošću upload-a.
Slično je i sa primjerom za pretplatu na newsletter:
Napravili bismo <input type=“text” name “email” /> a u narednom redu
bismo preko <input type=“submit” name “prijava” value=“Prijavi se” />
definisali bismo da se taj konkretan email šalje u bazi pretplatnika na nl.
Vrijednos
t atributa
type je
file.
Method je
post
Submit dugme
Vrijednost
atributa type
je submit.
Method je
post
HTML5: odabir datuma
Vrijednost
atributa type
je date.
HTML5: druge mogućnosti
Oznaka forme
Element <label> koristimo kako bismo dodjelili oznaku formi.
Možemo umotati oznaku oko riječi koje označavamo ili podjeliti
odvojeno oznaku kada koristimo atribut for kojim definišemo za koga
vežemo oznaku.
Grupisanje elemenata forme
Moguće je grupisati više kontrola formi unutar elementa <fieldset>.
Ovo je posebno korisno kada je riječ o dužim formama.
Element <legend> koristimo kada nakon otvarajućeg taga gore
pomenutog elementa <fieldset> u koji unosimo naziv seta formi.
Fieldset
element
Legend element se
ubacuje nakon fs
Primjer - zadatak
Rješenje
primjera
Rješenje primjera – 2.dio
Rješenje
primjera
– 3.dio
8. Markup
Tipovi DOC-a
!DOCTYPES
Komentari
Često je potrebno da unesete komentare u kod kako biste dali do
znanja kada neki dio počinje ili da date pojašnjenje šta se gdje nalazi.
Komentari se unose za vlastite potrebe ali i za druge koji bi mogli
pregledavati kod. Oni nisu vidljivi za korisnike stranice.
Komentar
ELEMENTI: u narednom ili istom redu
Grupisanje teksta i elemenata u blok
Element <div> nam omogućava da grupišemo
više elemenata u jedinstvenu „kutiju“. Npr.možete
koristiti ovaj element da biste grupisali sve
elemente vašeg header-a.
Imajući u vidu da je se unutar <div> elementa
može naći više drugih elemenata korisno je
postaviti komentare za pojašnjenje.
Okviri
Element <iframe> je kao
mali prozor koji se nalazi
na stranici – i u tom
prozoru možete vidjetu
drugu stranicu
(skraćenica od inline
frame). Tipičan primjer je
Google Map na stranici.
HVALA za pažnju!
