Cuando uno habla de formularios, se refiere también a  la interacción entre los usuarios y una aplicación web, basada en la introducción de datos de entrada. En muchas ocasiones, la entrada de datos puede convertirse en una tarea tediosa para los desarrolladores, quienes tienen que buscar que métodos son los mejores para introducir datos de una manera intuitiva y validarlos por medio de la programación.

Es frecuente ver, en aplicaciones web medianamente bien realizadas, rutinas de validación de datos que permiten al usuario rellenar los formularios con la información correcta. El trabajo para la validación de los datos generalmente se realiza con un lenguaje del lado del cliente como Javascript, aunque algunos prefieren lenguajes de servidor para validar datos.

Gracias a HTML5 los desarrolladores hemos ganado unas importantes herramientas para validar datos en un formulario, de una forma más fácil, con menos rutinas de código. Incluso en algunos casos no es necesario siquiera hacer nada de JavaScript, pues existen mecanismos para verificar la corrección de los datos, con solo un poco de HTML.

Doce tipos nuevos de INPUT para mejorar el trabajo con formularios

Para los que en algún momento sintieron que los INPUT disponibles en los formularios clásicos se quedaban cortos, HTML5 tiene la respuesta. A decir verdad, muchos habremos podido pensar eso en alguna ocasión, sobre todo cuando hemos tratado de desarrollar aplicaciones dirigidas a dispositivos móviles. HTML5 está pensado para ser usado en múltiples entornos, y por tal razón se han credo doce nuevos tipos de INPUT.

A continuación mencionamos cada uno de los doce nuevos INPUT que están presentes en la quinta especificación del lenguaje HTML, con una breve explicación de cada uno.

INPUT tel:
Este tipo de input viene predispuesto con un formato para escribir números telefónicos. En realidad no hace ninguna validación, pero sí se puede implementar una con la nueva API de validación de JavaScript.

INPUT number pre formateado:
Sirve para escribir solo números. En algunos navegadores, cuando se ejecuta el evento onSubmit no se hace el envío en caso que el campo number esté lleno de caracteres que no sean numéricos.

INPUT  search:
Además de proporcionar un campo de entrada, se le agrega un icono de búsqueda para distinguirlo de un campo de navegación.

INPUT  color:
Este input nos brinda una paleta de colores donde el usuario puede escoger un color de forma dinámica. Es lo que llamamos un colorpicker, con la particularidad que nos lo ofrece el propio navegador.

INPUT  range:
Proporciona un control que se desliza, cambiando automáticamente el valor del campo.

INPUT  URL:
Este tipo de entrada viene con un formato para URL absoluta.

INPUT email:
Tiene la capacidad de aceptar únicamente direcciones de correo electrónico. Además,  se pueden enviar varios email separados por comas, si tiene especificado el atributo multiple.

INPUT  datetime:
Para obtener fecha del conjunto de la zona horaria UTC.

INPUT  date:
Para introducir una fecha que no haga parte de del conjunto horario.

INPUT  month:
Para introducir meses del año.

INPUT  week:
Ofrece una utilidad para escribir y captar información de semanas.

INPUT  time:
Obtiene información con horas, minutos y segundos.

Tipo datetime-local:
Recibe la hora local del dispositivo.

Más allá de los nuevos INPUT: nuevos atributos

Con todos los nuevos tipos INPUT se logra un gran avance con respecto a los formularios clásicos de la web. Algunas de las ventajas pueden ser observables en dispositivos touch (con pantallas táctiles).

Si bien los nuevos INPUT son revolucionarios, también existen varias ventajas que nos traen diversos nuevos atributos, venidos también a raíz de la evolución de los formularios de HTML5. Con esos atributos nuevos podemos  hacer cosas  realmente interesantes sin mayores problemas. En este artículo vamos a realizar un ejemplo con dos de ellos.

Atributo placeholder:
Sin duda habrás visto en muchas ocasiones un efecto efecto sobre los campos INPUT, en páginas como Twitter, donde hay un texto que indica la información que el usuario debe ingresar. Al situar el foco encima del campo, ese texto desaparece para que el usuario escriba lo que desee. Pues bien, ese efecto se consigue con el atributo placeholder de una manera inmediata. Podemos ponerlo en práctica con un código como el siguiente.

<input type="text" placeholder="Ingrese el nombre">

Solo hay asignar al atributo placeholder el texto que deseamos que aparezca en el INPUT, y una vez se situe el foco en el campo de texto, simplemente desaparece.

Atributo autofocus:
El efecto logrado mediante el atributo autofocus es igual al de las páginas de búsqueda como Google, donde al cargar la pagina el foco de la aplicación ya se encuentra en un INPUT. Su uso sería tan simple como este.

<input type="search" style="border-color:#12c5a1" autofocus>

Para mayor  claridad os dejamos un ejemplo básico con estos atributos asignados a campos INPUT.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Prueba1</title>
<style>
input{
border-radius:7px;
border-color: #cfc;
}

</style>
</head>
<body>

<input type="text" placeholder="Ingrese el nombre">
<input type="search" style="border-color:#12c5a1" autofocus>
</body>
</html>

En futuros artículos usaremos más utilidades de los formularios HTML5.