Universiteti 

Aleksander Moisiu Durres
Fakulteti i Teknologjise se Informacionit

Lenda: Programim Web 1
Tema: Format Html

Pedagogu: Eda Tabaku

 QELLIMI I LEKSIONIT

• Gjate ketij leksioni studentet duhet te kuptojne:

Mbledhja e informacionit nga vizitoret, forma dhe tipet e formave,

menyra se si nje forme punon, struktura dhe elementet e saj.
Permbajtja
• 1. Konceptet kryesore te formes ne nje faqe Web

• 2. Krijimi i nje forme

• 3. Llojet e formave

• 4. Teknikat kryesore te formatit te nje forme

Cfar jane format HTML?
• Format jane elemente HTML te cilat perdoren per te marre informacion
nga perdoruesi.

• Format jane elemente HTML te cilat perdoren per te marre informacion

nga perdoruesi.

• Format mbledhin informacion nga perdoruesit dhe i dergojne te dhenat

per perpunim ne server.

• Nje shembull forme, kutite e logimit ne facebook.

 Si punon nje form Html ?

• 1. Perdoruesi ploteson nje form dhe pastaj shtyp butonin submit

(dergo) per te derguar te dhenat ne server.

2. Emri i çdo ‘form control’ dergohet te server se bashku me vlerat qe

perdoruesi vendos ose zgjedh.

3. Serveri perpunon te dhenat duke perdorur nje gjuhe programimi si

PHP, VB.net, C# ose Java, Python. Gjithashtu, keto te dhena mund te
ruhen
ne nje baze te dhenash.

4. Serveri krijon nje faqe te re per t’ia derguar serverit si pergjigje per
informacionin e marre.
Tipet e formave
• Input (input text, input password, butonat, file upload ..)

• Me zgjedhje shumfishe (checkbox, radio buttonat, drop

down list )

• Kutite me text (textarea)

 Krijimi i nje forme
• Nje element forme konsiston ne keto pjese kryesore:
1. Informacion per perdoruesin i cili lidhet me informimin e perdoruesit per
menyren se si ta plotesoj formen dhe çfare informacioni kerkohet.

2. Fushat e formes (hapesira boshe, select, radio, button etj) qe do te

plotesohen nga perdoruesi.

3. Teksti ndihmes qe ndodhet prane çdo ‘form control’ qe ndihmon

perdoruesin per plotesimin e formes.

4. Atributi method i formes i cili percakton metoden per dergimin e te

dhenave te formes ne server te plotesuara nga perdoruesi. Dy metodat e
perdorura jane: POST dhe GET.

5. Atributi action i formes i cili percakton URL e nje programi ne server.

Pra, percakon se ku do te shkojne keto te dhena.

6. Butoni i tipit submit i cili perdoret per te derguar te dhenat.

Struktura e pergjithshme e
nje forme Html
Sintaksa:

<form action=“URL” method=“get/post”>

…Permbajtja e formes… (form control)
</form>

Atributi action:

ka si vlere URL efaqes se serverit.

Atributi method:

Ka si vlere Get ose POST e cila percakton metoden e dergimit te te dhenave

ne server. Metodat qe perdoren jane GET dhe POST
 Dergimi i te dhenave te plotesuara
ne form – atributi action
• Atributi action percakton vendin se ku do te shkojne te dhenat e plotesuara
ne forme. Te dhenat e formes mund te dergohen:
­ Ne adresen e e­mail te administratorit te faqes.
­ Ne nje baze te dhenash.
­ Ne nje web page tjeter.

Nese te dhenat do te dergohen ne nje adrese e­mail atehere sintaksa do te

ishte:
<form action="mailto:name@emailaddress.com">

Nese te dhenat do te dergohen ne baze te dhenash atehere sintaksa do te

ishte:
<form action="emri_i_RDBMS">

Nese te dhenat do te dergohen ne nje faqe tjeter atehere sintaksa do te ishte:

<form action="emri_faqes">
 Metoda get dhe post – atributi
method
• Metoda get dergon te dhenat e formes te mbajtesi i formularit URL. Kjo perdoret
per:
­Format e shkurtera
­Per format ne te cilen perdoruesit nuk mund te dergojne informacion
per te shtuar ose fshire te dhenat ne nje baze te dhenash. Pra perdoruesit vetem
mund ti lexojne te dhenat ne nje server.

­ Te dhenat dergon te dhenat si pjese te URL/

• Metoda post dergon te dhenat e formes ne HyperText Transfer Protocol

(HTTP). Kjo metode perdoret per:
­ Format e gjata.
­ Format qe lejojne perdoruesit te ngarkojne file.
­ Format qe permbajne te dhena te ndjeshme (p.sh. fjalekalimi).
­ Per format ne te cilen perdoruesit mund te shtojne ose te heqin infomacion nga
baza e te dhenave.
­ Te dhenat qe dergohen i fsheh ne dicka te njohur si pjese te headerit HTTP.

• Nese nuk perdoret atributi method te dhenat e formes do te dergohen duke

perdorur metoden get.

• Kujdes nese te dhenat qe ndergohen nepermjet forms jane sensitive, ato duhet te
dergohen ne permjet metodes post.
Llojet e Formave
• Input element

• Input password

• Radio Button

• Checkbox

• Drop Down List

• Text Area

• Files Upload

• Buttonat
 Input Text
• Input Text: perdoren nga perdoruesit per te • <html>
vendosur te dhena te tipit text, te tille si
username,name, adrese emailiy, etj • <body>

• <form>
• Sintaksa:
• Emer: <input type="text" name="emri" size="10"
<input type=“text” name=“emri_fushes”> maxlength="25" value="emri">

• </br>
Atributet:
• Mbiemer: <input type="text" name="mbiemri" size="10"
maxlength="25" value="mbiemri">
atributi type ­ percakton tipin e te dhenave
(text) • </form>

• </body>
atributi name ­ percakton çelesin per vleren
input • </html>

atributin value ­ percakton vleren fillestare.

atributin size ­ percakton gjatesine e
rreshtit input ne karaktere.
atributi maxlength ­ percakton numrin
maksimal te karaktereve qe
perdoruesi mund te vendos ne rreshtin
input.
 Input Password
<html>
• Sintaksa:
<body>
<input type=“password”
name=“emri_fushes”> <form>
Atributet: Username Juaj: <input type="text"
name="emri" size="30"
atributi type ­ percakton tipin e te maxlength="20" value="name">
dhenave (password). Kjo ben qe
karakteret qe perdoruesi shtyp </br>
duken si yll ose disc.
Passwordi Juaj: <input
Atribuet e tjera qe e shoqerojne type="password"
jane te njejata me ato te input text. name="fjalekalim" size="30"
maxlength="20"
value="fjalekalimi">
</form>
</body>
</html>
 Radio Buttonat <html>
<body>
<form>
Dega Juaj e Studimeve:
</br>
• Butonat radio jane butona te
<hr>
vegjel, te rrumbullaket dhe u </br>
mundeson perdoruesve te zgjedhin <input type="radio" name="dega" value="ti">
nje opsion nga nje numer i caktuar Teknologji informacioni
opsionesh . </br>
<input type="radio" name="dega" value="si">
• Sintaksa: Sisteme Informacioni
</br>
<input type=“radio” <input type="radio" name="dega" value="ia">
name=“emri_fushes” value=“vlera”> Informatike Anglisht
Atributet : </br>
<input type="radio" name="dega" value="shk">
atributi type – ka vleren radio Shkenca Kompjuterike
</br>
aributi checked – ka vlere checked <input type="radio" name="dega" value="mtv">
dhe njeri prej elementeve eshte i Multimedia dhe Televizion dixhital
check paraprakisht. </br>
<input type="radio" name="dega" value="mi">
atributet e tjera te njejte si tek input Matematike Informatike
text </br>
</form>
</body>
 <html>

Check Boxes <body>

<form>

• Check Boxes eshte e ngjashme me radio Hobi juaj:

buttons me ndryshim e vetem se mund te
zgjidhen nje, disa ose asnje opsion nga nje </br>
list opsionesh. Ata jane butona te vegjel, ne
forme katrore, ne momentin e klikimit <hr>
vendoset nje x I vogel mbi kutine.
</br>
• Sintaksa:
<input type="checkbox" name="Hobi"
<input type=“checkbox” name=“emri_fushes” value="muzik" checked ="checked"> Muzika
value=“vlera”>
</br>
atributi type – ka vleren checkbox
<input type="checkbox" name="Hobi"
atributet e tjera te njejte si tek input text value="not"> Noti

</br>

<input type="checkbox" name="Hobi"

value="lexim"> Leximi

</br>

<input type="checkbox" name="Hobi"

value="gatim"> Gatimi

</form>

</body>

</html>
 Drop Down List Box
• Menute drop down perdoren ne rastet kur ka
shume mundesi zgjedhjeje nga te cilat
perdoruesi mund te zgjedh vetem nje opsion <html>
(by default). <body>
Sintaksa:
<form>
• Sintaksa :
<select name=“emri_fushes”> <p>Shtetesia</p>
<option value= “vlera”>Emri</option>
<option value= “vlera”>Emri</option>
<select name="Shtetesi" size="1">
…………… <option value="Zgjidh
</select>
Shtetin">Shtetesia Juaj </option>
• Atributet: <option value="Al">Shqiperi</option>
Atributi size ­ specifikon se sa opsione jane <option value="IT">Itali</option>
shfaqur ne menu ne njekohe. <option value="Fr">France</option>
Atributi selected ­ perdoret nese ndertuesi i </select>
faqes zgjedh paraprakisht nje nder opsionet. </form>
atributi multiple ­ me vleren multiple perdoret </body>
per te zgjedhur me shume se nje opsion.
Perdoruesit qe te kryejne nje zgjedhje </html>
shumefishe duhet te mbajne shtypur tastin
SHIFT nderkohe qe selekton elementet e listes.
 Text Area – Kutite me text
per komentet
<html>
• Kuti te cilat i lejojne perdoruesit te
vendosin nje teks te perbere nga disa fjale. <body>
• Sintaksa: <form>
<textarea name=“emri_fushes”> Vendosni Emer: <input type="text" name="emri"
komentin tuaj</textarea> value="emri juaj...">
Atributet: </br>
Atributi cols ­ percakton gjeresine ne </br>
karaktere te text area
</br>
atributi rows ­ percakton lartesine ne
karaktere te text area.
Komenti juaj: <textarea name="komenti"
rows="10" cols="30"> komenti juaj
ketu</textarea>

</form>

</body>

</html>
 Files Upload
• Disa forma online kerkojne qe nje
skedar te transmetohet se bashku me <html>
te dhenat e tjera te formes te <body>
plotesuar nga perdoruesi. P.sh, mund <form>
te jete nje foto, CV etj. <p>Upload cv:</p>
<input type="file" name="cv">
• Sintaksa:
</form>
<input type=“file” name=“emri_fushes”> </body>
</html>
atributi type – ka vleren file

Butonat
• Butonat i japin mundesi perdoruesve
kryesisht per t’u lidhur me formen, pasi kemi
plotesuar nje forme, ne jemi gati per te
procesuar ate keshtu shtypim butonin
perkatesper dergimin e formes se plotesuar.
• <p>Emri: <input type="text"
• Tre tipe e butonave jane:
­ Submit buttons ­ perdoren per procesim te
formes (dergim).
­ Reset buttons ­ perdoren per te fshire te
dhenat e plotesuara.
­ Other buttons­ perdoren ne raste alternative
per format.
­ Atributet
­ Atributi type – ne vartesi te tipit te butonit
merr vleren: submit, reset, button
<html>
<body>
<form
action="mailto:e.tabaku@hotmail.com"
method="post">
<h1>Emri dhe fjalekalimi</h1>
name="emer"></p>
<p>Mbiemri: <input type="text"
name="mbiemer" ></p>
<p>Fjalekalimi: <input type="password"
name="passw"></p>
<h1>Lenda juaj e preferuar</h1>
<p>Lenda juaj e preferuar</p>
<p><input type="radio" name="Lenda"
value="p.web" />Programim Web</p>
<p><input type="radio" name="Lenda"
value="rrjeta" />Rrjeta</p>
<input type="submit" value="Dergo"/>
<input type="reset" value="Fshij" />
</p>
</form>
</body>
</html>
 Date input
• Shume forma mund te mbledhin
informacion rreth dates. Per te
vendosur daten perdoret elementi <html>
input dhe vlera e atributit type <body>
vendoset date. <hr>
Sintaksa: <form >
<input Emri: <input type="text" name="emri">
type=“date”name=“emri_fushes”> Datelindja <input type="date"
name="date">
• Atributet:
</form>
atributi type – ka vleren data </body>
</html>
atributet e tjera njelloj si input text.
Detyre
• Ndertoni nje forme input emaili, url dhe nje buton image.
 Search Input
• Kuti kerkimi • <html>

• Sintaksa: • <body>

<input type=“search” value=“vlera”> • Kerko: <input

type="search"
Atributet: name="search"placeholder=
"kerko ketu" />
Atributi type : ka vleren search
• <input type="submit"
Atributi placeholder : vlera e te cilit
value="Search" />
eshte teksi qe do te shfaqet ne kutine
e teksit derisa kerkuesi te klikoj ate • </form>
zone.
• </body>

• </html>
Teknikat kryesore te
formatit te nje forme
• Teknikat e formatimit te formes lidhen kryesisht me
ndertimin e formes ne menyre qe forma te duket vizualisht
me e kendeshme dhe me stilet e formes te cilat do te trajtohen
me gjere te CSS.

• Dy jane teknikat me te perdoreshe te menyres sesi

organizohen format:

• 1. Nepermjet Tabelave (Table)

• 2. Nepermjet grupimit (Fieldset)

Formatimi Nepermjet Tabeles
<html>
<body>
<form>
<table border="1" width = "500px" align= "left">
<tr>
<th colspan = "2" style= "color:blue ; background­color:gray; align:center"> Te dhenat personale te Studentit te
FTI </th>
</tr>
<tr>
<td width = "200px">Emri Mbiemri:</td>
<td width = "300px"><input type="text" name="emri" size="30" maxlength="40" value="emer mbiemer"></td>
</tr>
<tr>
<td width = "200px"> Ditelindja :</td>
<td width = "300px"> <input type="date" name="date"> </td>
</tr>
<tr>
<td>Shtetesia</td>
<td> <select name="Shtetesi" size="1">
<option value="Zgjidh Shtetin">Shtetesia Juaj </option>
<option value="Al">Shqiperi</option>
<option value="IT">Itali</option>
<option value="Fr">France</option>
</select>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="email" name="mail" required=>
</td>
</tr>
<tr>
<td> Gjinia:</td>
<td>
<input type="radio" name="gjinia" value="f" > Femer
</br>
<input type="radio" name="gjinia" value="m"> Mashkull
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="fjalekalim" size="30" maxlength="20" >
Formatimi nepermjet grupimit
Sintaksa:
<fieldset>
<legend>Emri i grupimit</legend>
...
</fieldset>
<fieldset>
<legend>Emri i grupimit</legend>
...
</fieldset>
<html>
<body>
<form>
<fieldset>
<legend>Informacion personal</legend>
Emri:
<br>
<input type="text" name="emri">
<br>
Mbiemri:<br />
<input type="text" name="mobile">
<br>
</fieldset>
<fieldset>
<legend>Menyra kontakti</legend>
Email:
<br>
<input type="text" name="email">
<br>
Celular:
<br>
<input type="text" name="mob">
<br>
Telefon:<br>
<input type="text" name="tel">
</fieldset>
<fieldset>
<legend>Shkollimi</legend>
Bachelor:<br />
<input type="text" name="bachelor">
<br>
Master:
<br>
<input type="text" name="mobile" />
<br />
</fieldset>
</form>
</body>
</html>
Detyra: Ndertoni format e
meposhteme:
Detyra: Ndertoni format e
meposhteme:
PYETJE
Fund

Falemiderit

Email: e.tabaku@hotmail.com