Deşi formularele HTML5 oferă mult mai multe funcționalități decât predecesorii lor, ele pot fi definite la fel de ușor.
HTML5 oferă de fapt multe tipuri de câmpuri noi. Suportul oferit de browserele actuale este deja destul de bun. În general, voi prezenta doar acele tipuri de câmpuri care sunt practic utile.
Selector de culori
Puteți oferi vizitatorilor dvs. posibilitatea de a selecta o culoare.
Când se selectează un astfel de câmp, se deschide un selector tipic de culori.
Prin intermediul acestuia se poate selecta culoarea dorită. Un astfel de selector de culori este definit folosind <input type="color" />.
Selectează culoarea ta preferată: <input type="color" name="lf" />
Unui câmp trebuie întotdeauna să i se atribuie o valoare. Dacă lipsește sau este nevalidă, se va presupune automat valoarea #000 (adică negru).
Data și oră
În special în ceea ce privește tipurile de câmpuri pentru date și ore, HTML5 aduce numeroase noutăți. Aceste tipuri de câmpuri sunt uneori foarte complexe. Gândiți-vă, de exemplu, la ce pași sunt necesari atunci când doriți să oferiți vizitatorilor dvs. un câmp pentru selectarea datei. În mod normal, fără JavaScript (sau chiar Flash) nu ai cum să faci asta. Datorită HTML5, acum este mult mai simplu. Aici este nevoie doar să definiți un câmp de introducere de tip date.
<input type="date" />
Pentru afișarea și implementarea calendarului, browserul este responsabil în exclusivitate. Browserul ar trebui să afișeze un widget corespunzător pentru calendar. În Google Chrome, o aplicație arată astfel:
Prin date se definește un calendar prin care utilizatorii pot selecta data dorită. Data este preluată automat în câmpul text după selectare.
La fel de ușor se poate crea un câmp pentru oră. Se folosește un câmp de tip time pentru aceasta.
<input type="time" />
Prin time, browserele ar trebui să afișeze controale pentru selectarea unei ore.
Similar de ușor funcționează week. Acesta afișează un câmp pentru selectarea săptămânii.
<input type="week" />
În plus, puteți afișa un câmp pentru lună.
<input type="month" />
Ambele tipuri de câmpuri determină afișarea elementelor de control pentru setarea informațiilor dorite.
În timp ce time și date permit fie doar selectarea datei, fie doar selectarea orei, datetime și datetime-local permit o combinare a ambelor variante.
În cazul datetime, un câmp pentru data și un câmp pentru selectarea orei sunt afișate unul lângă celălalt. (momentan, datetime este suportat doar de Safari și Opera).
S-a menționat deja că aceste tipuri de câmpuri de formular prezentate în această secțiune nu sunt încă acceptate de toate browserele. Cu toate acestea, cine dorește totuși să le folosească poate apela la soluții JavaScript corespunzătoare. Astfel, marile framework-uri JavaScript cum ar fi jQuery și Dojo oferă scripturi potrivite. In jQuery UI, arată astfel:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Astfel, veți fi în siguranță, chiar dacă browserul nu suportă clasicul date.
Câmpuri pentru numere
Prin number, se oferă un câmp destinat în mod special introducerii numerelor.
În cel mai simplu caz, definiția unui câmp de tip number arată în felul următor:
<input type="number" />
Numerele pot fi introduse în aceste câmpuri în două moduri:
• prin tastatură
• prin elemente de control
Prin specificarea unor atribute suplimentare, câmpurile de tip number pot fi descrise în detaliu. În primul rând, avem cele două atribute min și max, prin care se pot determina intervalele de valori ale câmpurilor.
• min – valoarea minimă
• max – valoare maximă
Însă aceste două atribute se aplică doar în ceea ce privește elementele de control din browser. Intrările manuale ale utilizatorilor prin tastatură nu pot fi afectate de acestea.
Atât valorilor întregi, cât și numerelor zecimale le pot fi atribuite acestor două atribute.
Prin atributul step se poate defini pasul care trebuie respectat de elementele de control din browser.
<input type="number" min="0" max="8" step="2" />
În acest caz, prin controalele browserului se pot selecta doar valorile 0, 2, 4, 6 și 8.
Curseur
Câmpurile de tip range permit selectarea unei valori într-un interval definit de valori.
<input type="range" min="0" max="10" step="2" value="6">
Valoarea minimă posibilă se specifică prin atributul min. max descrie valoarea maximă. Lipsa celor două atribute min și max duce la valori implicite de 0 și 100 în browsere.
Prin step se poate defini schimbarea treptată.
Câmpuri de căutare
search nu are inițial nici o funcție. Mai degrabă, acest tip de câmp este văzut ca o completare a câmpului clasic de introducere a textului. Scopul câmpurilor de tip search este să se diferențieze optic de câmpurile de text simple. De obicei, browserele ar trebui să preia afișarea câmpurilor search.
<input type="search" />
Cum sunt implementate în cele din urmă rămâne la latitudinea producătorilor. O combinație bună este adăugarea atributului results.
<input type="search" results="5" placeholder="Căutare..." />
Prin results se stabilește câte dintre căutările anterioare să fie afișate în câmp.
Dar atenție: Atributul results nu face parte din specificația HTML5.
