Formularët

Formulari formohet me:

<form>

</form>

Atributi method

Përcakton HTTP metodën për dërgimin e të dhënave të formularit në server.

Mund të ketë njërën nga vlerat:

  • GET
  • POST
<form method=”GET”>

</form>

Metoda GET

Kur përdoret metoda GET, të dhënat e plotësuara në fushat e formularit do të shfaqen në address bar të shfletuesit, me çka mund të ekspozohen të dhënat sensitive siç është fjalëkalimi apo numri i kredit kartës.

Meqë të dhënat e formularit formojnë URL, ajo URL ruhet në History, duke u mundësuar të tjerëve t’u qasen të dhënave senzitive më vonë në atë kompjuter.

Me metodën GET nuk mund të dërgohet sasi e madhe e informatave, për shkak të kufizimit të gjatësisë së tekstit që mund të përmbajë address bar (rreth 2000 karaktere).

Metoda POST

Kur të dhënat dërgohen me metodën POST:

  • Të dhënat nuk ekspozohen në URL
  • Sasia e të dhënave të dërguara janë të limituara vetëm nga serveri
  • Mund të dërgohen fajlla

Atributi action

Atributi action specifikon URL-në e skriptës e cila do t’i pranojë të dhënat e formularit për procesim të mëtejmë nga ana e serverit.

Duhet të jetë URL e skriptës që ekzekutohet nga ana e serverit, p.sh. në PHP, Python, Java, etj.

<form method=”GET” action=”regjistrimi.php”>
</form>

Atributi enctype

Atributi enctype përcakton tipin e enkodimit të të dhënave gjatë dërgimit në server. Vlera standarde është application/x-www-form-urlencoded.

Atributi enctype duhet ta ketë vlerën multipart/form-data në rastet kur në formular dëshirojmë të vendosim fusha të tipit file, respektivisht fusha për dërgimin e fajllave.

Me vlerën text/plain bëhet dërgimi vetëm i tekstit, por jo edhe i karaktereve speciale. Space zëvendësohet me plus (+).

<form method=”GET” action=”regjistrimi.php” enctype="multipart/form-data" >
</form>

Atributi novalidate

Atributi novalidate përdoret kur nuk dëshirojmë që të kryhet validimi (kontrollimi i vlerave) i fushave të formularit.
Kjo do të thotë se do të injorohen atributet e fushave që bëjnë kufizime të çfarëdo lloji:

  • required
  • min
  • max
  • minlength
  • maxlength
  • pattern, etj.

Atributi autocomplete

Ky atribut përcakton nëse vlerat e një fushe duhet të ruhen në shfletues, për përzgjedhje të vlerave më vonë nga një listë e vlerave të plotësuara paraprakisht.

autocomplete=”on”

Aktivizimi i autocomplete me vlerën on, mundëson ruajtjen e vlerave të plotësuara të tipeve: text, search, url, tel, email, password, fushat për data, range, dhe color.

input

Elementi <input> është elementi më i përdorur brenda një formulari.

Ndahet në shumë tipe:

  • text
  • email
  • password
  • url
  • tel
  • search
  • number
  • range
  • color
  • month
  • week
  • date
  • time
  • datetime-local
  • submit
  • reset
  • file
  • image
  • hidden
  • button
  • radio
  • checkbox

Atributet e përgjithshme

Një numër atributesh janë të aplikueshme në një numër të madh të tipeve të fushave.

Disa atribute janë të aplikueshme vetëm te tipet e caktuara të fushave.

  • accesskey
  • autocomplete
  • autofocus
  • dirname
  • disabled
  • form
  • list
  • max
  • maxlength
  • min
  • minlength
  • name
  • pattern
  • placeholder
  • readonly
  • required
  • size
  • step
  • tabindex
  • type
  • value

Atributet

accesskey

Mundëson caktimin e një karakteri me të cilin do të selektohet nga tastiera një fushë. Në varësi prej shfletuesit, përdoren kombinime të ndryshme në tastierë.

P.sh. nëse kemi shënuar accesskey=a:

  • Në Chrome shtypim: Alt + a në Windows dhe Linux, Control +Option +a në Mac.
  • Në Firefox: Alt +Shift +a në Windows dhe Linux, ndërsa më Mac është Control + Option +a.
  • Në Edge: Alt + Shift +a ose Alt +a në Windows.

autocomplete

Cakton nëse fusha e caktuar do të mund të plotësohet nga shfletuesi me vlera që janë ruajtur më heret gjatë plotësimit të formularëve të tjerë.

autofocus

Fusha që e ka atributin autofocus do të fokusohet sapo të hapet faqja, respektivisht kursori do të vendoset brenda asaj fushe.

dirname

Përveç vlerës së shënuar në fushë, dërgon kahjen e shkrimit të tekstit, ltr – left-to-right, ose rtl – right-to-left.

Si vlerë e këtij atributi, përdoret vlera e atributit name dhe i shtohet prapashtesa ‘.dir’.

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" dirname="fname.dir">
  <input type="submit" value="Submit">
</form>

Kur klikohet butoni i dërgimit, vlerat që dërgohen në server janë:

fname=Emri&fname.dir=ltr 

disabled

Fusha me atributin disabled shfaqet në formular por nuk mund të plotësohet. Gjatë dërgimit të formularit, vlera e asaj fushe nuk përfshihet në listën e vlerave të dërguara.

form

Atributi form tregon cilit formular i përket një fushë, nëse atë fushë e kemi vendosur jashtë formularit, apo brenda një formulari tjetër në faqen e njëjtë.

list

Në kombinim me elementin <datalist>, mundëson zgjedhjen e vlerave të parapërcaktuara brenda një fushe të tipit <input>.

max

Vlera maksimale e lejuar për një fushë që pëmban numër.

maxlength

Gjatësia maksimale e lejuar për një fushë <input>.

min

Cakton vlerën më të vogël numerike që mund ta përmbajë një fushë.

minlength

Cakton gjatësinë minimale të tekstit që duhet të shënohet brenda një fushe.

name

Emri i fushës, i domosdoshëm kur formulari dërgohet në server. Mund ta konsiderojmë si emër variabli që dërgohet në server bashkë me vlerën korresponduese.

pattern

Format i paradefinuar konform të të cilit lejohet të futen të dhënat në një fushë. P.sh. numrat e telefonit kanë format të caktuar: prefiksi i shtetit,, prefiksi i operatorit, numri i telefonit. P.sh. për telefonat në Kosovë, mund të përdoret:

pattern="[\+]\d{3}[\(]\d{2}[\)]\d{3}[\-]\d{3}"

për numrat në formatin +999(99)999-999.

placeholder

Tekst që shfaqet brenda fushës që përmban sqarimin se çka duhet të shënohet në atë fushë.

readonly

Fusha mund të lexohet por vlera e caktuar me atributin value nuk mund të ndryshohet. Gjatë dërgimit të formularit, vlera e asaj fushe përfshihet në listën e vlerave të dërguara.

required

Kërkon që fusha të plotësohet së paku me një karakter/numër për të qenë valide për dërgim në server.

size

Përcakton gjerësinë e fushës si numër karakteresh. Në vend të këtij atributi duhet të përdoren CSS vetia width.

step

Tek fushat numerike (input type=’number’ dhe input type=’range’), cakton për sa të rritet/zvogëlohet vlera kur klikohet shigjeta lartë/poshtë (input type=’number’) ose treguesi djathtas/majtas (input type=’range’).

tabindex

Renditja e fushës kur bëjmë kalimin nëpër fusha me tastin Tab.

type

Tipi i fushës (text, email, password…).

value

Vlera fillestare e fushës.

input type=”text”

Tipi text është tipi më bazik i fushave të formularit.
Pranon çfarëdo të dhënash tekstuale.

input type=”email”

Lexon futjen vetëm të email adresave
Validimi kontrollon nëse ekziston shenja @ me një tekst para kësaj shenje dhe një tekst pas kësaj shenje.
Edhe një email adresë pa TLD (.com, .org,…) do të jetë i akseptueshëm, gjë që tregon se validimi nuk është i përkryer, pra ka nevojë të bëhet validim plotësuesh edhe me JavaScript e më pas edhe në server për t’u siguruar që email adresa është e formatit përkatës.

Atributet specifike:

multiple. Me atributin multiple që mund të shenohet si multiple ose multiple=”multiple”, lejohet futja e më tepër se një email adrese. Email adresat duhet të ndahen me presje.

input type=”password”

Është plotësisht identik me tipin text, me atë dallim që karakteret e shënuara i maskon me pikë në mënyrë që fjalëkalimi të mos jetë i dukshëm për personat në afërsi.

Fshehja e karakereve nuk ka të bëjë me sigurinë e të dhënave, por vetëm me shmangien e “spiunimit” me shikim të fjalëkalimit nga të tjerët.

input type=”url”

Lejon futjen e një Web adrese (URL).

Logjika e validimit kontrollon prezencën e :// me tekst para dhe mbrapa, pra p.sh. abc://def, pa verifikuar ekzistencë e TLD.
Për këtë arsye, si Web adresë valide do të konsiderohet një adresë e formateve vijuese:

  • https://.google.com
  • https://www.google.com
  • ftp://google.com

Por jo edhe formatet vijuese:

  • www.google.com
  • google.com

input type=”tel”

Plotësisht identik me tipin text.
Mund të përdoret për verifikimin e formatit të numrit të telefonit nëse shoqërohet me atributin pattern.
Pattern për formatin e numrit të telefonit në Kosovë:

<input type="tel" pattern="[\+]\d{3}[\(]\d{2}[\)]\d{3}[\-]\d{3}">

input type=”search”

Identik me tipin text, me dallim që në anën e djathtë të fushës paraqitet një shenjë x kur kemi shënuar diçka në fushë.

Shenja x shërben për fshirjen e përmbajtjen e fushës.

Implementimi nuk është konsistent nëpër shfletues, sepse në Firefox nuk është fare i implementuar.

Në përgjithësi do të hasim diferenca në implementim (në funksionalitet dhe dizajn) të tipeve të reja të fushave që janë prezantuar me HTML5.

input type=”number”

Ky tip i fushës lejon futjen vetëm të vlerave numerike.
Ka edhe treguesit lartë dhe poshtë që mundësojnë rritjen/zvogëlimin e vlerës së numrit me maus.

Mund t’i përdorim atributet:

  • value për caktimin e vlerës fillestare.
  • min për caktimin e vlerës minimale të lejuar,
  • max për caktimin e vlerës maksimale të lejuar,
  • step për ta caktuar për sa rritet/zvogëlohet numri kur klikohen treguesit,

input type=”range”

Lejon zgjedhjen e një vlere nga një diapazon vlerash duke e zhvendosur një tregues djathtas-majtas përgjatë boshtit horizontal me maus apo me shigjetat djathtë/majtë.

Shfletuesi nuk e shfaq vlerën aktuale, me përjashtim të Internet Explorer. Shfletuesit e ndryshëm e shfaqin me dizajne të ndryshme.

Mund t’i përdorim atributet:

  • value për caktimin e vlerës fillestare.
  • min për caktimin e vlerës minimale të lejuar,
  • max për caktimin e vlerës maksimale të lejuar,
  • step për ta caktuar për sa rritet/zvogëlohet numri kur klikohen treguesit,

input type=”color”

Mundëson përzgjedhjen e ngjyrës nga paleta e ofruar e ngjyrave.

Gjatë dërgimit të të dhënave në server, ky tip i fushës dërgon kodin heksadecimal të ngjyrës:
ngjyra=%230000ff që është ekuivalent me #0000ff.

Për ta kufizuar paletën e ngjyrave, përdoret datalist ku definohen ngjyrat e lejuara. Elementi <datalist> në kombinim me <input type="color"> nuk funksionon në Firefox.

<form method="post" action="porosite.php">
  <input type="color" name="ngjyra" list="paleta">
  <input type="submit">
</form>

Kuq Gjelbërt Kaltërt

input type=”month”

Mundëson përzgjedhjen e muajit dhe vitit.
Vlera dërgohet në formatin viti-muaji, p.sh. muaji=2020-04
Shfletuesit ofrojnë implementime të ndryshme. Firefox nuk e implementon.

input type=”week”

Mundëson përzgjedhjen e javës dhe vitit.
Java paraqitet si vlerë prej 1 deri 53.
Vlera dërgohet në formatin viti-java, p.sh. java=2020-W15
Shfletuesit ofrojnë implementime të ndryshme. Firefox nuk e implementon.

input type=”date”

Mundëson përzgjedhjen e datës.
Vlera dërgohet në formatin viti-muaji-dita, p.sh. data=2020-05-20.
Shfletuesit ofrojnë implementime të ndryshme.

input type=”time”

Mundëson përzgjedhjen e kohës.
Vlera dërgohet në formatin ora-minutat, p.sh. ora=22%3A11.
Shfletuesit ofrojnë implementime të ndryshme.

input type=”datetime-local”

Mundëson përzgjedhjen e datës dhe orës njëkohësisht.
Vlera dërgohet në formatin viti-muaji-ditaTora=minutat, p.sh. dataora=2020-06-16T02%3A01.
Shfletuesit ofrojnë implementime të ndryshme. Firefox nuk e implementon.

input type=”submit”

Kjo nuk është fushë për ta plotësuar me të dhëna, por është buton me shtypjen e të cilit bëhet dërgimi i të dhënave të formularit për procesim, qoftë lokalisht me JavaScript, qoftë në server.

Në atributin value shënohet teksti i cili do të shfaqet në buton.

<input type="submit" value="DËRGO">

Përveç atributeve standarde, tipi submit ka edhe këto atribute specifike:

formaction. Përcakton cila URL të thirret kur klikohet butoni, nëse dëshirojmë që ajo URL të jetë ndryshe nga URL-ja në atributin action të elementit form.

formenctype. Përcakton mënyrën e enkodimit të të dhënave, nëse dëshirojmë që ajo të jetë ndryshe nga vlera e atributit enctype të elementit form.

formmethod. Përcakton HTTP metodën për dërgimin e të dhënave, nëse dëshirojmë që metoda të jetë ndryshe nga vlera e atributit method të elementit form.

formnovalidate. E shënojmë nëse dëshirojmë që të mos kryhet validimi i të dhënave të formularit, që në nivel të formularit bëhet me atributin novalidate.

formtarget. Caktohet nëse pas klikimit do të vazhdohet në tab-in e njëjtë apo në tab të ri të shfletuesit.

<input type="submit" formaction="dergimi.php" formenctype="multipart/form-data" formmethod="formmethod" formnovalidate formtarget="_blank" value="DËRGO">

input type=”image”

Përdoret për qëllim të njëjtë sikur tipi submit, me dallim që si pamje të butonit mund ta përdorim një imazh.
Përdor atributet e njëjta sikur tipi submit, dhe i ka edhe këto atribute specifike:

  • alt – Tekst alternativ nëse imazhi nuk shfaqet në shfletues
  • height – lartësia e imazhit
  • width – gjerësia e imazhit
  • src – lokacioni dhe emri i fajllit të imazhit
<input type="image" src="send.png" width="300" height="138" alt="SEND">

input type=”reset”

Edhe ky tip është buton dhe shërben për vendosjen e vlerave fillestare nëpër fushat e formularit, që në fushat pa atributin value nënkupton fshirjen e përmbajtjes së fushës.

input type=”file”

Buton që mundëson selektimin e një apo më tepër fajllave për dërgim bashkë me formularin.

Atributet specifike:

  • accept – Me këtë atribut përcaktohen cilat tipe të fajllave janë të lejuar për selektim.
  • accept=”image/*”
  • accept=”audio/*”
  • accept=”video/*”
  • accept=”application/pdf”
  • accept=”image/png”

multiple – Me shënimin e atributit multiple mundësohet përzgjedhja e njëkohshme e më tepër se një fajlli.

input type=”hidden”

Fusha e tipit input ka për qëllim që ta ruajë një vlerë që do t’ia dërgojë serverit por të mos e shfaqë në faqe.
Mund të përdoret nga Web aplikacionet të cilat vendosin të dhëna në formular për nevoja të procesimit të të dhënave më pas në server, siç është p.sh. ID-ja e një produkti.

input type=”button”

Tip fushe që shfaqet si buton.

Butoni nuk kryen asnjë funksion pa e lidhur me ndonjë kod në JavaScript me atributin onClick.

<input type="button" value="KALKULO" onClick="alert(5+9)">

input type=”radio”

Fushat e tipit radio mundësojn zgjedhjen e vetëm një vlere nga disa opcione të ofruara.

Secili opcion është input element në vete, ndërsa atributi name i tyre duhet të jetë i njëjtë për të funksionuar përjashtimi i zgjedhjeve të tjera.

Njërën prej fushave e bëjmë ta ketë atributin checked, që e shfaq atë opcion si të zgjedhur.

Me atributin value mund të definohet vlera që dërgohet në server kur zgjedhet fusha e klikuar.

<label for="male">M<input type="radio" name="gender" id="male" checked></label>
<label for="male">F<input type="radio" name="gender" id="female"></label>

input type=”checkbox”

Fushat e tipit checkbox për doren në rastet kur përdoruesi duhet t’i përgjigjet një pyetjeje duke klikuar në atë fushë.
Paraqitet si një katror brenda të cilit paraqitet një x kur klikohet në të.

Karakteristikë e këtij tipi është se nëse vizitori nuk e ka klikuar, kjo fushë fare nuk do të figurojë në listën e vlerave që nga formulari dërgohen në server.

Nëse është klikuar, dërgohet vlera “on”, nëse ndryshe nuk e kemi specifikuar me atributin value.

Nëse dëshirojmë të shfaqet si opcion i zgjedhur, e shtojmë atributin checked.

<label for="accepted">A i pranoni kushtet?
<input type="checkbox" name="accepted" id="accepted"></label>

textarea

Elementi <textarea> përdoret në rastet kur dëshirojmë që fusha të shtrihet në disa rreshta, siç është rasti kur kërkojmë nga përdoruesi të shënojë një koment apo tekst tjetër të gjatë.

Pra, është element në vete, jo tip i elementit input.

Për dallim nga elementi input që është tag vetëmbyllës, <textarea> mbyllet me </textarea>.
Nuk e ka atributin value, ndërsa vlera fillestare shënohet ndërmjet <textarea> dhe </textarea>, ku preferohet që mos të ketë kurrfarë zbrazëtie pas <textarea> apo para </textarea>.

Atribut specifik është rows, tek i cili shënojmë numrin e rreshtave që mund të shkruhen brenda sipërfaqës që e zë ky element.
Me atributon cols caktojmë gjerësinë e <textarea> në numër të karaktereve, p.sh.vlera 60 do të thotë gjerësi sa 60 karaktere.

Atributi wrap cakton mënyrën e thyerjes së tekstit nëpër rreshta. Janë dy vlera: hard dhe soft. Me vlerën soft, teksti nuk do të thyhet në rreshta gjatë dërgimit. Me vlerën hard, bëhet thyerja nëpër rreshta gjatë dërgimit, dhe për këtë është e domosdoshme të shënohet edhe atributi cols për të ditur se në cilën pozitë të shtohet shenja speciale e rreshtit të ri (newlines).

button

Pothuajse identik me input type=”button”, me këto dallime:

  • Mund të përdoret për dërgimin/resetimin e formularit
  • Ka tag mbyllës </button>
  • Ndërmjet <button>dhe </button> mund të vendoset tekst apo imazh.

Atributi type mund t’i ketë këto vlera:

  • submit – me ç’rast vepron njëjtë si input type=”submit”
  • reset – me ç’rast vepron njëjtë si input type=”reset”
  • button – me ç’rast vepron njëjtë si input type=”button”, d.m.th. nuk kryen asnjë veprim nëse nuk e asocojmë klikimin e tij me thirrjen e një JavaScript funksioni.
<button id="btn1" type="button" onclick="kontrollimi()">
<img src="check.png"></button>
<button id="btn2" type="submit">DËRGO</button>
<button id="btn3" type="reset">FSHIJ</button>

select

Elementi <select> mundëson zgjedhjen e një vlere nga një listë e paradefinuar e opcioneve.

Përdoret kur kemi lista definitive të opcioneve, për shembull: lista e ditëve të javës, lista e muajve të vitit, lista e qyteteve të një shteti, etj.

Mund të selektohet vetëm një opcion nga lista, përveç kur përdoret edhe atributi multiple me ç’rast lejohet zgjedhja e më shumë opcioneve duke e mbajtur të shtypur tastin Control ose Shift.

option

Secili nga opcionet e select formohet me elementin <option>.

Nëse elementit option ia shtojmë atributin selected, atëherë ai opcion do të jetë fillimisht i zgjedhur kur hapet formulari.

Atributi selected i jepet vetëm një opcioni.

Nëse atributi selected nuk i është dhënë asnjë opcioni, atëherë opcioni i parë do të paraqitet i selektuar.

Te elementi <option>, atributivalue përmban vlerën qo do t’i dërgohet serverit, ndërsa teksti ndërmjet <option> dhe </option> shërben vetëm për t’iu shfaqur vizitorit.

Te opcionin që dëshirojmë të mos jetë i selektueshëm, e shtojmë atributin disabled.

optgroup

Opcionet e select mund të grupohen me elementin <optgroup>.

Atributi label i <optgroup> shërben për vendosjen e tekstit që do të shfaqet për atë optgroup.

Elementi <optgroup> shfaqet në listë sikurse elementet <option>, por nuk mund të selektohet.
Kur është përdorur <optgroup>, elementet e saj option do të kenë margjinë nga e majta, pra do të jenë të zhvendosura pak djathtas.

Shembull: <select>, <optgroup> dhe <option>

<select name="muaji" id="muaji">
<optgroup label="Tremujori i parë">
<option value="1">Janar</option>
<option value="2" selected>Shkurt</option>
<option value="3">Mars</option>
</optgroup>
</select>

fieldset

Elementi <fieldset> mundëson që vizualisht të grupohet një numër i fushave, gjegjësisht një pjesë e formularit.

Me atributin legend formohet teksti që duhet të shfaqet në anën e sipërme të majtë të kornizës së shfaqur rreth <fieldset>.

<fieldset>
<legend>Të dhënat personale</legend>
<div class="rreshti">
<label for="emri_dhe_mbiemri">Emri dhe mbiemri: </label>
<input type="text" class="fusha" name="emri_dhe_mbiemri">
</div>
<div class="rreshti">
<label for="datelindja">Datëlindja: </label>
<input type="date" class="fusha" name="datelindja">
</div>
</fieldset>

label

Elementi <label> mundëson të shënohet tekst sqarues para fushës së formularit.

Dallimi i tij me elementet tjera si p apo span është se label mund të klikohet dhe me atë rast fusha korresponduese fokusohet, respektivisht kursori kalon brenda fushës.

Me atributin for përcaktojmë se cila është fusha e tij korresponduese, duke e shënuar si vlerë id-në e fushës korresponduese.
Nëse fushën e vendosim ndërmjet <label> dhe </label>, atëherë nuk ka nevojë të shtohet atributi for.

<label for="emri">Emri dhe mbiemri: </label>
<input type="text" name="emri" id="emri">

Ose

<label>Emri dhe mbiemri:
<input type="text" name="emri" id="emri">
</label>

output

Brenda elemetit output shfaqet p.sh. rezultati i një kalkulimi.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>