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" />

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" />

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" />

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" />

type="time" - creaza o casuta de formular pentru ora (ora, minute, secunde).

<input type="time" name="currenttime" value="18:12:00" />

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.discant.ro" />

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" />

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" />

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" />

Atribute noi pentru <form> adaugate in HTML5

autocomplete="on | off" - Permite browser-ului sa completeze automat datele in formular (on), sau de fiecare data utilizatorul trebuie sa introduca el insusi datele (off).
- Functioneaza cu <form>, si urmatoarele tipuri <input>: text, search, url, tel, email, password, date-pickers, range, color.
```
<form action="script.php" method="post" autocomplete="on" id="idf">
 Name:<input type="text" name="fname" />
 <input type="submit" value="Send" />
</form>
```
novalidate - (novalidate="novalidate" in XHTML) - Seteaza ca formularul, sau campul input unde e adaugat, sa nu valideze automat datele cand sunt trimise.
- Se poate adauga in <form> si in urmatoarele casete <input>: text, search, url, tel, email, password, date-pickers, range, color.
```
<form action="script.php" id="idf" novalidate="novalidate">
 E-mail: <input type="email" name="email" />
 <input type="submit" value="Send"/>
</form>
```

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="Discant" value="http://www.discant.ro" />
 <option label="Discant" value="http://www.discant.ro" />
 <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 Discant" />

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="Discant" value="http://www.discant.ro" />
 <option label="Discant" value="http://www.discant.ro" />
 <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.