Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

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">
  ... elementi obrazca ...
</form>

Element <form> je vsebnik za različne vrste vnosnih elementov, kot so: besedilna polja, potrditvena polja, izbirni gumbi, gumbi za pošiljanje, itd.

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

  • get - podatki se pošljejo preko URL naslova
  • post - podatki se pri pošiljanju dodajo telesu dokumenta

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

Vnosni elementi obrazcev

HTML elemnti obrazcev:

Oznaka Opis
<input> Oznaka, ki določa vnosno polje, kamor lahko uporabnik vnese podatke
<label> Ustvari oznako (besedilo), ki označuje sosednji element v obrazcu
<textarea> Polje za vnos daljšega besedila
<select> Ustvari spustni seznam (seznam izbir), ki uporabnikom omogoča, da izberejo eno izmed različnih možnosti iz seznama možnosti
<option> Določa seznam možnosti v spustnem seznamu znotraj elementa <select>
<optgroup> Ustvari skupino ali podskupino možnosti znotraj spustnega seznama elementa <select>
<button> Ustvari gumb, ki lahko izvede akcijo
<datalist> Ustvari seznam možnosti, ki ga lahko povežete z vhodnimi polji <input> in omogoča tudi lasten vnos uporabnika
<output> Predstavi izhodni rezultat ali rezultat izračuna znotraj obrazca
<fieldset> Uporablja se za ustvarjanje skupine povezanih elementov obrazca in njihovih oznak
<legend> Določi napis za element <fieldset>

Element <input>

Oznaka <input> je ena najbolj osnovnih in uporabljenih oznak za ustvarjanje interaktivnih obrazcev na spletnih straneh. Ta oznaka omogoča uporabnikom, da vnašajo podatke, kot so besedilo, številke, e-poštni naslovi in druge vrste informacij.

Atribut type oznake <input> določa vrsto vhodnega polja, ki ga želimo ustvariti. Obstaja več vrst vhodnih polj, med najpogostejšimi pa so:

Polje za vnos kratkega (enovrstičnega) besedila

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

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:

Polja za izbiranje ene izmed večih vrednosti

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>

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 (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

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>

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

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="...">

Oznaka <label>

Oznaka <label> se uporablja za ustvarjanje besedilne etikete (besedila ali oznake), ki je povezana z drugim elementom obrazca. Besedilo oznake <label> običajno opisuje sosednji element obrazca in ga povezuje z njim preko atributa for, ki vsebuje vrednost, ki se ujema z atributom id elementa obrazca, ki ga želimo označiti.

<label for="ime">Ime:
<input type="text" id="ime">

Oznaka <label> izboljšuje dostopnost spletnih strani, zlasti za osebe s posebnimi potrebami. Uporaba etiket omogoča bralnikom zaslona, da preberejo besedilo etikete in ga povežejo z elementom obrazca, kar olajša razumevanje in uporabo obrazcev. Klik na besedilo etikete poudari sosednji element obrazca, kar omogoča lažje in bolj intuitivno delo z elementi obrazca.


Polje za vnos daljšega besedila

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>

Polje za izbiranje ene vrednosti iz danega seznama

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>...</option>
   ...
</select>

Z lastnostjo selected (je brez vrednosti) 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> 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 danega 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 (je brez vrednosti). 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>
   <option value="..." selected>...</option>
   ...
</select>

Primer:

<form>
   <select name="mesec" size="12" multiple> 
	  <option value="jan" 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>

Oznaka <optgroup>

Oznaka <optgroup> se uporablja za ustvarjanje skupine izbir v elementu <select>. Oznaka <optgroup> organizira in razdeli dolg spustni seznam možnosti v podskupine ali kategorije, kar izboljša preglednost in razumljivost izbir v padajočem meniju.

Primer:

<form>
   <select>
   	  <optgroup label="Države EU">
		  <option value="slovenija"> Slovenija </option>
		  <option value="nemcija"> Nemčija </option>
		  <option value="francija"> Francija </option>
	  </optgroup>
	  <optgroup label="Države izven EU">
		  <option value="zda"> ZDA </option>
		  <option value="kitajska"> Kitajska </option>
		  <option value="japonska"> Japonska </option>
	  </optgroup>
   </select>
</form>

V tem primeru so izbire razdeljene v dve skupini: "Države EU" in "Države izven EU". Atribut label oznake <optgroup> določa ime skupine, ki se prikaže kot naslov nad izbirami v padajočem meniju.

Oznaka <button>

Oznaka <button> se uporablja za ustvarjanje gumba na spletni strani, ki omogoča uporabnikom izvajanje različnih dejanj ali funkcij, kot so pošiljanje obrazcev, sprožanje JavaScript funkcij ali preusmerjanje na druge strani. Notranjost oznake <button> običajno vsebuje besedilo ali ikono, ki opisuje dejanje, ki ga gumb izvaja. Uporabniki to besedilo ali ikono vidijo kot napis na gumbu, kar jim omogoča, da razumejo, kaj se bo zgodilo, ko kliknejo nanj.

Atribut type določa vrsto gumba. Obstajajo naslednje vrednosti za atribut type:

  • submit - uporablja se za pošiljanje obrazca na strežnik
  • reset - uporablja se za ponastavitev elementov obrazca na privzete vrednosti
  • button - to je privzeta vrednost in se uporablja za splošne gumbe brez specifičnega namena

Primer gumba z atributom in napisom na gumbu:

<button type="submit"> Pošlji </button>

Skupina povezanih elementov <fieldset> z napisom <legend>

Oznaka <fieldset> se uporablja za ustvarjanje skupine povezanih elementov obrazca, ki razdelijo elemente obrazca na logične skupine, kar izboljša preglednost in organizacijo obrazca. Oznaki <fieldset> sledi oznaka <legend>, ki skupini elementov določi opisno ime. Skupaj tvorita okvir okoli več elementov obrazca, ki pripadajo isti kategoriji ali funkcionalnosti.

Primer skupine povezanih elemntov obrazca:

<form>
  <fieldset>
	<legend>Podatki o uporabniku</legend>
	<label for="ime">Ime:</label>
	<input type="text" id="ime" name="ime"><br>

	<label for="priimek">Priimek:</label>
	<input type="text" id="priimek" name="priimek"><br>
  </fieldset>

  <fieldset>
	<legend>Naslov</legend>
	<label for="ulica">Ulica:</label>
	<input type="text" id="ulica" name="ulica"><br>

	<label for="mesto">Mesto:</label>
	<input type="text" id="mesto" name="mesto"><br>
  </fieldset>
</form>
Podatki o uporabniku

Naslov

Nazaj
Naprej