Las mejoras de los elementos INPUT de HTML5

  • Por
Una breve descripción de las nuevas características presentes en los elementos de formulario INPUT en HTML5.
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.

Nota: No siempre es recomendable validar los datos en el servidor, por el abuso de transacciones HTTP que pueden producirse. Por ello, el mejor método para la validación es JavaScript en el lado del cliente, o una mezcla entre ambas arquitecturas, cliente y servidor. Lamentable hay quienes no reconocen las bondades del lenguaje de programación del lado del cliente estándar, Javascript, aunque esto poco a poco va pasando a la historia y ahora más con el HTML5.

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.

Nota: Aunque pueda parecer que no tiene demasiada importancia la creación de todos estos tipos de INPUT nuevos, podemos decir que es un gran paso adelante. Aun más ahora, que se pueden desarrollar aplicaciones nativas para dispositivos, con ayuda de  algunos framework como Titanium o Phonegap, del que publicaremos un manual  en Desarrolloweb.com muy pronto. Incluso, como exploraremos también en este sitio, con HTML5 vamos a poder crear aplicaciones nativas en Windows 8. Como puede  verse con el nuevo lenguaje de la web se nos abren nuevos horizontes y todas estas nuevas implementaciones serán muy utilizadas en todos esos nuevos entornos de aplicaciones.

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).

Nota: Si quieres ver los nuevos INPUT funcionando en navegadores de escritorio, recomendamos usar la última versión de Google Chrome (la versión 13 en adelante debería funcionar). Firefox también puede servir, puesto que se actualiza bastante rápido.

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.

Autor

Dairo Galeano

Desarrollador independiente

Compartir

Comentarios

serlumo

20/4/2012
Varias correcciones
"No siempre es recomendable validar los datos en el servidor, por el abuso de transacciones HTTP que pueden producirse". Totalmente incorrecto: todo lo contrario, SIEMPRE hay que validar en el servidor, si sólo confías en la validación del cliente, esa validación es muy fácil de saltar y te pueden enviar datos incorrectos.

"Si quieres ver los nuevos INPUT funcionando en navegadores de escritorio, recomendamos usar la última versión de Google Chrome (la versión 13 en adelante debería funcionar). Firefox también puede servir, puesto que se actualiza bastante rápido". FALSO: el mejor navegador para probar todo esto es Opera. Por ejemplo, el control date no funciona ni en Chrome ni en Firefox.

nico_delagente

20/4/2012
Muy bueno gracias
no sabia lo de placeholder :)

Fer

04/6/2012
Nuevas etiquetas INPUT
En Firefox 12.0 no funciona ninguna de las 12 etiquetas mencionadas. En QupZilla 1.2 algunas de ellas funcionan perfectamente.

dario

08/6/2012
Sobre el articulo
Me parece muy bueno y aclaratorio aunque debo reconocer que hay inputs que reconoce mozilla (version 13) y que no reconoce opera (version 11.50) y viceversa, como por ejemplo input emai.
Un abrazo a todo el equipo de desarrolloweb.

Luis Mata

16/7/2012
Validacion del lado del servidor
Ahi deberia de ser, ya que si todo lo haces en el server el lado del cliente puede ser cambiado lo mas rapido si es malo...

key975

27/5/2014
En desacuerdo
Mozilla no acepta el input date, es decir, no muestra el calendario para seleccionar la fecha, en cambio Chrome sí.