HTML5 Hap pas Hapi: Rregullimi i pullave

Përgatiti: Skender Mustafi

HTML5 ka lehtësuar të gjitha veprimet dhe njëkohësisht ka bërë më interaktive ato duke bashkëvepruar shumë fort me CSS. Po ashtu edhe rregullimi i pullave është bërë shumë më i lehtë përmes HTML5. Në këtë mësim do të paraqesim elementet të cilat duhet dhe mund të shfrytëzohen për të rregulluar pullat sipas dëshirës sonë.

Atributet dhe parametrat

Etiketa për vendosjen e pullave është <button></button>. Kjo etiketë për herë të parë është paraqitur tek HTML4.01, megjithatë tek HTML5 janë shtuar edhe shumë atribute të reja të kësaj etikete si autofocus, form, formaction, formenctype, formmethod, formnovalidate, dhe formtarget.

Kështu, paraqitja më e thjeshtë e një pulle statike bëhet përmes kodit: <button>Kliko</button> Ku si rezultat kemi: Kliko .

Megjithatë, siç theksuam edhe më sipër, kjo etiketë mbështetë edhe atribute të cilat ndihmojnë në pasurimin e funksioneve të saja të cilat janë:

• autofocus – përcakton që pulla duhet të jetë e theksuar automatikisht me hapjen e faqes. Mbështet parametrin autofocus dhe shkruhet:  <button autofocus>Kliko</button>. Shembull: Kliko
  
• disabled – përcakton që pulla duhet të jetë e paaftësuar për veprim. Mbështetë parametrin disabled dhe shkruhet: <button disabled> Kliko</button> Shembull: Kliko . Ky veprim është i njohur në situata kur kemi një kusht paraprak për të pranuar ose jo dhe më pas të të pasur mundësi të klikojmë mbi pullë.
• form – përcakton se cilave forma u takon pulla. Siç e dimë pullat më së shumti vendosen nëpër forma, ku brenda një faqeje të vetme mund të kemi më shumë se një formë të cilat kanë pulla. Në këtë rast mund të shkëpusim pullat jashtë formave dhe ato ti vendosim nëpër tekste dhe pastaj t’i lidhim secilën pullë me formën e caktuar. Mbështetë parametrin emri_i_formës dhe shkruhet: <form action=”/shkarko/” method=”get” id=”forma_për_testim”>elementet e formës </form> <button type=”submit” form=”forma_për_testim” value=”Submit”>Kliko</button>. Shembull:
  

  Kliko

• formaction – përcakton destinacionin ku duhet dërguar të dhënat pasi që të klikojmë pullën e furmës së mbushur me informacione si p.sh. emri, mbiemri etj.. Mbështetë parametrin URL dhe  nuk funksionon pa atributin type=”submit” dhe shkruhet: <form><button formaction=”/fjala-ime/blogu/” type=”submit”>Kliko</button>. Shembull:
  
  Kliko
• formenctype – përcakton mënyrën e shifrimit të të dhënave të formës para se ato të dërgohen në server. Ky atribut funksionon vetëm në bashkëveprim me atributin type=”submit” të kësaj etikete. Mbështetë parametrat: application/x-www-form-urlencoded (të gjitha karakteret shifrohen para se të dërgohen), multipart/form-data (asnjë karakter nuk shifrohet) ose text/plain (hapësirat shndërrohen në shenja +, por asnjë karakter nuk shifrohet). Nëse asnjë nga parametrat nuk përcaktohet, atëherë automatikisht etiketa merr parametrin application/x-www-form-urlencoded.  Shkruhet: <button type=”submit” >Shto të dhënat e shifruara </button> ose <button type=”submit” formenctype=”text/plain”>Shto të dhënat e pa shifruara</button>
• formmethod – përcakton cila HTTP metodë të shfrytëzohet për të dërguar të dhënat e formës dhe nuk funksionon pa atributin type=”submit”. Mbështetë parametrat get (i shton të dhënat e formës tek  URL: URL?name=value&name=value) dhe post (dërgon të dhënat e formës si një HTTP postim). Shkruhet si vijon:  <button type=”submit” formmethod=”post”>Kliko</button>
• formnovalidate – përcakton kushtin që forma duhet të vërtetohet gjatë dërgimit të të dhënave. Pranon parametrin formvovalidate dhe vepron vetëm së bashku me atributin type=”submit”. Shkruhet si vijon: <button type=”submit” formnovalidate>Kliko</button>. Shembull: Nëse keni një fushë ku duhet të shtoni postën elektronike dhe për të shtuar atë tek pulla keni këtë atribut, atëherë atributi bën që posta të mos kontrollohet nëse është shkruar në rregull, por vetëm e pranon shënimin si të tillë pa e verifikuar fare.
• formtarget – përcakton vendin e paraqitjes së përgjigjes pas shtypjes së pullës. Pranon parametrat _blank (në dritare/faqe të re), _self (në të njëjtën kornizë), _parent (tek korniza kryesore), _top (në tërë trupin e dritares), dhe emri_i_kornizës (tek korniza e emëruar). Shkruhet si vijon: <button type=”submit” formtarget=”_blank”>Kliko</button>
• name – specifikon emrin e pullës. Mbështetë parametrin name dhe shkruhet si vijon: name=”tema”. Shembull i dy pullave brenda një forme: <button name=”tema” type=”submit” value=”HTML”>HTML</button> <button name=”tema” type=”submit” value=”CSS”>CSS</button>.
• type – përcakton llojin e pullë që mund të jetë me parametër button, reset ose submit. Shkruhet si vijon: type=”submit”.
• value – përcakton vlerën fillestare të pullës dhe pranon si parametër ndonjë tekst të caktuar pa hapësira shembull: <button type=”submit” value=”fav_HTML”>HTML</button>

Stilizimi i pullave

Në foton e paraqitur djathtas shohim një pullë të thjeshtë pa rregullime shtesë dhe mënyrën se si ajo pullë paraqitet tek shfletuesit e ndryshëm të internetit. Pra, duke marrë parasysh se secili shfletues ka “ligjet”  e veta dhe organizon elementet në “stilin” e vetë, atëherë ne duhet ndërmarrë masa që të normalizojmë pamjen e pullave tona.

Përmes përdorimit të CSS stileve ne mund të arrijmë të rregullojmë pullat që ato të duken të bukura dhe të kenë pamje të ngjashme në të gjithë shfletuesit.

Më poshtë do të paraqesim disa shembuj të pullave të stilizuara

Atributi onclick

Nga atributet shumë të rëndësishme për pullat është dhe onclick. Ky atribut mund të lidhet me funksione të ndryshme të cilat mund të programohen me JavaScript.

Shihe funksionin çka jep si rezultat

Kodi i shfrytëzuar për të realizuar pullën e mësipërme është:

<script type="text/javascript">// <![CDATA[
function funksioni()
{
document.getElementById("shembull").innerHTML="Ne shpresojmë që ju keni arritur të mësoni diç nga ky artikull i shkruar me aq pasion e mumdim.";
}
// ]]></script>

<button style=”padding: 10px 15px; background: #2E5481; color: #fff;” onclick=”funksioni()”>Shihe funksionin çka jep si rezultat</button>

<p id=”shembull”></p>

Në mënyrë të ngjashme mund të realizoni dhe kode tjera të ndryshme që u mundësojnë realizimin e funksioneve interaktive përmes pullave.