04 sesioni 04

Format

Format janë elemente HTML te cilat përdoren për te marre informacion nga përdoruesi. Nje form mund te permbaje elemente inputi te tilla si fusha teksti, checkboxe, radio-buttona, butona submit etj.

Një mënyrë për te krijuar një forme është kjo:

<FORM ACTION="url process" METHOD="POST">

...

Elements

..

</FORM>

Atributet e Formave:

• ACTION: ky atribut përcakton URL-ne ku do te dërgohen te dhënat qe do te shtypi përdoruesi. Atributi action tregon se cfare I ndodh te dhenave kur shtypet butoni I dergimit. Zakonisht vlera e atributit eshte nje faqe ose nje program ne nje web server qe do te marred he procesoj te dhenat e derguara.

Per shembull, nqs keni nje form logimi qe kerkon nje username dhe nje password; keto te dhena qe fut perdoruesi do te kalojne ne nje faqe login.php dhe ne kete rast vlera e atributit action I faqes sone do te jete <form action="http://www.siteJuaj.org/login.php">. Si URL mund te përdoret një adresë emaili p.sh: mailto:address@e.mail ose një HTTP URL http://www.uamd.edu/form.html.

•METHOD: metoda përcakton mënyrën se si te dhënat do te dërgohen. Ekzistojnë dy mundësi GET dhe POST. Metoda get I dergon te dhenat si pjese te URL.Metoda post i fsheh te dhenat ne dicka te njohur si pjese te headerit HTTP.

• ENCTYPE: përcakton tipin e kodimit te përdorur.

Atributi id

Atributi id ju lejon ju te identifikohen ne menyre unike elementet brenda nje elementi <form> ashtu sic ju identifikoni ne menyre unike nje element ne nje faqe.

Eshte praktike e mire qe ju ti specifikoni nje element id cdo elementi forme sepse shume forma perdorin file per style dhe skripte te cilet kerkojne perdorimin e atributit id ne menyre qe te behet dallimi i tyre.

Vlera e atributit id duhet te jete unike brenda nje dokumenti. Disa persona vendosin si vlere te atributit id dhe name per formen karakteret frm dhe me pas pershkruajne te dhenat si psh ne rast te nje forme logimi perdoret frmLogin apo ne rast te nje forme kerkimi frmKerkim etj.

Atributi name (deprecated)

Ashtu sic e kemi pare tashme perdorimin e ketij atributi neper elemente te tjere, atributi name eshte paraarshesi i atributit id dhe vlera e tij duhet te jete unike ne te gjithe dokumentin.

Ne menyre pergjithesuse nuk dote shihni perdorim te atributit name porse nqs do tju duhte ta perdorni ath keshillohet qe si vlere te tij te vendosni vleren qe keni vendosur per atributin id. E ngjashme me atributin id kehsillohet qe si vlere tek value te vendosni frm_qellimiFormes si psh frmKerkimi apo frmLogimi.

Elementet e Formës

HTML ofron një game te gjere elementesh qe përdoren për input ne forma. Ato mund te përdoren për funksione te ndryshme si për shkruajtur tekst apo për dërgim skedarësh.

<INPUT>

Elementi INPUT është me i përdoruri dhe përdoret si nje fushe për te marre te dhëna. Ekzistojnë disa lloje te ndryshme te elementit INPUT ne varësi te vlerës qe merr atributi TYPE:

• TYPE=RADIO: lejon qe te zgjedhin nga një rang mundësish, por vetëm një ne një kohe.

• TYPE=RESET: fshin te gjithë formën.

• TYPE=TEXT: i lejon përdoruesit qe te fus një rresht tekst.

• TYPE=PASSWORD: i lejon përdoruesit qe te fus një rresht tekst i cili paraqitet si

"*" ne vend te tekstit. Zakonisht përdoret për pjesën ku do te shkruhet password-i.

• TYPE=CHECKBOX: na lejon të zgjedhim një ose më shumë opsione.

•TYPE=SUBMIT: merr të dhënat e futura në form dhe kryen veprimin e caktuar.

• TYPE=HIDDEN: një fushe teksti e cila nuk i shfaqet përdoruesit. Përdoret për te ruajtur vlera.

Elementi INPUT ka edhe disa atribute opsionale:

• NAME: emërton fushën. Kjo është e rëndësishme për tu përdorur ne kod për përpunime te tjera.

• VALUE: i vendos një vlere fillestare fushës.

SELECT

SELECT përdoret për te zgjedhur një ose me shume nga opsionet e mundshme.

Një shembull do te ishte:

<SELECT name="destination">

<option> Africa

<option> Antarctica

<option> America

<option> Asia

<option> Europe

<option> Oceania

</SELECT>

Atributet e elementit SELECT janë:

• SIZE: Nëse SIZE ka vlerën 1, vetëm një nga opsionet do te shfaqet, nëse vlera është me e madhe se 1 përdoruesit do ti shfaqet një liste me zgjedhje.

•MULTIPLE: përdoruesit mund të zgjedhin më shumë se një opsion, nëse kjo është e zgjedhur.

Elementi OPTION ka dy atribute:

•VALUE: vlera që do ti caktohet variabëlit kur te jete zgjedhur ky opsion.

• SELECTED: ky opsion zgjidhet vetvetiu.

TEXTAREA

TEXTAREA përdoret për te marre nga përdoruesi disa rreshta tekst.

Formati i saje është si me poshtë:

<TEXTAREA name="comments" cols=30 rows=6>

Jepni përshtypjet tuaja rreth faqes tone!

</TEXTAREA>

Përmbajtja qe vendoset ndërmjet <TEXTAREA> dhe </TEXTAREA> përben vlerën fillestare te kësaj fushe.

Atributet e TEXTAREA janë:

• ROWS: rreshtat që do të merren nga kutia e tekstit.

• COLS: kolonat.

Tani do te shohim një shembull i cili përdor elementet qe pame ne ketë pjese.

Kodi HTML nga i cili kemi marre rezultatin e mësipërm është:

<HTML>

<HEAD>

<TITLE>Titulli i Dokumentit</TITLE>

</HEAD>

<BODY>

<H1>Test</H1>

<FORM METHOD=GET>

Emer: <INPUT TYPE=TEXT NAME=NAME SIZE=10><BR>

Mbiemer: <INPUT TYPE=TEXT NAME=SURNAME SIZE=30><BR>

Password: <INPUT TYPE=PASSWORD NAME=PASS SIZE=8><BR>

<HR>

Gjinia: <BR>

<INPUT TYPE="RADIO" NAME="Gender">Mashkull

<INPUT TYPE="RADIO" NAME="SEXO">Femer

<BR>

Hobi:<BR>

<INPUT TYPE="CHECKBOX" NAME="SPORT">Sporti

<INPUT TYPE="CHECKBOX" NAME="MUSICA">Muzika

<INPUT TYPE="CHECKBOX" NAME="LECTURA">Leximi <BR>

Origjina:<BR>

<SELECT name="ORIGIN">

<option> Albania

<option> Antarctica

<option> America

<option> Asia

<option> Europe

<option> Oceania

</SELECT>

<HR>

Ku do te doje te udhetoje:<BR>

<SELECT name="destination" MULTIPLE SIZE=4>

<option> Albania

<option> Antarctica

<option> America

<option> Asia

<option> Europe

<option> Oceania

</SELECT>

<BR>

Oninioni juaj:

<BR>

<TEXTAREA COLS=20 ROWS=6 NAME="YOUR OPINION">

Shkruani atë qe mendoni!

</TEXTAREA>

<HR>

<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

</FORM>

</BODY>

</HTML>

BUTONAT

Butonat perdoren ne rastet me te shpeshta per te derguar te dhenat e nje forme, si dhe nganjehere per te pastruar te dhenat nga nje forme. Ju mund te krijoni butona ne tre menyra:

• Duke perdorur elementin <input> me atributin type vlera e te cilit eshte submit,reset ose button

• Duke perdorur elementin <input> me atributin type vlera e te cilit eshte image

• Duke perdorur elementin <button>.

Me secilen menyre butoni do te kete nje paraqitje te ndryshme.

Krijimi i butonit duke perdorur elementin <input>

Kur ju perdorni elementin <input> per te krijuar nje buton, tipi I butonit qe ju krijoni specifikohet ne atributin type. Atributi type mund te marre vlerat e meposhtme per te krijuar butonin:

• Submit, I cili krijon nje buton qe dergon te dhenat e formes

• Reset, I cili krijon nje buton qe ne menyre automatike ben boshatisjen e kontrolleve te formes nga vlerat tyre inicializuese qe plotesohen gjate shkarkimit te faqes.

• Button, i cili krijon nje buton qe perdoret per te staruar nje script te anes klient kur perdoruesi klikon mbi nje buton.

Shembulli yne rreth kontrollit te inputit per password eshte nje shembull I qarte I perdorimit te inputeve butna. Marrim nje shembull te dyte per te perforcuar me shume njohurite e marra.

Tabela e meposhtme tregon atributet e perdorur prej buttonave.

PERDORIMI I IMAZHEVE PER BUTONA

Ju mund te perdorni nje imazh per nje buton me mire sesa te perdorni nje buton standart qe browser ofron per ju. Krijimi i nje butoni imazh eshte i ngjashem me krijimin e cdo lloj butoni porse ne atributin type ka si vlere nje imazh:

<input type=”image” src=”submit.jpg” alt=”submit” name=”btnImage” />

Emertimi I butoni sipas keshillave te melartme eshte perdorimi I parashteses btn dhe emrit qe ju doni si psh btnImazhi . Meqenese ju po krijoni nje buton imazhi ju nevojitet te perdorni disa atribute shtese te cilat listohen me poshte:

Nqs butoni imazh ka nje atribut name, kur ju klikoni mbi te ath browser dergon nje kopje name/value tek ana server.

Krijimi butonave duke perdorur elementin <button>

Elementi <button> eshte nje hyrje e fundit i cili ju lejon juve te specifikoni se cfare do te shfaqet midis tageve hapes <button> dhe atij mbylles</button>. Keshtu qe ju mund te perfshini elemente te imazhit ose te formatimit te teksitit.

Ky element fillimisht u propozua prej IE4 dhe Netscape6, porse edhe browserat e tjere te cilet e suportojne kete element ofrojne nje efekt 3D te tij I cili krijon efektin e levizjes poshte te butonit gjat klikimit dhe levizjes larte te tij gjate leshimit te mausit.

Marrim nje shembull tjeter per te pasur me te qarte konceptin:

Sic mund ta vini re, butoni I pare submit permban vetem text si kontent te tij. Butoni I dyte permban tekst dhe elemente te tjere formatimi te tekstit ndersa butoni I trete permban nje element imazhi<img>.

Ushtrime

1. Ndertoni nje faqe te thjeshte ne te cilen te vendosni dy textbox-e ne te cilat ti kerkoni perdoruesit emrin dhe mbiemrin. Emertojeni faqen revista.html.

   1. Ne faqen revista.html te cilen e krijuat ne ushtrimin e pare, shtoni disa fusha te tjera te cikat duhet ti plotesoje perdoruesi si adresa, qyteti, shteti, kodi zip.

   2. Duke supozuar qe kjo faqe dote shebeje per abonimin ne nje reviste, shtoni nje dropdown list me pese emra revistash te njohura si dhe dy radio buttona me ane te te cilave ne zgjedhim abonim nje vjecar apo dy vjecar.

   3. Shtoni nje teksbox ne te cilin abonuesi te lere komentet e tije.

Faqa do te duhet si me poshte: