Spletni obrazci

Obrazce na spletnih straneh uporabljamo za interakcijo z uporabniki.

Primer takšnega obrazca je recimo prijavni obrazec, ki vsebuje vnosno polje za uporabniško ime, vnosno polje za geslo ter gumb za prijavo.

V tem poglavju se bomo naučili, kako na spletno stran dodamo obrazec, ki vnešene podatke iz vnosnih polj pošlje našemu PHP programu.

Elemente obrazca pišemo med znački <form> in </form>. Lastnosti obrazca pa znotraj značke <form> določimo z dvema dodatnima atributoma.

Z atributom action nastavimo, na kateri spletni naslov se bodo vnešeni podatki poslali ob pritisku gumba. Če tega atributa ne navedemo ali pustimo praznega, se bodo podatki poslali istemu PHP programu (skripti), znotraj katerega se nahaja obrazec.

Z atributom method izberemo metodo, preko katere bomo poslali podatke našemu PHP programu. Tukaj imamo na voljo metodo GET, ki pošlje podatke kot del spletnega naslova URL, in metodo POST, ki pošlje podatke kot del HTTP headerja (kar je nevidno za uporabnika).

Poglejmo si vse navedeno v praksi...

Osnovni elementi obrazcev

Osnovnim elementom obrazcev rečemo tudi polja (ang. fields). Primer je recimo vnosno polje (ang. input field) za vnos uporabniškega imena.

Vnosna polja vstavljamo z značko <input>, ki ji določimo atribute type (vrsta vnosnega polja), name (preko imena vnosnega polja bomo s PHPjem kasneje dostopali do poslane vrednosti elementa) ter value (morebitna vnaprej določena vrednost pri nekaterih elementih).

Da si boste kodo spletnega obrazca lažje predstavljali, si najprej poglejmo zelo osnoven primer:

<form action="prijava.php" method="POST">
   Uporabniško ime: <input type="text" name="ime" /><br />
   Geslo: <input type="password" name="geslo" /><br />
   <input type="submit" value="Klik za prijavo!" />
</form>

Seznam najbolj osnovnih elementov spletnih obrazcev:

• Vnosno polje za besedilo: type="text"
  Dodatni atributi: size (širina polja v znakih), maxlength (največja dovoljena dolžina vnešenega besedila)
• Vnosno polje za geslo: type="password"
  Ima podobno funkcijo kot navadno vnosno polje za besedilo, le da je prikazano besedilo "zamaskirano" z zvezdicami. Ob oddaji obrazca pa se vsebina tega polja na strežnik pošlje kot navadno besedilo.
• Kljukica: type="checkbox"
  Vrednost tega polja se na strežnik pošlje le, če je okence obkljukano.
  Dodatni atributi: checked="checked" (okence je že obkljukano)
• Izbira: type="radio" (večim različnim možnostim damo isto ime name, tako da lahko posledično uporabnik izbere samo eno od ponujenih možnosti)
  Dodatni atributi: checked="checked" (možnost je že izbrana)
• Skrito polje: type="hidden"
  Ima podobno funkcijo kot navadno vnosno polje, le da je nevidno in da ga uporabnik ne more spreminjati.
• Polje za nalaganje datoteke¹: type="file"
• Gumb za pošiljanje obrazca: type="submit" (napis na gumbu določimo z atributom value)
• Slika, ki službi kot gumb za pošiljanje obrazca: type="image" (pot do slike določimo z atributom src)
• Gumb, ki ponastavi vsebino vseh elementov v obrazcu: type="reset"
• Gumb za druge namene (ne pošlje obrazca): type="button"

Napredni elementi spletnih obrazcev

• Spustni menu s seznamom možnosti:
  
  Med značkama <select> in </select> navedemo posamezne možne izbire. Vsako izbiro navedemo med značkama <option> in </option>.
  
  Če želimo razlikovati med prikazano in poslano vrednostjo, lahko pri izbirah uporabimo atribut value. Privzeto bo v brskalniku uporabnika izbrana ter prikazana prva možnost, lahko pa z opcijskim atributom selected="selected" vnaprej izberemo tudi neko drugo izbiro.
  
  Primer:

  <select name="mesec">>
     <option value="1">januar</option>
     <option value="2">februar</option>
     <option value="3">marec</option>
     <option value="4" selected="selected">april</option>
     <option value="5">maj</option>
     <option value="6">junij</option>
     /* uporabniku smo vnaprej izbrali mesec april, ki na strežnik
        kot spremenljivko $_POST['mesec'] pošlje vrednost 4 */
  </select>

  Zgornja koda uporabniku prikaže takšno vnosno polje: januar februar marec april maj junij
  
  
• Vnosno polje za vnos daljšega besedila:
  
  Morebitno vnaprej pripravljeno besedilo zapišemo med znački <textarea> in </textarea>. Ime vnosnega polja določimo z atributom name. Širino okenca za vnos besedila določimo z atributom cols (ang. columns, stolpci), višino okenca pa z atributom rows (vrstice).
  
  Primer:

  <textarea name="opis_izkusnje" cols="60" rows="3">
     Tukaj vnesite svojo izkušnjo s tečajem programiranja.
  </textarea>

  Koda iz primera uporabniku prikaže naslednje vnosno polje:
  Tukaj vnesite svojo izkušnjo s tečajem programiranja.
  

Varnost:

Omeniti velja, da lahko uporabniki naše navedene omejitve (recimo za največjo dovoljeno dolžino niza) relativno enostavno obidejo. Zato morate vedno podatke, ki jih vaš PHP program prejme od uporabnikov, obravnavati kot potencialno nevarne.

Ko recimo vaš PHP program prejme spremenljivko $_POST['ime'], uporabite funkcijo substr(), da boste z gotovostjo lahko vedeli, da je ime zares krajše od recimo 40 znakov.

Primer kode, ki uporabniško ime skrajša na največ 40 znakov:

$prejeto_ime = substr($_POST['ime'], 0, 40);

Pri prejetem uporabniškem imenu je smiselno z začetka ter konca niza odstraniti morebitne presledke in podobne "whitespace" znake. Prav tako je iz uporabniškega imena pametno odstraniti morebitno HTML kodo, ki jo je mogoče vnesel uporabnik.

Primer kode za previdno obdelavo prejetega uporabniškega imena:

$ime = $_POST['ime'];         // prejeto uporabniško ime iz obrazca
$ime = trim($ime);            // odstranimo presledke ter ostale nevidne znake
$ime = strip_tags($ime);      // odstranimo morebitno HTML kodo
$ime = substr($ime, 0, 40);   // ime skrajšamo na največ 40 znakov dolžine

/* spremenljivka $ime je zdaj relativno varna
   za nadaljno obdelavo v vaši programski kodi */

Tudi pri uporabi spustnega menuja se lahko zgodi, da vam zlonamerni uporabnik preko spletnega obrazca pošlje vrednost, ki je ne vsebuje nobena od vaših možnosti. V primeru našega spustnega menuja s seznamom mesecev nam lahko uporabnik namesto pričakovane številke med 1 in 12 pošlje npr. niz "nepričakovano". Če bomo poskusili takšen niz shraniti v podatkovno bazo na mesto, ki je predvideno za števila, bo naš program naletel na napako.

Zato v svojem PHP programu veljavnost prejete izbire iz spustnega menuja vedno preverite z uporabo dodatne kode, kot smo to naredili na primeru uporabniškega imena zgoraj. Ustreznost prejete vrednosti lahko preverite npr. s pogojnim stavkom switch, preden prejeto vrednost obdelujete naprej.




V naslednjem poglavju pa izveste, kako preberemo podatke, ki nam jih preko spletnega obrazca pošljejo naši uporabniki... in na kaj moramo pri tem paziti. :)

Prejšnje poglavje
Zanke