Renge polje
HTML 5

Input / Vnosna polja v HTML 5 [1. del]

HTML5V HTML5 smo dobili nekaj novih značk tudi pri vnostnih poljih. Vseh ne bom našteval, bom pa predstavil nekaj zelo koristnih tipov, kateri nam lahko pri izdelavi forme prihranijo kar nekaj vrstic PHP kode. Težava se seveda zopet pojavi pri uporabnikih s starim brskalnikom, kateri ne podpira HTML5. O tem katere verzije podpirajo HTML5 in kako uporabnikom s starim brskalnikom sporočiti da ne uporabljajo posodobljenega brskalnika bom pisal kdaj drugič.

Pogledali input tipe:

  • placeholder*
  • search
  • number
  • range
  • color
  • tel
  • url
  • email
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local

 

Danes samo debelo označene tipe, ostale naslednič.

Placeholder

*Placeholder ni type ampak posebna značka, vendar se mi zdi, da jo je vredno omeniti. Ta nova stvaritev je svetlo sivo zapisano besedilo, katero v hipu, ko kliknemo na polje izgine. Če v polje nič ne zapišemo in ga zapustimo, se besedilo pojavi nazaj. Precej bolša zadeva, kot sedaj, ko si za takšen efekt potreboval javascript.
Koda:

Screenshot:

Placeholder
Placeholder

 

Search

O tem tipu sem enkrat že pisal, ampak bom primer podal še enkrat. Tip search se uporablja, kot nam že ime pove, pri vnosnih poljih za iskanje. Posebnost je ta, da ko vpišemo nekaj v polje, se nam na desni strani pokaže X, s katerim pobrišemo kar smo napisali.

Koda:

Screenshot:

Search polje
Search polje

 

 

Number

Vnosno polje number se uporablja za števila. Če poskusimo v polje vnesti znak ki ni število, ga avtomatsko takoj izbriše. Tako da v to polje lahko dobimo le števila. Prav tako se nam na desni strani pojavi puščica gor/dol za povišanje/znižanje števila.

Koda:

Screenshot:

Number polje
Number polje

 

 

Range

Tip range deluje kot drsnik, njegova vrednost je od 0 do 100. Privzeto pa se postavi na 50, razen če mu v kodi določimo drugače.

Koda:

Screenshot:

Renge polje
Renge polje

 

 

Color

Color polje se uporablja za izbiro barve. V polje je potrebno vnesti barvo s kodo, drugače nas polje obvesti o nepravilno izpoljenem polju. Se pravi za črno barvo vnesemo #000000. #000 ne deluje, čeprav se dostikrat uporablja za črno, mora biti # + 6 števil.

Koda:

Screenshot nepravilno izpoljenega polja:

Color polje
Color polje

 

 

 

1 comment

Oddaj komentar...

This site uses Akismet to reduce spam. Learn how your comment data is processed.