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://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://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://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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
HTML5 - Elemente si atribute noi in formular

Last accessed pages

  1. Trecutul nedefinit si Imperfect Recapitulare (28)
  2. Number Lines (623)
  3. Viitor simplu - Exercitii si teste incepatori (335)
  4. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (3921)
  5. Notiuni fundamentale despre bazele de date SQL (514)

Popular pages this month

  1. Bubbles3 (3095)
  2. Gramatica limbii engleze - Prezentare Generala (2931)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2164)
  4. Butterfly Kyodai (2012)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1827)