Načrtovanje in razvoj spletnih aplikacij

Obrazci v HTML

V HTML se obrazci uporabljajo za zbiranje uborabniških vnosov, ki se kot podatki posredujejo strežniku.

Za začetek obrazca uporabimo oznako form:

<form method="post" action="URL">
...
</form>

Lastnost method določa način prenosa podatkov do strežnika, možni vrednosti sta:

  • get - podatke pošljemo neposredno strežniku
  • post - podatki se pošljejo preko URL naslova

Lastnost action določa naslov programa ali spletne strani, ki bo obdelal v obrazec vnešene podatke.

Vnosni elementi obrazcev

Elementi, ki jih pri opisovanju obrazcev najpogosteje uporabljamo, so:

Pri opisu obrazca lahko uporabljamo različne elemente za vnos podatkov in izbiranje. Zelo pomembno je, da ima vsak od teh elementov svoje ime, kajti le tako program za obdelavo podatkov lahko ve, v katero polje je bil vnešen kateri podatek.

Polje za vnos kratkega (enovrstičnega) besedila v HTML obrazcih

To je najbolj pogosto polje v obrazcih. Namenjenu je vnosu kratkega (enovrstičnega) besedila.

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

Z lastnostjo size lahko določimo širino polja v znakih, prednastavljena širina je 20 znakov. Z lastnostjo maxlength omejimo število znakov, ki jih lahko vpišemo v to polje. Lastnost value določa začetno vrednost polja (to je besedilo, ki je že na začetku vpisano v to polje).

Primer:

<form>
   Ime: <input type="text" name="ime" /><br />
   Priimek: <input type="text" name="priimek" />
</form>
Ime:
Priimek:

Polje za vnos gesla v HTML obrazcih

Enovrstično vnosno polje za vnos gesla definira oznaka:

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

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.

Primer:

<form> 
   Geslo: <input type="password" name="geslo" /> 
</form>
Geslo:

Polje za vnos daljšega besedila v HTML obrazcih

Vnos daljšega večvrstičnega besedila definira oznaka:

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

Z lastnostma rows in cols določimo velikost polja s število vrstic in stolpcev v znakih. Besedilo, ki bi ga želeli imeti v polju že na začetku, vpišemo kot vsebino elementa textarea.

Primer:

<form> 
   <textarea name="opis" rows="5" cols="50">
      Vnesite opis naloge...
   </textarea> 
</form>

Polja za izbiranje ene izmed večih vrednosti v HTML obrazcih

Polja te vrste večkrat imenujemo tudi radijski gumbi. Uporabljamo jih, kadar moramo izbrati samo eno izmed več možnih vrednosti. Hkrati je lahko vklopljeno le eno polje, ko vklopimo drugo polje, se izklopi tisto, ki je bilo prej vklopljeno. Vsa polja v skupini morajo imeti enako ime.

<input type="radio" name="..." value="..." checked="checked" />

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.

Primer:

<form>
   <input type="radio" name="spol" value="moški" /> moški<br />
   <input type="radio" name="spol" value="ženski" /> ženski
</form>
moški
ženski

Polja za označevanje v HTML obrazcih

Polja za označevanje je skupina 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.

<input type="checkbox" name="..." value="..." checked="checked" />

Primer:

<form>
   <input type="checkbox" name="koda" value="HTML" /> HTML<br /> 
   <input type="checkbox" name="koda" value="HTML5" /> HTML5<br />
   <input type="checkbox" name="koda" value="CSS" /> CSS<br />
   <input type="checkbox" name="koda" value="CSS3" /> CSS3
</form>
HTML
HTML5
CSS
CSS3

Polje za izbiranje ene ali več vrednosti iz danega seznama v HTML obrazcih

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 ob pošiljanju dobi vrednost izbrane opcije.

<select name="..." size="...">
   <option value="..." selected="selected">...</option>
   ...
</select>

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.

Primer:

<form>
   <select name="dan" size="1"> 
	  <option value="pon" selected="selected">Ponedeljek</option>
	  <option value="tor">Torek</option>
	  <option value="sre">Sreda</option>
	  <option value="cet">Četrtek</option>
	  <option value="pet">Petek</option>
	  <option value="sob">Sobota</option>
	  <option value="ned">Nedelja</option>
   </select>
</form>

Polje za izbiranje več vrednosti iz seznama

Polje je sestavljeno iz seznama opcij, kjer je vsaka opcija enakovredna enemu gumbu iz skupine za izbiro. 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.

<select name="..." size="..." multiple="multiple">
   <option value="..." selected="selected">...</option>
   ...
</select>

Primer:

<form>
   <select name="mesec" size="12" multiple="multiple"> 
	  <option value="jan" selected="selected">Januar</option>
	  <option value="feb">Februar</option>
	  <option value="mar">Marec</option>
	  <option value="apr">April</option>
	  <option value="maj">Maj</option>
	  <option value="jun">Junij</option>
	  <option value="jul">Julij</option>
	  <option value="avg">Avgust</option>
	  <option value="sep">September</option>
	  <option value="okt">Oktober</option>
	  <option value="nov">November</option>
	  <option value="dec">December</option>
   </select>
</form>

Gumbi v HTML obrazcih

V HTML obrazcih imamo na volju več gumbov s katerimi lahko pošljemo ali zbrišemo obrazec, s klikom na gumb pa lahko izvedemo tudi akcijo, ki jo opišemo s stavkom v JavaScript-u.

Gumb za konec vnosa oz. pošiljanje obrazca

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:

<form name="uporabnik" action="ui.php" method="get"> 
   Uporabniško ime: <input type="text" name="uporabnik" /> 
   <input type="submit" value="Pošlji" /> 
</form>
Uporabniško ime:

Gumb za nastavitev začetnega stanja

S tem gumbom lahko kadarkoli vzpostavimo začetno stanje vseh polj v obrazcu. Lastnost value določa napis na gumbu:

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

Gumb za izvedbo akcije

To je gumb, ki nima posebne vloge. Uporabimo ga, kadar želimo storiti kaj posebnega, ko 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="..." />