Obrazci

 

1. Obrazec v HTML opišemo z elementom <form>. Med njegove najpomembnejše lastnosti spadajo method, ki določa način prenosa podatkov do strežnika (možni vrednosti sta get in post), enctype določa način kodiranja podatkov, action pa naslov programa (spletne strani), ki bo obdelal v obrazec vnešene podatke.

 

<form method="..." enctype="... " action="...">

...

</form>

 

 

 

 

Primer obrazca

 

Primer najdete tukaj.

 

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: ime=Milan&priimek=Ojsteršek&poslji=Pošlji

Polja za vnos besedila in gesla

 

1. Pri sestavljanju obrazca imamo na voljo različna polja, ki jih lahko uporabimo. Če želimo vrednost polja po kliku na gumb prenesti na strežnik, moramo polje poimenovati (ime določimo z lastnostjo name).

 

1. Polje za vnos kratkega besedila: to je najbolj pogosto polje v obrazcih. Namenjenu je vnosu kratkega (enovrstičnega) besedila. Z lastnostjo size lahko določimo širino polja v znakih, z lastnostjo maxlength pa omejimo število znakov, ki jih lahko vpišemo v to polje. Lastnost value določa začetno vrednost polja (besedilo, ki je že na začetku vpisano v to polje).  Sintaksa za polje za vnos kratkega besedila je naslednja:

 

            <input type="text" name="..." size="..." maxlength="..." value="...">

 

 

1. Polje za vnos gesla: to polje je zelo podobno polju za vnos kratkega besedila, edina razlika je, da znakov, ki jih vnašamo, ne vidimo (namesto njih se prikazujejo zvezdice ali krogci, odvisno od operacijskega sistema). Sintaksa za polje za vnos gesla je naslednja:

 

            <input type="password" name="..." size="..." maxlength="..." value="...">

 

Primer najdete tukaj.

 

 

 

 

Polje za vnos daljšega besedila

 

1. Polje za vnos daljšega besedila: to polje uporabljamo za vnos daljšega (večvrstičnega) besedila. Z lastnostma rows in cols določimo velikost polja (število vrstic in stolpcev v znakih). Besedilo, ki bi ga želeli imeti v polju že na začetku, vpišemo kot vsebino elementa <textarea> Sintaksa za polje za vnos daljšega besedila je naslednja:       

            <textarea name="..." rows="..." cols="...">

            ...

            </textarea>

 

Primer najdete tukaj.

 

 

 

 

 

 

Primer vnosa uporabniškega imena in gesla

 

Primer za vnos uporabniškega imena in gesla najdete na tej strani.

 

 

 

 

 

Polja za izbiro

 

1. Polja za izbiranje ene izmed več vrednosti: polja te vrste večkrat imenujemo tudi radijski gumbi. Uporabljamo jih, kadar moramo izbrati največ eno izmed več možnih vrednosti. Vsako polje je lahko vklopljeno ali izklopljeno, pri čemer je vklopljeno lahko največ eno polje v skupini. Ko vklopimo drugo polje, se izklopi tisto, ki je bilo prej vklopljeno. Vsa polja v skupini morajo imeti enako ime. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenese vrednost vklopljenega polja (vrednost, ki jo določimo z lastnostjo value). Z lastnostjo checked (ta je brez vrednosti) lahko zahtevamo, naj bo polje že na začetku vklopljeno. Sintaksa za polje za izbiranje ene od vrednosti je naslednja:

            <input type=“radio" name="..." value="..." checked=“checked”>

 

Primer najdete tukaj.

 

 

 

1. Polja za izbiro več vrednosti:  podobno kot pri radijskih gumbih lahko ustvarimo tudi skupino gumbov za izbiro vrednosti, ki pa se med seboj ne izklapljajo. Velikokrat je v skupini samo en takšen gumb. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh vklopljenih polj. Sintaksa za polje za izbiranje ene ali več vrednosti je naslednja:

 

<input type="checkbox" name="..." value="..." checked=“checked”>

 

 

Primer najdete tukaj.

 

 

 

 

Polja z izbiro – nadaljevanje

 

1. Polje za izbiranje ene izmed več vrednosti iz seznama: polje te vrste lahko uporabljamo namesto skupine radijskih gumbov. Polje je sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu radijskemu gumbu. Vrednost, ki jo dobi strežnik, ko končamo z vnosom podatkov, določimo z lastnostjo value pri vsaki opciji posebej (strežnik dobi vrednost izbrane opcije). Z lastnostjo selected lahko določimo, katera opcija bo izbrana na začetku. Vsebina elementa <option>, je besedilo, ki se prikaže v seznamu možnosti. To besedilo je tudi vrednost opcije, kadar vrednosti opcije z lastnostjo value ne predpišemo. Lastnost size določa, koliko opcij želimo videti naenkrat v seznamu možnosti. Če je opcij več, se ob strani prikaže drsnik. Sintaksa za polje za izbiranje ene izmed več vrednosti iz seznama je naslednja:

<select name="..." size="...">

   <option value="..." selected>...</option>

   ...

</select>

Primer1 najdete tukaj.

 

 

 

  

Primer2 najdete tukaj.

 

 

  

 

 

Polje za izbiranje več vrednosti iz seznama

 

1. Polje te vrste lahko uporabljamo namesto skupine gumbov za izbiro. Polje je sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu gumbu. Polje sestavimo podobno, kot polje za izbiro ene izmed več vrednosti iz seznama, le da dodamo lastnost multiple. Ko končamo z vnosom podatkov v obrazec, se na strežnik prenesejo vrednosti vseh izbranih opcij. Več opcij izberemo s pomočjo tipk SHIFT in CTRL. Sintaksa za polje za izbiranje več vrednosti iz seznamaje naslednja:

<select name="..." size="..." multiple ="multiple" >

   <option value="..." selected>...</option>

   ...

</select>

 

Primer najdete na tej strani.

 

 

 

 

 

Izbiranje ene vrednosti

 

Primer najdete tukaj.

 

 

 

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: vozilo=Avto&&poslji=Pošlji

 

 

 

Izbiranje večih vrednosti

 

Primer najdete tukaj.

 

 

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: vozilo=Motor&vozilo=Letalo&poslji=Pošlji

 

Skupine izbir

 

1.  
   • Opcije pri poljih, kjer je možna izbira <select> lahko razdelimo v več skupin. To storimo tako, da več opcij postavimo v skupino, ki jo opišemo z elementom <optgroup>. Posebej koristno je to pri dolgih seznamih opcij, kjer imamo več med seboj sorodnih opcij (te postavimo v isto skupino). Skupine ne morejo biti gnezdene (znotraj skupine ne moremo definirati podskupine). Z lastnostjo label določimo besedilo, ki se bo pojavilo v seznamu izbir (tega besedila ne bo možno izbrati).

<form method="get" action="obdelaj.aspx">

 

 

Tukaj je primer...

 

 

 

Strežnik s pomočjo načina pošiljanja “get” pridobi v url naslovu tudi vrednosti spremenljivk. V našem primeru: nakup=motor&poslji=Pošlji

 

Gumbi, slike , datoteke

 

polje za izbiro datoteke: To polje uporabimo, kadar želimo omogoči prenos datoteke na strežnik. Uporabnik bo izbral datoteko na svojem računalniku, ko bo kliknil na gumb za konec vnosa, pa se bo vsebina datoteka prenesla na strežnik. Z lastnostjo size lahko določimo širino polja, začetne vrednosti pa iz varnostnih razlogov ne moremo določiti. Ime datoteke lahko uporabnik vpiše v polje, ali pa pritisne gumb za izbiro datoteko, ki se pojavi na desni strani polja. Kadar v obrazcu uporabimo to vrsto polja, moramo lastnost method v obrazcu nastaviti na post, lastnost enctype pa na multipart/form-data.

<input type="file" name="..." size="...">

skrito polje: Skritega polja uporabnik ne more videti, niti mu ne more spremeniti vrednosti. Polje te vrste je uporabno za nastavitev vrednosti, ki jih želimo poslati strežniku v vsakem primeru. Vrednost skritega polja lahko spremenimo samo s pomočjo programa v enem od skriptnih jezikov, kot je JavaScript.

<input type="hidden" name="..." value="...">

slika: Sliko lahko uporabimo namesto gumba za konec vnosa. Ko uporabnik klikne na sliko, bodo podatki, vpisani v obrazec, poslani na strežnik, skupaj s koordinatama, kam na sliko smo kliknili (če je slika poimenovana).

<input type="image" name="..." src="..." alt="...">

gumb: To je gumb brez posebne vloge. Uporabimo ga lahko, kadar želimo storiti kaj posebnega, kadar bo uporabnik kliknil nanj. Lastnost value določa napis na gumbu, z lastnostjo onClick pa določimo, kaj želimo storiti ob kliku (akcijo opišemo s stavkom v programskem jeziku JavaScript).

<input type="button" value="..." onClick="..." >

gumb za nastavitev začetnega stanja: Z gumbom te vrste lahko kadarkoli vzpostavimo začetno stanje vseh polj v obrazcu. Lastnost value določa napis na gumbu.

<input type="reset" value="...">

gumb za konec vnosa: Skoraj vsak obrazec naj bi imel gumb, s katerim lahko uporabnik zaključi vnos podatkov. Ko bo kliknil nanj, se odpre naslednja spletna stran, določena z lastnostjo action v obrazcu. Običajno je tam zapisano ime programa na strežniku, ki bo sprejel, obdelal in shranil podatke, ter sestavil odgovor. Lastnost value določa napis na gumbu, če pa je gumb poimenovan, se tudi ta vrednost pošlje na strežnik.

 

<input type="submit" name="..." value="...">

 

Primer: slika, datoteka, gumbi

 

Tukaj je primer.

 

 

Gumbi

 

1. Poleg zgoraj omenjenih gumbov (polja tipa submit, reset, button in image) lahko uporabljamo tudi gumbe, ki jih opišemo z elementom <button>. Vrsto gumba v tem primeru določimo z lastnostjo type, ki ima lahko eno izmed vrednosti button, submit ali reset. Napis in/ali sliko na gumbu vpišemo kot vsebino elementa <button>.

Primeri je tukaj.

 

 

Opis polj

 

1. Medtem, ko nekaterim poljem v obrazcu lahko določimo opise (napisi na gumbih), drugim tega brez uporabe dodatnih elementov ne moremo. Pred polje za vnos besedila moramo sami napisati, kaj naj uporabnik vnese, za vsakim izbirnim gumbom moramo sami napisati, kaj tisti gumb pomeni ... Problem je, da če uporabnik klikne na tak opis, se ne zgodi ničesar (izbirni gumb lahko vklopimo samo, če kliknemo nanj). Težavo rešimo z uporabo elementa <label>. Uporabimo ga lahko na dva načina:

 

 

Primera je tukaj.

 

 

 

            V prvem primeru element <label>vsebuje opis in polje za vnos besedila. Ta način uporabe je primeren, kadar opis in polje nastopata skupaj (vmes ni nič drugega). V večini primerov pa za razmeščanje opisov in polj uporabljamo tabelo, tako da je med njima še kakšna značka za prehod v naslednjo celico ali celo vrstico tabele. V takih primerih nam preostane samo drugi način uporabe, kjer opis in polje definiramo vsakega posebej, povežemo pa ju tako, da polju damo neko oznako (definiramo lastnost id), v opisu pa se skličemo nanj (definiramo lastnost for).

 

Nasveta

 

1. Uporabljejte element <label> za vsako polje obrazca, saj lahko na ta način lažje razumemo kaj v obrazec vnašamo. Obrazec tudi lažje popravljamo.
2. Če imamo obrazec več vnašalnih polj, vsako polje drugače poimenujte (name=“... “), saj drugače spletna stran, ki obdeluje obrazec ne bo mogla določiti h kateremu polju spada vnesena vrednost.

 

Definiranje skupine polj

 

 

 

Tukaj je primer.

 

 

 

 

Pri razmeščanju polj nam bo v pomoč element <fieldset>, s katerim definiramo skupino polj. Skupina se obnaša kot celota, tako da jo je veliko lažje prestavljati in oblikovati. Prikaže se kot pravokotnik z robom, znotraj katerega so razmeščena vse polja te skupine. Skupina ima lahko tudi naslov, ki ga določimo z elementom <legend> znotraj skupine. Naslov skupine se prikaže na zgornjem robu pravokotnika.

 

 

 

 

Pošiljanje s pomočjo metode “post”

 

 

Primer najdete tukaj.

 

 

 

Uporabljene oznake v obrazcih

 

<form>            Definira obrazec

<input>           Definira polje v obrazcu

<textarea>       Definira polje v katerem je daljše besedilo

<button>         Definira gumb

<select>           Definira element izbirnega seznama

<optgroup>     Definira več opcij

<option>         Definira opcijo v obrazcu

<label>            Definira označbo v obrazcu

<fieldset>        Definira polje

<legend>         Definira napis v obrazcu