Načrtovanje in razvoj spletnih aplikacij

Razširitve spletnih obrazcev

HTML 5 nudi kar nekaj novih spletnih elementov za vnos različnih tipov podatkov v spletne obrazce. Do sedaj je bilo potrebno podatke, ki smo jih vnesli v spletni obrazec (npr. obrazec za registracijo ali enostavni kontaktni obrazec) preverjati, če smo podatke vpisali pravilno, ali če so veljavni in obvezni. To je bilo mogoče storiti le programsko s pomočjo JavaScript, PHP ali drugega programskega jezika za spletno programiranje.

Z novo specifikacijo v HTML5 je mogoče veliko lažje obdelovati podatke, ki bodo poslani preko obrazca. Za najpogosteje vnešene podatke je za preverjanje pravilnosti in veljavnosti potreben le enostavni atribut HTML5.

Novi elementi obrazca

datalist

Element obrazca datalist označuje seznam možnosti za izbiranje.

Primer:

<form>
  Izberi brskalnik (<em>datalist</em>):
  <input list="brskalniki">
  <datalist id="brskalniki">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
<br />
  <input type="button" value="Pošlji">
</form>
Safari ne podpira
Izberi brskalnik (datalist):

keygen

Element obrazca keygen označuje generiran ključ.

Element keygen je bil zaradi nepodpore nekaterih brskalnikov v verziji HTML 5.1 odstranjen iz Web standardov.

Primer:

<form action="test_keygen.php" method="get">
  Zaščita podatkov (<em>keygen</em>):<br />
  Uporabnik: <input type="text" name="uporabnik_ime" />
  Encryption: <keygen name="varnost">
<br />
  <input type="submit" value="Pošlji">
</form>
Internet Explorer ne podpira
Zaščita podatkov (keygen): Uporabnik: Encryption:

output

Element obrazca outputje oznaka za izpis podatkov, ki nam jih na primer vrne skripta ali preprost matematični izraz.

Primer:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0">+
  <input type="number" id="b" value="0">=
  <output name="x" for="a b"></output>
</form>
Internet Explorer ne podpira
+ =

Novi tipi vnosnih polj obrazca

color

Vnosno polje color omogoča uporabniku izbiranje barve.

Primer:

<form>
   Izberi barvo: <input type="color" name="barva" />
<br />
   <input type="submit" value="Pošlji">
</form>
Izberi barvo:

date

Vnosno polje date omogoča uporabniku izbiro datuma.

Primer:

<form>
   Datum: <input type="date" name="datum" />
<br />
   <input type="submit" value="Pošlji">
</form>
Fireworks ne podpira
Datum:

datetime-local

Vnosno polje datetime-local omogoča uporabniku izbiro datuma in časa brez časovnega pasu.

Primer:

<form>
   Datum in čas (brez časovnega pasu): <input type="datetime-local" name="datum-cas-no-tz" />
<br />
   <input type="submit" value="Pošlji">
</form>
Fireworks ne podpira
Datum in čas (brez časovnega pasu):

email

Vnosno polje email omogoča uporabniku vnos naslova elktronske pošte, ki se ob pošiljanju avtomatično preveri.

Primer:

<form>
   E-mail: <input type="email" name="upr-email" />
<br />
   <input type="submit" value="Pošlji">
</form>
Safari ne podpira
E-mail:

month

Vnosno polje month omogoča uporabniku, da označi leto in mesec (brez časovnega pasu).

Primer:

<form>
   Datum in mesec (brez časovnega pasu): <input type="month" name="leto-mesec" />
<br />
   <input type="submit" value="Pošlji">
</form>
Fireworks ne podpira
Datum in mesec (brez časovnega pasu):

number

Vnosno polje number omogoča omejen vnos števila.

Primer:

<form>
   Vrednoti (med 1 in 3): <input type="number" name="quantity" min="1" max="3" />
<br />
   <input type="submit" value="Pošlji">
</form>
Vrednoti (med 1 in 3):

range

Vnosno polje range omogoča vnos celega števila preko drsnika, kjer je omejena spodnja in zgornja meja (atribute min in max) ali pa je določen korak (atribute step), lahko pa je nastavljena privzeta vrednost (atribute value).

Primer:

<form>
   Vrednoti na drsniku: <input type="range" name="points" min="1" max="10" />
<br />
   <input type="submit" value="Pošlji">
</form>
Vrednoti na drsniku:

Vnosno polje search je iskalno polje, ki išče z Googlom.

Primer:

<form>
   Išči z Googlom: <input type="search" name="googlesearch" />
<br />
   <input type="submit" value="Pošlji">
</form>
Išči z Googlom:

tel

Vnosno polje tel je polje, ki je namenjno vnosu telefonske številke.

Primer:

<form>
   Išči z Googlom: <input type="tel" name="telefon" />
<br />
   <input type="submit" value="Pošlji">
</form>
Fireworks ne podpira Chrome ne podpira Opera ne podpira IE ne podpira
Telefon:

time

Vnosno polje time omogoča uporabniku, da označi čas (brez časovnega pasu).

Primer:

<form>
   Označi čas: <input type="time" name="cas" />
<br />
   <input type="submit" value="Pošlji">
</form>
Fireworks ne podpira
Označi čas:

url

Vnosno polje url je namenjeno vnosu internetnega naslova URL. Vrednost vnosa se ob pošiljanju obrazca preveri avtomatično.

Primer:

<form>
   Vnesi naslov spletne strani: <input type="url" name="web-naslov" />
<br />
   <input type="submit" value="Pošlji">
</form>
Safari ne podpira
Vnesi naslov spletne strani:

week

Vnosno polje week omogoča uporabniku, da označi teden in leto.

Primer:

<form>
   Vnesi teden: <input type="week" name="teden-leto" />
<br />
   <input type="submit" value="Pošlji">
</form>
Fireworks ne podpira
Vnesi teden:

Novi atributi obrazca in vnosov

autocomplete

Atribut autocomplete uporabimo z obrazcem ali vnosnim poljem, pri čemer ga lahko vključimo ali izključimo. Vključen brskalniku omogoči, da si zapomni vrednosti, ki smo jih že vnesli v vnose.

Primer:

<form action="" autocomplete="on">
   Ime: <input type="text" name="fname"><br />
   Priimek: <input type="text" name="lname"><br />
   E-pošta: <input type="email" name="email" autocomplete="off">
<br />
   <input type="submit" value="Pošlji">
</form>
Ime:
Priimek:
E-pošta:

novalidate

Atribut novalidate je tip boolean. Če je uporabljen, se vrednost vpisana v polje ne vrednoti.

Primer:

<form action="" novalidate>
   E-pošta: <input type="email" name="email"><br />
   <input type="submit" value="Pošlji">
</form>
Safari ne podpira
E-pošta:

autofocus

Atribut autofocus se na naša na vnosno polje. Takoj, ko se stran naloži, se samodejno premakne kazalec v prvo vnosno polje s tem atributom.

Primer:

<form>
   Ime: <input type="text" name="fname" autofocus><br />
   <input type="submit" value="Pošlji">
</form>
Ime:

form

Atribut form povezuje enega ali več obrazcev z vnosnimi polji.

Primer:

<form action="" id="form1">
   Ime: <input type="text" name="fname"><br />
   <input type="submit" value="Pošlji">
</form>
Priimek: <input type="text" name="lname" form="form1">
IE ne podpira
Ime:
Priimek:

formaction

formaction je atribut vnosa input, ki kaže povezavo do datoteke, ki se bo izvedla ob pošiljanju obrazca. Atribut formaction zamenja atribut elementa form.

Primer:

<form>
   Ime: <input type="text" name="fname"><br />
   Priimek: <input type="text" name="lname"><br />
   <input type="submit" value="Pošlji">
   <input type="submit" formaction="admin.asp" value="Pošlji kot admin">
</form>
Ime:
Priimek:

formenctype

formenctype je atribut, ki določa kodiranje form-data pri pošiljanju podatkov na server. Deluje le pri pošiljanju z metodo POST.

Primer:

<form action="" method="post">
   Ime: <input type="text" name="fname"><br />
   <input type="submit" value="Pošlji">
   <input type="submit" formenctype="multipart/form-data" value="Pošlji kot Multipart/form-data">
</form>
Ime:

formmethod

formmethod je atribut, ki definira HTTP metodo pošiljanja podatkov form-data. Atribut formmethod zamenja metodo elementa form.

Primer:

<form action="" method="get">
   Ime: <input type="text" name="fname"><br />
   Priimek: <input type="text" name="lname"><br />
   <input type="submit" value="Pošlji">
   <input type="submit" formmethod="post" formaction="post.asp" value="Pošlji z metodo POST">
</form>
Ime:
Priimek:

formnovalidate

Atribut formnovalidateatribut določa, da se podatki elemnta ob pošilanju ne preverjajo. Atribut formnovalidate zamenja atribut elementa form in se izvede namesto njega.

Primer:

<form>
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Pošlji"><br>
   <input type="submit" formnovalidate="formnovalidate" value="Pošlji brez preverjanja">
</form>
Safari ne podpira
E-pošta:

formtarget

formtarget atribut določi mesto, kje naj se prikaže odgovor po pošiljanju obrazca. Atribut formtarget zamenja atribut elementa form.

Primer:

<form action="">
   Ime: <input type="text" name="fname"><br />
   Priimek: <input type="text" name="lname"><br />
   <input type="submit" value="Pošlji"><br>
   <input type="submit" formtarget="_blank" value="Pošlji v novo okno">
</form>
Ime:
Priimek:

height in width

height in width sta atributa, ki določata širino in višino elementa input. Uporabimo ga le, kadar kot vnosni element uporabimo sliko:

<input type="image">

Primer:

<form action="">
   Ime: <input type="text" name="fname"><br />
   Priimek: <input type="text" name="lname"><br />
   <input type="image" src="puscica.png" alt="Pošlji" width="32" height="32">
</form>
Ime:
Priimek:

list

list je atribut, ki določa preddefinirane vrednosti vnosnega elemnta.

Primer:

<form action="">
   Izberi brskalnik: <input list="brskalnik">
   <datalist id="brskalnik">
	  <option value="Internet Explorer">
	  <option value="Firefox">
	  <option value="Chrome">
	  <option value="Opera">
	  <option value="Safari">
   </datalist><br />
   <input type="submit" value="Pošlji">
</form>
Safari ne podpira
Izberi brskalnik:

min in max

min in max sta atributa, ki definirata minimalno in maksimalno vrednost vnosnega elemnta. Atributa min in max delujeta z naslednjimi tipi vnosnih polj: number, range, date, datetime-local, month, time in week.

Primer:

<form action="">
   Izberi datum pred 1990-01-01: <input type="date" name="bday" max="1989-12-31"><br />
   Izberi datum po 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br />
   Oceni (med 1 in 10): <input type="number" name="quantity" min="1" max="10"><br />
<input type="submit" value="Pošlji">
</form>
Fireworks ne podpira
Izberi datum pred 1990-01-01:
Izberi datum po 2000-01-01:
Oceni (med 1 in 10):

multiple

Atribut multiple omogoča oddajanje več datotek ali poštnih naslovov.

Primer:

<form action="">
  Izberi slike: <input type="file" name="img" multiple="multiple">
</form>
Fireworks ne podpira
Izberi slike:

pattern

Atribut pattern določa veljaven izraz, ki je dovoljen za vnos v polje.

Primer:

<form action="">
   Poštna številka: <input type="text" name="postna_stevilka" pattern="[0-9]{4}"
   title="Vnesi štirimestno poštno številko"><br />
   <input type="submit" value="Pošlji">
</form>
Safari ne podpira
Poštna številka:

placeholder

Z atributom placeholder določimo privzeto vrednost vnosnega polja.

Primer:

<form action="">
   Ime: <input type="text" name="fname" placeholder="Ime"><br />
   Priimek: <input type="text" name="lname" placeholder="Priimek"><br />
   <input type="submit" value="Pošlji">
</form>
Ime:
Priimek:

required

Atribut required je tipa boolean in ga uporabimo, če je vnosno polje potrebno obvezno izpolniti.

Primer:

<form action="">
   Uporabniško ime: <input type="text" name="usrname" required><br />
   <input type="submit" value="Pošlji">
</form>
Safari ne podpira
Uporabniško ime:

step

Atribut step določa številski korak. Npr. pri step=3 so dovoljeni vnosi ... -3, 0, 3, 6, 9 ...

Primer:

<form action="">
   Točke: <input type="number" name="points" step="3"><br />
<input type="submit" value="Pošlji">
</form>
Točke: