FORMULARE HTML5

HTML5 introduce noi tipuri de input pentru formulare: email, url, number, range, date pickers (date, month,
week, time, datetime, datetime-local), search, color.

Suport în browser-e:

Exemplu - introducerea și validarea datelor de tip email.

E-mail: <input type="email" name="user_email" />

Exemplu - introducerea și validarea datelor de tip numeric; se pot impune restricții cu privire la numerele
acceptate în input.
Puncte: <input type="number" name="points" min="1" max="10" />

Puteți folosi următoarele atribute pentru a adăuga restricții:

Exemplu - introducerea și validarea datelor dintr-un interval de numere

<input type="range" name="points" min="1" max="10" />

HTML5 ofera mai multe tipuri de input pentru selectarea datei și a timpului:
date - selectează data, luna și anul
month - selectează luna și anul
week - selectează săptămâna și anul
time - selectează timpul (ora și minutul)
datetime - selectează timpul, data, luna și anul (timp UTC)
datetime-local - selectează timpul, data, luna și anul (timp local)

Următorul exemplu vă permite să selectați o dată dintr-un calendar:

data: <input type="date" name="user_date" />

Exemplu - permite selectarea unei culori dintr-un color picker

culoare: <input type="color" name="user_color" />
Elementul <datalist> specifică o listă de opțiuni predefinite pentru elementul <input> și este folosit pentru a
adăuga o opțiune de "autocompletare" în elementul <input>.
Exemplu - utilizare listă de atribute a elementului <input> pentru utilizarea acestuia cu un element de tip
<datalist>

<input list="browsers" />

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Scopul elementului <keygen> este de a oferi o cale securizată pentru autentificarea utilizatorilor. Când
formularul este trimis, sunt generate două chei, una privată și una publică.
Cheia privată este stocata local, iar cheia publica este trimisa la server. Cheia publică poate fi folosită pentru
a genera un certificat pentru client, care poate folosi certificatul pentru următoarele autentificări.

Exemplu – formular ce utilizează <keygen>.

<form action="test_keygen.php" method="get">
Utilizator: <input type="text" name="usr_name" />
Criptare: <keygen name="security" />
<input type="submit" />
</form>

Exemplu – utilizare<output> pentru afișarea rezultatului unui calcul (ca cel realizat de un script).
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

VIDEO

Pentru a reda un fișier video în HTML5 aveți nevoie de codul de mai jos:
<video src="film.ogg" controls="controls">
</video>

Atributul "controls" este folosit pentru a adăuga fișierului video elemente de control (play, pause, volume).
Este recomandat să includeți și atributele width (lățime) și height (înălțime) pentru ca spațiul necesar
fișierului video să fie rezervat când se încarcă pagina, în caz contrar, aspectul paginii se va modifica în
momentul încărcării acesteia. Inserăm conținutul între tag-urile <video> si </video>.
<video src="flim.ogg" width="320" height="240" controls="controls">
Browserul dvs nu suporta tag-ul video.
</video>

Exemplul de mai sus folosește un fișier Ogg și va funcționa în Opera, Chrome și Firefox.
Pentru a funcționa în Safari și versiunile viitoare de Chrome trebuie să adăugăm un fișier MPEG4 sau
WebM.

Una din caracteristicile speciale ale tag-ului video este acela că suportă mai multe surse care fac legătura
către fișiere video în formate diferite. Browser-ul va reda primul format recunoscut.
 video width="320" height="240" controls="controls">
<source src="film.ogg" type="video/ogg" />
<source src="film.mp4" type="video/mp4" />
<source src="film.webm" type="video/webm" />
Browserul dvs nu suporta tag-ul video.
</video>

Aveți mai jos atributele suportate în HTML 5 pentru tag-ul <video>.

Elementul HTML5 <video> are de asemenea metode (methods), proprietăți (properties) și evenimente
(events). De exemplu există metode pentru pornire(playing), pauză(pausing) și încărcare(loading).
Proprietățile pe care le puteți seta - durată, volum, căutare.

Există și evenimente DOM ce ne pot notifica momentul în care elementul <video> pornește, face pauză sau
se oprește. În tabelul de mai jos aveți afișate metode ale elementului video, proprietăți și evenimente
suportate de majoritatea browser-elor.

Obs. Dintre proprietățile video, doar videoWidth și videoHeight sunt disponibile imediat, celelalte sunt
disponibile doar după ce sunt încărcate metadatele fișierului video.
AUDIO

Pentru a reda un fișier audio în HTML5 trebuie să implementați următorul cod:

<audio src="song.ogg" controls="controls">
</audio>

Atributul control adaugă butoanele de control "play"(redare), "pause"(pauza) și "volume" (volum).

Conținutul se inserează între tag-urile <audio> și </audio> pentru browser-ele care nu suportă elementul
audio:
<audio src="song.ogg" controls="controls">
Browserul dumneavoastra nu suporta acest element.
</audio>

Exemplul anterior folosește un fișier Ogg și va funcționa în Firefox, Opera și Chrome. Pentru ca fișierul
audio să fie redat și în Internet Explorer și Safari, formatul fișierului trebuie să fie MP3.

Elementul audio permite să se utilizeze mai multe elemente sursă. Elementele sursă pot să aibă legatură
către fișiere audio diferite. Browser-ul va folosi primul format recunoscut.
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Browserul dumneavoastra nu suporta acest element.
</audio>
CANVAS

Pentru a adăuga un element canvas la o pagină HTML5 trebuie să specificăm id-ul său, lațimea și înalțimea
pânzei de desenare:
<canvas id="primulcanvas" width="200" height="100"></canvas>

După acest pas desenăm elemente pe pânza definită utilizând elemente JavaScript.
<script type="text/javascript">
var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

Exemplu
<canvas id="primulcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Browserul dumneavoastra nu suporta elementul canvas.
</canvas>
<script type="text/javascript">
var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript utilizeaza id-ul pentru a găsi elementul canvas:

var c=document.getElementById("primulcanvas");

Apoi crează un obiect de context:

var cxt=c.getContext("2d");

Obiectul getContext("2d") este un element HTML5 construit, cu numeroase metode pentru desenarea
traiectoriilor, căsuțelor, cercurilor, caracterelor, imaginilor.

Următoarele două linii de program desenează un dreptunghi roșu:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Metoda fillStyle adaugă culoarea roșie iar metoda fillRect specifică forma, poziția și dimensiunea.
Metoda fillRect de mai sus are parametrii (0,0,150,75). Acest lucru înseamnă că se desenează un dreptungi
de 150 x 75 (150,75) în canvas, începând de la colțul din stânga, sus (0,0). Coordonatele x și y sunt folosite
pentru a poziționa desenul în canvas.

Elemente CANVAS
a) Linie - desenează o linie specificând coordonatele corespunzătoare poziției initiale și finale.
<canvas id="primulcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Browserul dumneavoastra nu suporta elementul canvas.
</canvas>

<script type="text/javascript">

var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

b) Cerc - desenează un cerc specificând dimensiunea, culoarea și poziția.

<canvas id="primulcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Browserul dumneavoastra nu suporta elementul canvas.
</canvas>

<script type="text/javascript">

var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

c) Gradient - implementează un gradient cu culorile specificate.

<canvas id="primulcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Browserul dumneavoastra nu suporta elementul canvas.
</canvas>

<script type="text/javascript">

var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

d) Imagine - implementează o imagine pe pânza de desenare (canvas)

<canvas id="primulcanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Browserul dumneavoastra nu suporta elementul canvas.
</canvas>

<script type="text/javascript">

var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="img_flwr.png";
cxt.drawImage(img,0,0);

</script>

Canvas-urile sunt redate (încărcate) pixel cu pixel și elementele grafice desenate cu canvas rămân
nemodificate de către browser. Dacă trebuie să modificăm poziția unui element întreaga scenă trebuie
redesenată incluzând și obiectele care sunt acoperite de elementul grafic.
SVG = Scalable Vector Graphics
- folosit pentru a defini elemente grafice bazate pe vectori pentru web
- definește elemente grafice în format XML
- elementele grafice SVG nu își pierd din calitate când facem zoom pe ele sau când le redimensionăm
- orice element și orice atribut poate fi animat în fișiere SVG
- este o recomandare W3C
Avantajele utilizării SVG în locul altor formate (ca JPEG sau GIF) sunt:
- imaginile SVG pot fi create și editate cu orice editor de text
- imaginile SVG pot fi căutate, indexate, scriptate și comprimate
- imaginile SVG pot fi scalate
- imaginile SVG pot fi printate cu o calitate înaltă la orice rezoluție
- imaginile SVG pot fi mărite (zoom) fără ca imaginea să își piardă din calitate

Exemplu - elemente SVG incluse direct în pagina HTML

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

SVG este un limbaj folosit pentru descrierea elementelor grafice 2D în XML. SVG se bazeaza pe XML,
ceea ce înseamnă că fiecare element este disponibil în cadrul DOM SVG. Putem atașa agenți de evenimente
JavaScript pentru orice element. În SVG, fiecare formă desenată este prezentata ca un obiect. Dacă
atributele unui obiect SVG sunt modificate, browser-ul va reîncărca noua formă.

DRAG & DROP

Mai jos aveți un exemplu simplu de drag and drop.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div>
<img id="drag1" src="imagini/codebox_html5.jpg" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

Înainte de toate trebuie să setăm valoarea "true" atributului draggable al elementului.

<img draggable="true" />

Apoi va trebui să specificăm ce se va întâmpla când elementul este prins (dragged).

În exemplul anterior, atributul ondragstart apeleaza o funcție, drag(event), care specifică datele ce vor fi
trase. Metoda dataTransfer.setData() stabilește tipul și valoarea datelor.
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

În acest caz, tipul datelor este "Text" și valoarea este id-ul elementului prins ("drag1"). Următorul pas este să
vedem unde va fi lăsat (dropped) elementul prins. Acest lucru se realizează utilizând
evenimentul ondragover. În mod implicit, datele/elementele nu pot fi trase în alte elemente. Pentru a permite
o tragere trebuie să prevenim manipularea implicită a elementului. Acest lucru este posibil prin apelarea
metodei event.preventDefault() pentru evenimentul ondragover:
event.preventDefault()

In final, trebuie să plasam elementul prins, practic aruncăm datele folosind funcția drop(event) apelată de
atributul ondrop din exemplul anterior.
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

SPEECH INPUT

Browser-ul Chrome 11 are activat în mod implicit analiza vorbirii (speech analysis) Dacă dispuneți
de acest browser puteți accesa pagina pentru  speech input demonstration.

Rezultatul depinde de accent și ceea ce spuneți, în general fiind recunoscute cuvintele uzuale în
engleză și numerele, dar sistemul de recunoaștere nu este obișnuit cu recunoașterea unor tonalități
particulare.

Codul HTML necesar pentru speech input:

<input type="text" x-webkit-speech />

Atributul x-webkit-speech poate fi utilizat pentru orice element de intrare HTML5 de tip text,
number, tel sau search dar nu poate fi utilizat pentru câmpuri de tip textarea.
 Următorul cod sursă JavaScript este utilizat pentru a detecta dacă speech input este activat:

if (document.createElement("input").webkitSpeech === undefined) {

alert("Speech input is not supported in your browser.");
}

Speech input este una dintre cele mai inovative tehnologii implementate pentru browser-e și este
utilizată:
 pentru dictare asistată pentru persoanele cu mobilitate motorie redusă
 ca o alternativă de input (inserare de date) pentru telefoane mobile și tablete
 în mediile în care utilizarea tastaturii sau mouse-ului nu este posibilă din cauza factorilor de mediu

GEOLOCATION
API-ul Geolocalizare (Geolocation) oferit de HTML5 ne dă posibilitatea de a afla poziția geografică a unui
vizitator. Aceasta opțiune poate fi folosită doar daca vizitatorul accepta localizarea poziției sale (datorită
confidențialitații utilizatorilor).

API-ul Geolocation este mai precis în cazul dispozitivelor prevazute cu GPS (ca iPhone). Folosim metoda
getCurrentPosition() pentru a obține poziția utilizatorului.

Mai jos aveți un exemplu simplu de geolocalizare care returnează latitudinea și longitudinea poziției
utilizatorului.

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br />Longitudine: " + position.coords.longitude;
}
</script>

Se verifică daca browser-ul suportă Geolocation. Dacă suportă API-ul atunci se execută metoda
getCurrentPosition(). Dacă nu, se afișeaza un mesaj de eroare. Dacă metoda getCurrentPosition() este
executată cu succes, se afișeaza un obiect de coordonate pentru funcția specificată în parametrul
(showPosition). Funcția showPosition() preia afișarea latitudinii și longitudinii. Al doilea parametru al
metodei getCurrentPosition() este folosit pentru a manipula erorile și specifica o funcție care va fi executată
în cazul în care nu se poate determina poziția vizitatorului.

Exemplu
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Utilizatorul a respins cererea pentru Geolocalizare."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Nu sunt disponibile informatii despre Locatie."
break;
case error.TIMEOUT:
x.innerHTML="Cererea pentru aflarea locatiei utilizatorului a expirat."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="A aparut o eroare necunoscuta."
break;
}
}

Coduri de eroare:
 permisiune respinsă (Permission denied) - utilizatorul nu permite geolocalizarea
 pozitie indisponibilă (Position unavailable) - nu este posibilă localizarea
 a expirat (Timeout) - operațiunea de localizarea nu a fost realizată într-un interval de timp specificat
Pentru a afișa rezultatul într-o hartă trebuie să accesăm un serviciu de hărți ce poate utiliza latitudinea și
longitudinea determinată iar cel mai recomandat serviciu de acest gen este Google Maps.

Exemplu
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

În exemplul anterior am utilizat latitudinea și longitudinea pentru a determina locația folosind harta Google
(utilizând o imagine statică).

În exemplul de mai jos este prezentat modul în care se poate utiliza scriptul Google Map pentru a crea o
hartă interactivă (cu marcaj, zoom și opțiuni de drag).
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';

var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

Mai sus sunt prezentate exemple despre modul în care se poate determina poziția unui utilizator pe o hartă.
Geolocalizarea poate fi de asemenea utilizată și pentru a obtine informații specifice locației: informații
locale la zi, afișarea unor puncte de interes în apropierea utilizatorului, navigație GPS.
Metoda getCurrentPosition() returnează un obiect dacă este executată cu succes. Proprietățile latitudine,
longitudine și precizie sunt întotdeauna returnate. Celelalte proprietăți, specificate în tabelul de mai jos, sunt
returnate doar dacă sunt disponibile.

Alte metode Geolocation

- watchPosition() - returnează poziția curentă a utilizatorului și continuă să actualizeze aceasta poziție
pe masură ca utilizatorul se mișcă (ca GPS-ul într-o mașina).
- clearWatch() - oprește metoda watchPosition().

Exemplu - prezinta metoda watchPosition(); e nevoie de un dispozitiv GPS precis pentru a testa această
metoda (iPhone).

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Browserul dvs. nu suporta Geolocation.";}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br />Longitudine: " + position.coords.longitude;
}
</script>