Validació de formularis amb HTML5

Un dels aspectes més comentats com a gran millora de l’HTML5 és la validació de formularis a la banda del client. És a dir, és una primera comprovació, però recordeu que sempre s’ha de fer també a la banda del servidor. En aquest article veurem les opcions que ens dóna aquest nou tipus de validació de formularis.

Primer de tot, veurem quins són els nous tipus d’entrada per als formularis:

1. <form>
2. <p><label>Nom: <input name=nom required></label></p>
3. <p><label>E-mail: <input name=email type=email required></label></p>
4. <p><label>URL: <input name=url type=url></label></p>
5. <p><label>Missatge: <textarea name=comment required></textarea></label></p>
6. <p><input type=submit value=ENVIAR></p>
7. </form>

Així mateix, podem definir estils diferents per a cada un dels estats en què es troaba aquella entrada:

1. input:required { … }
2. input:disabled { … }
3. input:checked + label { … }
4. input[type=button]:default { … }
5. input:invalid { … }
6. input:read-only { … }

A continuació aquest codi en funcionament:

Realment és molt còmode per fer una primera validació sense haver d’escriure res de JavaScript. De moment tot el què he provat d’HTML5 funciona molt bé!

Font de l’article: Dev.Opera

Tags: HTML5, Web

Articles relacionats

Esborrar nodes del DOM en PHP

Deck.js – Presentacions en HTML5

Mozilla presenta WebAPI

OOCSS (2a part), profunditzant en els widgets

La setmana a Twitter