El Noguer

La última beta del Firefox 4 ja implementa bona part de l’especificació dels nous formularis per HTML 5.

Què vol dir això per l’usuari? Que a partir d’ara els programes d’Internet funcionaran de forma semblant, quan s’hagi d’informar una data, una adreça de correu, un telèfon, … 

Què vol dir això pels desenvolupadors de pàgines web? Doncs que s’ha acabat  haver de programar en Javascript un munt de coses simplement perquè el llenguatge HTML és molt limitat.

S’ha acabat escriure en Javascript un validador per a camps data, un validador per a camps adreça de correu, un validador per a URLS, …

Ara tot s’escriu amb

<input type="search">
<input type="tel">
<input type="url">
<input type="email"> 

<input pattern="[0-9][A-Z]{3}" >

S’ha acabat escriure tags DIV sense contingut on després d’enviar el formulari aparegui el missatge d’error. Ara es fa amb:

<output for="i1 i2">

S’ha acabat haver de vincular un camp INPUT amb un SELECT per implementar un camp ComboBox, ara es pot fer fent:

<label>Enter a city: <input list="cities"></label>
<datalist id="cities">

S’ha acabat haver de posar el focus al primer del camp manualment. Ara es pot indicar fent

<input autofocus>

O si es vol posar un exemple del valor que es pot introduir en un camp es pot fer

<input name="data" placeholder="11-12-2009">

INPUT:-moz-placeholder { ... estil ... }

en comptes de 

<input name="data" > <span class="placehnolder">ex: 11-12-2009</span>

A partir d’ara els camps INPUT podran anar a fora del formulari que fan referència

<input type="search" name="search_field" form="search_form">

I podran modificar l’acció del formulari segons el botó

<input type="submit" formaction="previsualitza.php" formmethod="get" value="PREVISUALITZA">

<input type="submit" formaction="envia.php" formmethod="post" value="ENVIA">
 

O coses tant bàsiques com indicar quin camp és opcional o quin és obligatori:

<input type="text" required>

I donar-los un estil diferent:

Finalment l’HTM5 també donarà una protocol estàndard pel tractament de la validació dels camps del formulari.

Quan l’usuari introdueix valors als camps del formulari i s’equivoca, el camp en qüestió canvia d’estat a Invalid.

Els camps invàlids es poden  ressaltar via CSS de forma ben senzilla. 

INPUT:invalid {border-color: red; }

INPUT:valid {border-color: green; }

Fixeu-vos que fins ara no s’ha escrit ni una línia de codi Javascript. Però si per alguna raó es necessita fer un validar en Javascript. Es pot controlar l’estat de validesa del camp fent:

 campContrasenya.setCustomValidity("Contrasenya incorrecte");

Tweet