Obrazci se definirajo prek elementa form. Vsi elementi znotraj elementa form pripadajo temu obrazcu.
<form> … </form>
V uvodnem <form> se pričakuje atribut action. S tem se končno določi, kaj naj se zgodi z obrazčnimi podatki. Običajno gre za PHP aplikacijo.
<form method="post" action="form.php"> … </form>
Pazite, da se navedena datoteka dejansko najde. Torej morate nastaviti pravo pot.
Namesto skripta lahko navedete tudi e-poštni naslov.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
V tem primeru se obrazčni podatki pošljejo prek e-pošte. To ni ravno elegantno, zato se skorajda vedno zateče k skriptni možnosti. Če pa v tem trenutku nimate skripta pri roki, lahko po potrebi obrazec pošljete tudi po e-pošti.
Še en pomemben atribut za element form je method. Prek tega določite HTTP prenosno metodo za pošiljanje vsebine obrazca. Na voljo sta dve različni varianti.
• post = Obrazčni podatki se tukaj pošiljajo v dveh korakih na naveden naslov. Najprej brskalnik kontaktira naveden naslov. Če to uspe, se obrazčni podatki posredujejo skriptu.
• get = Pri tej metodi se obrazčni podatki dodajo na konec URL, ki je bil dodeljen atributu action. Obrazčni podatki so zato vidni med drugim tudi v naslovni vrstici brskalnika.
Seveda se pojavi vprašanje, katero od teh dveh variant naj izberete za pošiljanje obrazčnih podatkov. Načeloma lahko uporabite obe. Zlasti pri velikih količinah podatkov in nalaganju datotek na strežnik se vendarle priporoča uporaba post.
Enostavna polja obrazca
Do zdaj smo definirali le zunanjo strukturo obrazca. V brskalniku dejansko še ni videti obrazca samega.
<form method="post" action="form.php"> … </form>
Zdaj je treba obrazec napolniti z vsebino.
Najbolj pogosto uporabljen tip polja je enovrstično polje za vnos. Uporabljamo ga npr. za vpis imen, priimkov ali e-poštnih naslovov. Eno-vrstična polja za vnos se definirajo takole:
<input type="text" name="vorname" />
Elementu input je dodeljena kombinacija atributa in vrednosti type="text". Vsakemu polju za vnos morate dati interno oznako. Ta oznaka mora biti enolična v dokumentu. Še posebej zanimiva je, kadar gre za obdelavo obrazčnih podatkov s skripti. Pri oznaki ne uporabljajte presledkov ali posebnih znakov.
Ko si rezultat ogledate v brskalniku, dobite naslednjo sliko:
Vizualno se to še ne zdi posebej spektakularno. Če pa kliknete v besedilno polje, boste ugotovili, da že lahko vnašate podatke.
Seveda manjka še oznaka, kaj naj obiskovalci vpišejo v polje.
Ime: <input type="text" name="vorname" />
Tudi tukaj si z ogledom v brskalniku zagotovite želeni rezultat.
Z atributom size lahko določite širino polja.
Ime: <input type="text" name="vorname" size="30" /> <br /> Poštna številka: <input type="text" name="plz" size="5" />
Atributu size dodelite želeno širino polja.
Število 5 ustreza natanko petim znakom. V tem kontekstu je zanimiv tudi atribut maxlength. Ta določa največje dovoljeno število znakov, ki se lahko vnesejo v polje. Tukaj je še en primer:
Ime: <input type="text" name="vorname" size="30" maxlength="40" />
Če vrednost, določena pri maxlength, presega vrednost pri size, se pri daljših vnosih samodejno pojavi drsenje po polju.
Z atributom value lahko dosežete privzeto vrednost v polju.
Ime: <input type="text" name="ime" value="Tvoje ime" />
Vrednost določena za value je videti kot privzeta vrednost polja.
Uporabniki lahko izbrišejo to privzeto vrednost.
Zanimivo je, da lahko preprečite brisanje vrednosti iz polj. S tem se določi vnosno polje, ki v bistvu ni več vnosno polje. Takšna polja se pogosto uporabljajo za izhode. Na primer, lahko je zanimivo uporabiti periferni opomnik, da prikažete z vrtljivi skript črne vrednosti. Mogoče pa je tudi ročno nastaviti polje z besedilom, ki ga obiskovalci ne morejo več spreminjati. (Opomba: V PDF-pogledu znak evra žal ni pravilno prikazan).
<input name="cena" type="text" value="€ 699.-" readonly />
Za nastavitev polja na samo za branje dodelite atributu readonly. Tudi tukaj si oglejte rezultate:
Privzeto besedilo je takoj vidno. Vendar to besedilo ni mogoče izbrisati.
Definiranje polj za gesla
Seveda poznate polja za gesla. Vsepovsod, kjer se registrirate, morate navesti geslo. (Navadno ga morate celo vnesti dvakrat).
Vneseni podatki v polje niso vidni, temveč jih brskalnik samodejno nadomesti z zvezdicami/pikami. Prednost te različice: osebe, ki bi morda videle vaše geslo med vnašanjem, ga ne morejo dešifrirati. Vendar je zmotno prepričanje, da so polja za geslo samodejno varna. Dejansko se gesla v običajnem protokolu HTTP prenesejo v čisti obliki ob oddaji obrazca.
Polja za geslo se definirajo takole:
<input type="password" name="geslo" />
Atributu type je dodeljena vrednost password. Tudi tukaj si oglejte rezultate.
Ko karkoli vpišete, brskalniki med vnašanjem takoj naredijo nevidno.
