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

• Tweet

V 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:

<input type="text" placeholder="Neko besedilo..." />

Screenshot:

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:

<input type="search" />

Screenshot:

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:

<input type="number" />

Screenshot:

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:

<input type="range" />

Screenshot:

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:

<input type="color" />

Screenshot nepravilno izpoljenega polja:

Color polje