Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Obrazci v HTML

Obrazci v HTML služijo za zbiranje uporabniških podatkov. Uporabnik lahko v obrazec vnese besedilo, izbere možnosti, označi potrditvena polja ali pošlje podatke na strežnik. Element <form> predstavlja del dokumenta z interaktivnimi kontrolami za pošiljanje podatkov.

Obrazec določimo z elementom <form>, znotraj katerega postavimo različna vnosna polja in gumbe. Pri sodobni rabi obrazcev je pomembno tudi, da uporabljamo ustrezne oznake <label>, smiselno združevanje z <fieldset> in po potrebi naslov skupine z <legend>.

Pomni: Atribut action določa, kam se podatki pošljejo, atribut method pa način pošiljanja podatkov. Pri get se podatki praviloma dodajo v naslov, pri post pa se pošljejo v telesu zahtevka.

<form action="obdelava.php" method="post">
   ... elementi obrazca ...
</form>

Osnovna pravila

  • Obrazec določimo z elementom <form>.
  • Atribut action določa naslov za obdelavo podatkov.
  • Atribut method določa način pošiljanja podatkov.
  • Element <input> je najpogostejši element za vnos podatkov.
  • Element <label> poveže besedilo z vnosnim poljem in izboljša dostopnost obrazca.

Pozor: Atribut method="get" ni primeren za pošiljanje občutljivih podatkov, saj se ti podatki praviloma pojavijo v spletnem naslovu. Za take primere običajno uporabimo post.

Na tej strani so predstavljeni elementi, ki jih v obrazcih uporabljamo najpogosteje. Redkeje uporabljene elemente, posebne tipe polj in dodatne atribute prikazuje stran Razširitve spletnih obrazcev.

Primerjave

get in post

Lastnost get post
Pošiljanje podatkov podatki se dodajo v naslov URL podatki se pošljejo v telesu zahtevka
Tipična raba iskanje, filtriranje, preprosti obrazci brez občutljivih podatkov pošiljanje večjih ali občutljivejših podatkov
Privzeta vrednost da ne

<input>, <textarea> in <select>

Element Uporaba
<input type="text"> vnos krajšega enovrstičnega besedila
<textarea> vnos daljšega večvrstičnega besedila
<select> izbira ene ali več možnosti iz seznama

Pogosti elementi obrazcev

Oznaka Opis
<input> najpogostejši element za vnos podatkov v obrazec
<label> besedilna oznaka, povezana z elementom obrazca
<textarea> polje za vnos daljšega besedila
<select> spustni seznam za izbiro ene ali več možnosti
<option> posamezna možnost znotraj elementa <select>
<button> gumb za pošiljanje, ponastavitev ali drugo dejanje
<fieldset> skupina povezanih elementov obrazca
<legend> napis skupine elementov znotraj <fieldset>

Element <input>

Element <input> je najbolj pogosto uporabljen element obrazca. Z atributom type določimo vrsto vnosnega polja.

Polje za vnos kratkega besedila

Polje text uporabljamo za vnos krajšega enovrstičnega besedila, na primer imena ali priimka.

<input type="text" name="ime">

Primer:

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

Polje za vnos gesla

Polje password je podobno navadnemu besedilnemu polju, le da se vneseni znaki ne prikazujejo neposredno.

<input type="password" name="geslo">

Primer:

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

Izbirni gumbi

Elemente radio uporabimo, kadar želimo, da uporabnik izbere natanko eno možnost iz skupine. Vsi gumbi v isti skupini morajo imeti enako vrednost atributa name.

<input type="radio" name="spol" value="moski">

Primer:

<form>
   <input type="radio" name="spol" value="moski"> Moški <br>
   <input type="radio" name="spol" value="zenski"> Ženski
</form>
Moški
Ženski

Potrditvena polja

Potrditvena polja checkbox uporabimo, kadar lahko uporabnik izbere več možnosti hkrati.

<input type="checkbox" name="jezik" value="HTML">

Primer:

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

Gumbi v obrazcu

Gumb za pošiljanje obrazca

Element submit pošlje podatke obrazca na naslov, določen z atributom action.

<input type="submit" value="Pošlji">

Primer:

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

Gumb za ponastavitev obrazca

Element reset vrne elemente obrazca v začetno stanje.

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

Navaden gumb

Element button uporabimo za dejanja, ki niso nujno povezana s pošiljanjem obrazca.

<input type="button" value="Klikni">

Oznaka <label>

Element <label> poveže opisno besedilo z vnosnim poljem. To izboljša preglednost in dostopnost obrazca. MDN posebej priporoča povezavo med <label> in konkretnim poljem.

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

Dobro je, da ima skoraj vsako vnosno polje svojo oznako <label>. Tako je obrazec bolj razumljiv in prijaznejši za uporabo.

Polje za vnos daljšega besedila

Element <textarea> uporabimo, kadar uporabnik vnaša večvrstično besedilo, na primer komentar ali opis.

<textarea name="opis" rows="5" cols="40"></textarea>

Primer:

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

Spustni seznam <select>

Element <select> omogoča izbiro ene možnosti iz seznama. Posamezne možnosti določimo z elementi <option>.

<select name="dan"> ... </select>

Primer:

<form>
   <select name="dan">
      <option value="pon" selected>Ponedeljek</option>
      <option value="tor">Torek</option>
      <option value="sre">Sreda</option>
   </select>
</form>

Oznaka <button>

Element <button> ustvari gumb, katerega vsebina je lahko besedilo ali drug HTML. Pogosto ga uporabljamo namesto <input type="submit">.

Primer:

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

Skupina elementov <fieldset> in <legend>

Element <fieldset> združi povezane dele obrazca v smiselno celoto, element <legend> pa tej skupini doda naslov.

Primer:

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

    <label for="priimek2">Priimek:</label>
    <input type="text" id="priimek2" name="priimek">
  </fieldset>
</form>
Podatki o uporabniku

Priporočila

  • Pri vsakem pomembnem polju uporabi <label>.
  • Za krajši vnos uporabi <input>, za daljše besedilo pa <textarea>.
  • Za skupino medsebojno povezanih možnosti uporabi radio, za več neodvisnih izbir pa checkbox.
  • Povezane dele obrazca združi z elementom <fieldset> in po potrebi dodaj <legend>.
  • Za občutljivejše ali obsežnejše podatke praviloma uporabi method="post".

Pogoste napake

  • Polje nima oznake <label>, zato obrazec ni dovolj pregleden.
  • Izbirni gumbi iste skupine nimajo enake vrednosti atributa name.
  • Za večvrstični vnos se uporabi <input type="text"> namesto <textarea>.
  • Za pošiljanje podatkov se uporabi get, čeprav podatki niso primerni za prikaz v naslovu.
  • Element <button> ali <input type="submit"> se uporabi brez razumevanja, da lahko sproži pošiljanje obrazca.
Nazaj
Naprej