HTML5 - Elemente si atribute noi in formular

Noile caracteristici adaugate in HTML5 nu sunt complet recunoscute de principalele browsere. Navigatoarele web cu cel mai bun suport pentru noile elemente din HTML5 sunt: Opera, Chrome si Mozill Firefox.

Noile tipuri de casete input in HTML5

HTML5 adauga mai multe tipuri de casute input pentru formular (datetime, datetime-local, date, month, week, time, number, range, email, url, search, si color), care sunt prezentate mai jos:

    type="date" - Creaza o caseta de control pentru specificarea datei (an, luna, zi), precum un calendar. Valoarea initiala (adaugata in atributul "value") trebuie sa fie furnizata in format data ISO.
<input type="date" name="set_date" value="2011-10-15" />
date

    type="datetime" - Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO date/time, si e trimisa ca fiind in fusul orar UTC.
<input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />
Datetime

    type="datetime-local" - Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO date/time, la fel ca "datetime", dar presupunand ca timpul este cel din fusul orar local.
<input type="datetime-local" name="dtl" value="2011-06-14T01:26:32:00">

    type="month" - Creaza o caseta input in care se poate specifica anul si luna.
<input type="month" value="2012-09" name="mnt" />
Month

    type="week" - o caseta input pentru anul si numarul unei anumite saptamani din an (AN-Wnr , nr e numarul saptamanii).
<input type="week" name="weeks" value="2011-W34" />
Week

    type="time" - creaza o casuta de formular pentru ora (ora, minute, secunde).
<input type="time" name="currenttime" value="18:12:00" />
Time

    type="tel" - o caseta input pentru numar de telefon.
<input type="tel" name="hometel" value="123-888-2012" />

    type="url" - e folosit pentru campuri de formular care trebuie sa contina doar adresa URL. Valoarea din acest input e automat validata cand datele din formular sunt trimise (daca nu are un format URL valid, returneaza un mesaj de eroare).
<input type="url" name="site" size="25" value="http://www.marplo.net" />

    type="number" - creaza casete de formular care sa contina doar numere. Se poate restrictiona numerele acceptate, cu atributele "min", "max" si "step".
<input type="number" name="points" min="5" max="80" />
Number

    type="range" - Creeaza o zona cu un cursor de control care indica o valoare dintr-o serie de numere. Numerele acceptate incep de la valoarea specificata in atributul "min" (0 default), pana la numarul specificat in atributul "max" (100 default).
<input type="range" name="val" min="1" max="10" />
Range

    type="email" - e folosit pentru campuri de formular care trebuie sa contina doar adresa de e-mail. Valoarea din acest input e automat validata cand datele din formular sunt trimise.
<input type="email" name="email" />

    type="search" - Creaza un camp de text special folosit pentru cautare (de ex. cautare in site, cu un script).
<input type="search" name="srch" size="25" value="Cautare" />

    type="color" - Creaza un camp de formular special pentru selectarea unei culori.
<input type="color" name="get_color" />
Color

Atribute noi pentru <form> adaugate in HTML5


Atribute noi pentru input

    autofocus - (autofocus="autofocus" in XHTML) - specifica faptul ca un camp de formular sa primeasca automat focus cand pagina e afisata. Functioneaza in toate casetele <input>.
Name: <input type="text" name="name1"  autofocus="autofocus" />

    form="form_id" - Asociaza campul input cu formularul care are id="form_id". Cu aceasta metoda, caseta de text nu trebuie adaugata special intr-un element form. Functioneaza in toate tipurile <input>.
<form action="script.php" method="post" id="idf">
 Name:<input type="text" name="fname" />
 <input type="submit" value="Send" />
</form>
E-mail: <input type="email" name="email" form="idf" />

    formaction="url" - Rescrie valoarea atributului "action" din <form>, trimitand datele la adresa specificata la "url".
    formenctype="content_type" - Rescrie valoarea atributului "enctype" din <form>.
    formmethod="get | post | put | delete" - Rescrie valoarea atributului "method" din <form>. Valorile "put" si "delete" sunt noi in HTML5.
    formnovalidate - (formnovalidate="formnovalidate" in XHTML) - Rescrie valoarea atributului "novalidate" din <form>.
    formtarget="target" - Rescrie valoarea atributului "target" din formular.
    - Aceste atribute de recriere sunt folosite doar in buton submit (type "submit" sau "image").
<form action="script.php" method="post" id="idf">
 E-mail: <input type="email" name="email" /><br />
 <input type="submit" value="Trimite" /><br />
 <input type="submit" formaction="script_2.php" value="Trimite la script_2" /><br />
 <input type="submit" formnovalidate="formnovalidate" value="Trimite fara validare" />
</form>

    height="pixels" - Specifica inaltimea butonului imagine, cand type="image".
    width="pixels" - Specifica lungimea butonului imagine, cand type="image".
    - Aceste atribute sunt folosite doar in butoane cu type="image":
<input type="image" src="img_submit.gif" width="80" height="23" />

    list="id_datalist" - Indica faptul ca exista o list predefinita de optiuni pentru utilizator, care sunt furnizate de un element datalist. Valoarea atributului list ("id_datalist") este ID-ul adaugat in <datalist>.
- Poate fi utilizat cu urmatoarele tipuri de <input>: text, search, url, tel, email, datepickers, number, range, color.
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
 <option label="CoursesWeb" value="http://www.coursesweb.net" />
 <option label="MarPlo" value="http://www.marplo.net" />
 <option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

    max="number" - specifica valoarea maxima pentru numere, aceasta trebuie sa fie mai mare (sau egala) decat valoarea adaugata in atributul "min".
    min="number" - specifica o valoarea minima pentru numere.
    step="any/number" - specifica intervalul de numere care poate fi folosit (daca step="3", numerele acceptate sunt: -3,0,3,6, etc).
    - Atributele "min", "max", si "step" pot fi utilizate in urmatoarele casete <input> types: date-pickers, number, range.
Urmatorul cod defineste o caseta care accepta numere de la 1 la 10, cu step 3 (numere ce pot fi adaugate: 3, 6 sau 9):
<input type="number" name="num" min="1" max="10" step="3" />

    multiple - (multiple="multiple" in XHTML) - Indica faptul ca utilizatorul poate specifica mai mult de o valoare.
- Poate fi utilizat in urmatoarele casete <input>: email, file.
<input type="file" name="img" multiple="multiple" />

    pattern="regexp" - specifica o expresie regulata folosita la validarea datelor din caseta input. Puteti adauga un atribut "title" care sa indice pe scurt formatul datelor ce trebuie adaugate.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email, password.
Codul urmator defineste un camp text in care pot fi adaugate maxim 5 caractere (doar litere si numere):
<input type="text" name="pass" pattern="[A-z0-9]{5}" title="Cinci caractere, litere si numere" />

    placeholder="text" - Furnizeaza un mic indiciu, sau exemplu care sa ajute utilizatorul sa adauge datele corecte (pentru o descriere mai lunga, se foloseste atributul "title").
Indiciul e afisat in caseta input cand e goala, si dispare cand cursorul e in acel camp.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email, password.
<input type="search" name="src"  placeholder="Search MarPlo" />

    required - (required="required" in XHTML) - indica faptul ca respectivul camp input trebuie sa fie completat inainte de a trimite datele.
- Poate fi adaugat in urmatoarele casete <input>: text, search, url, tel, email, password, date-pickers, number, checkbox, radio, file.
<input type="text" name="name1" required="required" />

Alte elemente de formular adaugate in HTML5

<datalist> ... </datalist> tag

Elementul datalist trebuie sa contina un "id" si tag-uri <option> ... </option>.
Creaza un meniu cu optiuni (adaugate in elementul "option"), oferind o functie de "auto-completare" in timp ce utilizatorul tasteaza in caseta input care are un atribut "list" ce face referire la "id-ul" din datalist.
Tag-ul <option> trebuie sa contina atributul "value".
Exemplu:
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
 <option label="CoursesWeb" value="http://www.coursesweb.net" />
 <option label="MarPlo" value="http://www.marplo.net" />
 <option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

<keygen /> tag

Elementul keygen e folosit pentru a genera doua chei (una privata, si cealalta publica) care ofera un mod mai sigur de autentificare a utilizatorului.
Cheia privata este salvata pe calculatorul client, iar cheia publica e trimisa la server.
Suportul navigatoarelor web pentru acest element nu e inca destul de bun pentru a fi utilizat ca un standard de securitate.
Exemplu:
<form action="script.php" id="idf" method="post">
 Utilizator: <input type="text" name="user" />
 Encriptare: <keygen name="security" />
 <input type="submit" value="Submit" />
</form>

<output> </output> tag

E folosit pentru a afisa rezultatul unei operatiuni de calcul, cel mai probabil rezultatul returnat de un script.
Total: <output name="total" onformchange="calc()">0</output>
- Aici, "calc()" poate fi o functie dintr-un script JavaScript.
HTML5 - Tag-uri Noi <<-- Anterior --- Urmator -->> HTM5 canvas

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
HTML5 - Elemente si atribute noi in formular - Tutoriale HTML