METODOLOGIJA RAZVOJA SOFTVERA

VJEŽBE V

Ljubiša Mićićljubisa.micic@ef.unibl.org

METODOLOGIJA

RAZVOJA

SOFTVERA

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!