Dober spletni obrazec - Kako do več izpolnjenih povpraševanj
Izpolnjevanje spletnih obrazcev nikoli ni bilo zabavno. S prihodom mobilnih naprav, pa je to še toliko manj prijetno, zaradi tipkovnice, ki zapolni polovico zaslona in s tem zmanjša vidno polje. Toda sodobni brskalniki omogočajo, da je to veliko lažje z zagotavljanjem novih semantičnih tipov vnosov in validacij.
Različni tipi vnosov spletnih obrazcev
S prihodom HTML5 (označevalni jezik, uporabljen za strukturiranje in predstavljanje vsebin na svetovnem spletu), so predstavljene nove možnosti izpolnjevanja spletnih obrazcev. Te nove vrste vnosov namigujejo brskalniku, kakšna vrsta razporeditve tipkovnice se prikaže za zaslonih mobilnih naprav.
<input type=”email” placeholder=”example@email.com” />
Mobilna naprava zaradi zgoraj napisane sintakse “email” pri kontaktni formi, prilagodi tip tipkovnice tako, da se spodaj pri pesledki pojavi znak “@”, ki nam olajša vnos email naslova.
| Vrsta vnosa | Opis |
|---|---|
url | Za vnos URL-ja. Začeti mora z veljavno shemo URI (na primer http: //, ftp: // ali mailto://). |
tel | Za vnos telefonskih številk. Ne uporablja posebne sintakse za preverjanje veljavnosti, zato lahko, če želite zagotoviti določen format, uporabite vzorec. |
email | Za vnos e-poštnih naslovov. Privzeto bo upošteval le enega, vendar če je naveden več atributov, je seznam e-poštnih naslovov možno ločiti z vejico. |
number | Za številčni vnos je lahko na voljo vsako racionalno celo število ali likvidna vrednost. |
color | Za izbiranje barv. |
range | Za vnos številk, vendar je za razliko od vnosnega polje, je tu vrednost številk manjša. Uporabniku se prikaže kot drsnik. |
datetime | Za vnos datuma in časa, ko je časovni pas določen kot GMT. |
datetime-local | Za vnos datuma in časa, kjer je časovni pas lokalni časovni pas. |
<input type=”url” placeholder=”www.website.com” />
Ena glavnih prednosti input type=”tel” je, da mobilnim brskalnikom prikažejo posebno tipkovnico za vnos telefonskih številk. Na primer, spodaj lahko vidite, kakšne so tipkovnice na mobilnih napravah.
<input type=”tel” placeholder=”+386 41 123 456″ />
