Vom incepe o serie de articole care trateaza noutatile aduse de HTML 5. Sa incepem cu un foarte scurt istoric al acestuia.
HTML 5 este noul standard de markup, aflat inca pe masa de lucru a celor de la W3C. HTML 5 incearca sa aduca markup-ul in era Web 2.0 prin optimizari la tag-uri existente si, foarte important, introducerea unor tag-uri noi.
In articolul de azi nu vom trata tag-urile noi pe care ni le aduce HTML 5. Am preferat in schimb, sa tratez ceea ce dupa parerea mea este una din cele mai importante schimbari pe care HTML 5 ni le aduce. Imbunatatirea instrumentelor pentru formulare.
Ce inseamna asta? Inseamna ca tag-ul input a primit cateva atribute noi si foarte interesante. Vom trata pe rand o parte din acestea; nu le vom acoperi pe toate pentru ca sunt foarte multe.
Sa incepem cu un atribut care in viziunea mea era normal sa fie implementat ca fiind standard. De mult timp programatorii si designerii foloseau mici bucati de JavaScript pentru a obtine acest efect, care devenise aproape un standard pe majoritatea site-urilor care presupuneau un formular de login sau de cautare.
<input type='text' name='name' id='name' autofocus='autofocus' />
Dupa cum puteti observa, in respectivul input s-a strecurat un nou atribut: autofocus. Asta ii spune browser-ului ca input-ul cu acest atribut trebuie sa fie selectat in mod implicit la incarcare paginii.
Acest fapt este util, de exemplu, daca utlizatorul nostru trebuie sa se autentifice inainte de a putea face orice altceva. In acest caz, utilizatorul nu mai trebuie sa mearga cu mouse-ul si sa dea click pe campul de autentificare. Acesta este deja in focus, iar utilizatorul nu trebuie decat sa scrie datele.
Un alt atribut care vine in intampinarea developerilor care se vedeau nevoiti sa scrie cod redundant, este placeholder. Cel mai bine pot sa explic acest atribut printr-un exemplu. Ati observat probabil campuri de cautare, care erau completate implicit cu un text de genul "Search with Google". Aici intervine atributul placeholder.
Acest lucru era, evident, posibil si pana acum, dar pentru asta trebuia folosit JavaScript si trebuia tratat cazul in care aveam mai multe input-uri in aceasta situatie. Codul arata asa:
<input type='email' name='name' id='email' placeholder='example@mail.com' />
Genul acesta de placeholder-text poate fi foarte util in anumite situatii, dar aveti grija sa nu cadeti in capcana lui. Este foarte usor sa abuzam de acest atribut. De tinut minte: nu toate campurile dintr-un formular au nevoie de un placeholder.
Un nou avantaj oferit de HTML 5 il constituie un nou tip de input: date.
<input type='date' step='10' name='date' id='date' />
Dupa cum vedeti, in afara de atributul type, care are o noua valoare, a mai aparut un atribut: step. Acesta desemneaza cu cat va putea fi incrementata data din input-ul nostru.
Un tip mai special de input pe care ni-l pune la dispozitie HTML 5, este acela de tip range. De ce este el atat de special? Pentru ca in loc de un input clasic, acesta genereaza un slider cu ajutorul caruia putem alege o valoare dintr-un interval dat.
<input type='range' min='100' max='500' name='range' id='range' />
Observati atributele min si max. Cu ajutorul lor definim intervalul de valori ce poate fi selectat cu slider-ul. Asta inseamna, in cazul de fata, ca daca tragem slider-ul pana in capatul din stanga, vom face submit la valoarea 100, iar daca il tragem in capatul din dreapta, va lua valoarea 500.
Aceasta a fost scurta noastra introducere in HTML 5. Tin sa mentionez ca este vorba de un standard inca in lucru, care inca nu este suportat de toate browser-ele. Unele il interpreteaza mai bine, alele deloc (IE8). Din experienta mea, cel mai bun suport este oferit, in acest moment, de motorul Webkit. Eu dezvolt si testez pe acest motor (prin intermediul Google Chrome) si, presupun, ca un suport la fel de bun va veni din partea Safari care este dezvoltat pe aceeasi baza.