Razširitve spletnih obrazcev

V sodobnem HTML poleg osnovnih elementov obrazcev uporabljamo tudi več dodatnih tipov vnosnih polj, posebnih elementov in atributov. Ti pomagajo pri natančnejšem vnosu podatkov, izboljšajo uporabniško izkušnjo in v določenih primerih omogočajo tudi osnovno preverjanje podatkov že v brskalniku.

Na tej strani so zbrani redkeje uporabljeni elementi obrazcev, posebni tipi vnosnih polj in dodatni atributi, ki razširjajo možnosti spletnih obrazcev. Pri njihovi uporabi moramo upoštevati, da se lahko prikaz in podrobnosti vedenja med brskalniki in napravami nekoliko razlikujejo.

Redkeje uporabljeni elementi obrazcev

<datalist>

Element <datalist> določa seznam predlaganih vrednosti za vnosno polje. Uporabnik lahko izbere eno od ponujenih možnosti ali pa vnese lastno vrednost. Ta element je uporaben takrat, ko želimo uporabniku ponuditi pomoč pri vnosu, ne da bi ga omejili le na vnaprej določene možnosti.

Primer:

<form>
  Izberi brskalnik:
  <input list="brskalniki">
  <datalist id="brskalniki">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

<output>

Element <output> predstavlja rezultat izračuna ali drugega dejanja. Pogosto ga uporabimo v obrazcu, kadar želimo prikazati sprotni rezultat brez ponovnega nalaganja strani. Element je namenjen izpisu rezultata, ne vnosu podatkov.

Primer:

<form oninput="vsota.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="vsota" for="a b"></output>
</form>

<optgroup>

Element <optgroup> razdeli možnosti znotraj elementa <select> v smiselne skupine. Uporaben je pri daljših seznamih, kjer želimo možnosti razvrstiti v preglednejše sklope. Vsaka skupina ima opisno oznako, zapisano z atributom label.

Primer:

<form>
  <select>
    <optgroup label="Države EU">
      <option>Slovenija</option>
      <option>Nemčija</option>
    </optgroup>
    <optgroup label="Države izven EU">
      <option>ZDA</option>
      <option>Japonska</option>
    </optgroup>
  </select>
</form>

Redkeje uporabljeni tipi vnosnih polj

color

Polje color omogoča izbiro barve. Brskalnik praviloma prikaže izbirnik barv, končna vrednost pa je zapisana v obliki barvne kode. Tak tip je primeren za preproste primere izbire barv.

<form>
   Izberi barvo: <input type="color" name="barva">
</form>

date

Polje date omogoča izbiro datuma. Brskalnik navadno prikaže koledarski izbirnik ali drug primeren vmesnik za datum.

<form>
  Datum: <input type="date" name="datum">
</form>

datetime-local

Polje datetime-local omogoča izbiro datuma in časa brez časovnega pasu. Tak tip uporabljamo, kadar želimo lokalni datum in uro brez dodatne informacije o časovnem območju.

<form>
  Datum in čas: <input type="datetime-local" name="datum_cas">
</form>

email

Polje email je namenjeno vnosu e-poštnega naslova. Brskalnik lahko pri pošiljanju preveri osnovno pravilnost oblike vnosa. Na določenih napravah se lahko prikaže tudi tipkovnica, prilagojena za vnos e-poštnih naslovov.

<form>
  E-pošta: <input type="email" name="eposta">
</form>

month

Polje month omogoča izbiro meseca in leta. Primerno je takrat, ko dan v mesecu ni pomemben.

<form>
  Mesec: <input type="month" name="mesec">
</form>

number

Polje number je namenjeno vnosu števil. Po potrebi lahko določimo tudi najmanjšo in največjo dovoljeno vrednost ter korak med vrednostmi.

<form>
  Količina: <input type="number" name="kolicina" min="1" max="10">
</form>

range

Polje range prikaže drsnik za izbiro številčne vrednosti znotraj določenega intervala. Ta tip uporabimo takrat, ko natančna vrednost ni tako pomembna kot približen izbor znotraj območja.

<form>
  Točke: <input type="range" name="tocke" min="1" max="10">
</form>

search

Polje search je namenjeno iskalnemu vnosu. Po osnovnem delovanju je podobno navadnemu besedilnemu polju, vendar ga uporabimo tam, kjer vnos predstavlja iskalno poizvedbo.

<form>
  Iskanje: <input type="search" name="iskanje">
</form>

tel

Polje tel je namenjeno vnosu telefonske številke. Pri tem tipu brskalnik običajno ne preverja stroge oblike telefonske številke, lahko pa na mobilnih napravah prikaže primernejšo tipkovnico.

<form>
  Telefon: <input type="tel" name="telefon">
</form>

time

Polje time omogoča izbiro časa. Uporabno je takrat, ko potrebujemo le uro in minute brez datuma.

<form>
  Čas: <input type="time" name="cas">
</form>

url

Polje url je namenjeno vnosu spletnega naslova. Brskalnik lahko preveri osnovno pravilnost oblike naslova.

<form>
  Spletni naslov: <input type="url" name="naslov">
</form>

week

Polje week omogoča izbiro tedna in leta. Uporabimo ga takrat, ko podatke organiziramo po tednih.

<form>
  Teden: <input type="week" name="teden">
</form>

file

Polje file uporabimo za izbiro datoteke iz računalnika oziroma naprave uporabnika. Če želimo pošiljati datoteke, moramo pri obrazcu praviloma ustrezno nastaviti tudi kodiranje podatkov.

<form>
  Datoteka: <input type="file" name="datoteka">
</form>

image

Polje image ustvari slikovni gumb za pošiljanje obrazca. Tak element deluje kot gumb vrste submit, le da je prikazan kot slika. Pri njem moramo uporabiti atribut src, priporočljivo pa je dodati tudi atribut alt.

<form>
  <input type="image" src="../../_slike/html/poslji.webp" alt="Pošlji" width="48" height="32">
</form>

Dodatni atributi obrazcev in vnosnih polj

autocomplete

Atribut autocomplete omogoča ali prepreči samodejno dopolnjevanje vnosnih polj na podlagi prejšnjih vnosov. Nastavimo ga lahko na obrazcu ali na posameznem polju. Posamezno polje lahko preglasi nastavitev obrazca.

<form autocomplete="on">
   Ime: <input type="text" name="ime">
</form>

novalidate

Atribut novalidate prepreči preverjanje veljavnosti podatkov ob pošiljanju obrazca. Uporabimo ga takrat, ko želimo preverjanje izvesti drugače ali ga zavestno izpustiti.

<form novalidate> ... </form>

autofocus

Atribut autofocus ob nalaganju strani postavi kazalec v določeno polje. Uporabljamo ga previdno, da ne moti uporabnikovega dela ali orientacije na strani.

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

form

Atribut form poveže polje z obrazcem tudi, če polje ni zapisano neposredno znotraj elementa <form>. Vrednost atributa je identifikator obrazca.

<input type="text" name="priimek" form="obrazec1">

formaction

Atribut formaction določi drug naslov za pošiljanje podatkov pri posameznem gumbu za pošiljanje. S tem lahko isti obrazec pošiljamo na različne naslove glede na izbrani gumb.

<input type="submit" formaction="admin.php" value="Pošlji kot admin">

formenctype

Atribut formenctype določa način kodiranja podatkov pri pošiljanju z metodo post. Posebej pomemben je pri obrazcih za pošiljanje datotek.

<input type="submit" formenctype="multipart/form-data">

formmethod

Atribut formmethod določi način pošiljanja podatkov za posamezen gumb. Tako lahko pri istem obrazcu za različne gumbe določimo različni metodi, na primer get ali post.

<input type="submit" formmethod="post">

formnovalidate

Atribut formnovalidate onemogoči preverjanje veljavnosti pri posameznem gumbu za pošiljanje. Koristen je, kadar želimo imeti v istem obrazcu navadno pošiljanje in pošiljanje brez preverjanja.

<input type="submit" formnovalidate value="Pošlji brez preverjanja">

formtarget

Atribut formtarget določa, kje se prikaže odgovor po pošiljanju obrazca. Na primer vrednost _blank pomeni, da se odgovor odpre v novem zavihku ali oknu.

<input type="submit" formtarget="_blank">

height in width

Atributa height in width običajno uporabimo pri elementu <input type="image">, kjer določata velikost slikovnega gumba.

<input type="image" src="gumb.png" width="32" height="32">

list

Atribut list poveže polje <input> z elementom <datalist>. Tako uporabnik dobi seznam predlaganih vrednosti.

<input list="brskalniki">

min in max

Atributa min in max določata najmanjšo in največjo dovoljeno vrednost. Uporabna sta predvsem pri številskih in datumskih tipih vnosnih polj.

<input type="number" min="1" max="10">

multiple

Atribut multiple omogoča izbiro več vrednosti, na primer več datotek ali več e-poštnih naslovov, kadar to tip polja podpira.

<input type="file" multiple>

pattern

Atribut pattern določa vzorec, ki mu mora ustrezati vnesena vrednost. Vzorec zapišemo z regularnim izrazom. Ta atribut je uporaben pri preverjanju oblikovno natančnih vnosov.

<input type="text" pattern="[0-9]{4}">

placeholder

Atribut placeholder prikaže namig v praznem vnosnem polju. Uporaben je kot kratek primer ali usmeritev, vendar ne nadomešča prave oznake polja.

<input type="text" placeholder="Vnesi ime">

required

Atribut required določa, da mora biti polje pred pošiljanjem obvezno izpolnjeno. Če polje ni izpolnjeno, brskalnik lahko pošiljanje prepreči.

<input type="text" required>

step

Atribut step določa korak med dovoljenimi številskimi vrednostmi. Uporabimo ga predvsem pri tipih number, range, time in podobnih.

<input type="number" step="3">

Priporočila

• Posebne tipe polj uporabi takrat, ko se ujemajo z vrsto podatka, ki ga uporabnik vnaša.
• Atribute, kot so required, pattern, min, max in step, uporabljaj smiselno in pregledno.
• Pri pošiljanju datotek ne pozabi na ustrezno kodiranje obrazca.
• Element <datalist> uporabi za predloge, ne za strogo omejitev vnosa.
• Namig z atributom placeholder naj bo dopolnilo, ne nadomestilo oznake <label>.

Pogoste napake

• Za specializiran vnos je uporabljeno navadno besedilno polje, čeprav obstaja primernejši tip.
• Atributi min, max ali step niso usklajeni z dejanskimi zahtevami.
• Element <output> je uporabljen kot navadno besedilo namesto kot rezultat dejanja ali izračuna.
• Atribut placeholder je uporabljen namesto prave oznake polja.
• Pri atributih formaction, formmethod ali formtarget ni jasno, zakaj se obrazec ob različnih gumbih vede različno.