HTML5: Nuevas funcionalidades en formularios.

Una de las características más importantes del nuevo standar HTML5 son los nuevos elementos para el manejo de los formularios. Ya que nos permite gestionarlos de manera nativa, y por lo tanto podemos prescindir de javascript para realizar algunas validaciones del formulario por parte del cliente.

Los formularios no se enviarán si no son válidos y permitirá que el usuario vuelva a introducir los valores que no eran correctos.

Nuevas funcionalidades del atributo type en la etiqueta <input>:

• url, tel, email, number, color, search, range, datetime, datetime-local, date, month, week, time.
• vista de los tipos de input en los dispositivos móviles. Modificando la apariencia del interfaz táctil en función de los datos que tengamos que rellenar.

Ejemplos:

url: <input type="url" name="url">

tel: <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{2}" />
La variedad de teléfonos es muy amplia por lo que debemos especificar un patrón determinado. En teléfono móviles podría mostrarse la agenda para seleccionar un teléfono.

number: <input type="number" name="number" min="1" max="5" value="2" />

Se pueden asignar restricciones de números mínimos y máximos así como un valor predeterminado value  

color:  <input type="color" name="favcolor" value="#123456" />
En teoría sirve para seleccionar colores. value nos indica el color seleccionado por defecto. (no me ha funcionado en firefox y safari).

search: <input type="search" name="buscador" />
Aparece una cruz que permite borrar la palabra de búsqueda.

range: <input type="range" name="rango" min="1" max="10"/>
Consta de una barra deslizable que asigna valores en un intervalo definido.

datetime: <input type="datetime" name="fechahora" />
Permite seleccionar hora completa además de dia, mes y año. Incluye la zona horaria.
(no me ha funcionado en firefox y safari).

datetime-local: <input type="datetime-local" name="fechahora" />
Igual que el anterior pero sin incluir la zona horaria.

date:  <input type="date" name="fecha" />
Permite seleccionar el día mes y año.

month: <input type="month" name="mes" />
Permite seleccionar un mes y un año específicos.


week: <input type="week" name="semana" />
Permite seleccionar una semana y un año específicos.

time: <input type="time" name="hora" />
Permite seleccionar horas y minutos.

Los navegadores que actualmente no soportan estos valores tomán estos tipos por defecto como: <input type="text" />

 En el año 2014 el HTML5 será recomendado oficialmente por W3C a partir de 2014.

La información de este post se ha extraido del video del curso idesweb.