En el post de hoy voy a hacer una introducción a los formularios de HTML5 que vienen con muchas nuevas funcionalidades pensadas para solucionar problemas cotidianos de forma declarativa con la nueva especificación del lenguaje.
Aunque hemos dedicado los primeros artículos sobre la nueva especificación del lenguaje HTML a hablar de las etiquetas relacionadas con el mundo multimedia, no solo de multimedia vive el desarrollador y en la nueva especificación se trata de forma estrecha la mejora de los formularios web para hacerlos más asequibles y sencillos de utilizar.
En esta introducción a los formularios de HTML5 vamos a hablar de varias de las novedades que atañen a los cambios más significativos a la hora de generar formularios y en siguientes entregas de éste mismo artículo hablaremos sobre el resto. Los cambios son bastantes y un solo artículo no da para describirlos todos en detalle por lo que dividiré éste artículo en varios.
Breve historia del diseño de formularios
JavaScript ha sido utilizado históricamente para mejorar el comportamiento de los formularios web al igual que para hacer rollovers con imágenes (cambiar una imagen cuando pasamos el cursor por encima de ella). El usar rollovers pasó a mejor vida en cuanto que la pseudo clase :hover de CSS entró en escena.
Esto se ha convertido en una regla no escrita en ninguna parte. Cuando una técnica o patrón se hace lo suficientemente popular, primero aparecen herramientas que crean una suerte de estandarización basada en scripts, para evolucionar posteriormente a algo más declarativo y soportado en el lenguaje por defecto. Por eso precisamente CSS3 introduce cada vez más habilidades de animación y efectos gráficos que anteriormente necesitaban de JavaScript.
HTML5 sigue la misma regla no escrita y viene al rescate para ofrecer una forma más inteligente de trabajar con formularios, integrando funcionalidad para la que antes era necesario el uso de JavaScript de forma declarativa e integrada directamente en los elementos de la especificación. Éstas especificaciones formaban parte originalmente de las especificaciones de la WHATWG y fueron bautizadas como Web Forms 2.0, basadas en un trabajo previo de la W3C.
Novedades
Vamos a empezar a hacer un recorrido por algunas de las novedades intentando explicar el por qué han sido añadidas a la especificación de forma declarativa.
Placeholder
Una receta típica usada mucho en formularios de búsqueda es la que sigue:
-
Cuando un campo no tiene valor, insertamos un placeholder (marca de posición) en él.
-
Si se focaliza dicho campo, se elimina el placeholder de él.
-
Si abandonamos el campo sin añadir ningún valor, se vuelve a añadir el placeholder en él.
Normalmente el placeholder suele mostrarse en un tono más claro que un valor válido del formulario. Esto siempre ha requerido del uso de JavaScript para ser llevado a cabo, pero con la nueva especificación de HTML5 este comportamiento puede definirse de esta forma tan sencilla:
Esto es sencillamente maravilloso y nos ahorrará mucho tiempo de definir acciones en JavaScript que ya no serán necesarias nunca más, si tu navegador soporta Web Forms 2.0 puedes ver una demo live a continuación:
¿Y qué pasa con los que no lo soportan?
Como profesionales que somos, no podemos nunca olvidarnos de aquellos que aún no soportan estas nuevas funcionalidades. Debemos ser capaces de ofrecer el mismo contenido con la misma experiencia de usuario independientemente del navegador y tecnologías que el cliente utilice. Por eso tenemos un as en la manga reservado para ofrecer la misma funcionalidad con nuestros viejos métodos JavaScript para todos aquellos navegadores que aún no entienden el atributo placeholder.
El truco consiste en programar una función en JavaScript que determine si el navegador del cliente soporta o no un nuevo atributo y que actúe en consecuencia:
function elSupports(el, attr) {
var telement = document.createElement(el);
if (attr in telement) {
return true;
} else {
return false;
}
}El código anterior crea un elemento "el" en memoria y determina si el prototipo del elemento contiene una propiedad con el mismo nombre que el atributo "attr". La función devolvera true si la propiedad se encuentra en el elemento, o false de cualquier otra manera.
Usando ese método podemos asegurarnos de que si proveemos de una solución en JavaScript para nuestros placeholders solo será aplicada por aquellos navegadores que aún no soportan el nuevo atributo:
if (!elSupports('input', 'placeholder')) {
/*
* Un monton de codigo JavaScript fantastico
* que emule el comportamiento nativo
*/
}Autofocus
Esta receta es usada por ejemplo en la página principal de Google. Cuando accedemos a Google el foco siempre lo acapara el input de búsqueda. Esto se ha programado siempre en JavaScript usando el análisis siguiente:
-
Cuando el documento carga, automáticamente se pone el foco sobre un elemento específico.
Esto se hace de forma muy simple en HTML5 a través de un atributo booleano llamado autofocus:
Este comportamiento arrastra consigo una problemática que es la de que hay gente que utiliza el espacio (por ejemplo) para avanzar el scroll de la página en lugar de utilizar el ratón o Av Pág y cuando están en una página con autofocus acaban con un formulario lleno de espacios y una cara de WTF! que no tiene parangón. Esa es la causa principal por la que Twitter decidió eliminar ese comportamiento de su nuevo cliente y ahora para escribir en el campo de estado debes poner el foco en él primero, supongo que las quejas que recibieron por el autofocus fueron considerables.
Como con todo, este nuevo atributo puede usarse de forma inteligente o de forma abusiva, todo dependerá de lo que haga cada programador y de la usabilidad que pretenda dar a sus proyectos. Al igual que con el atributo placeholder, podemos usar la función anterior en JavaScript para ofrecer la funcionalidad basada en scripting a todos aquellos navegadores que aún no soporten el nuevo atributo:
if (!elSupports('input', 'autofocus')) {
document.getElementById('search_string').focus();
}Autocomplete
Con el tiempo, los navegadores web han ido implementando nuevas funcionalidades y mejoras. Algunas de ellas centradas en mejorar la experiencia de usuario, la accesibilidad, la usabilidad o la seguridad. Una de ellas es la habilidad de la inmensa mayoría de los navegadores modernos de auto completar algunos campos de los formularios. Esta funcionalidad puede resultar muy útil o ser una auténtica pesadilla. Sobre todo, si alguien nos roba nuestro portátil o dispositivo móvil.
La nueva especificación de HTML5 nos permite desactivar el auto completado en un formulario completo o solo en campos específicos. El atributo autocomplete nos permite definir dos valores en él: "on" o "off":
El código anterior desactivaría el auto completado de todo el formulario. Si por el contrario solo queremos desactivar el auto completado de un solo campo podemos especificarlo así:
No existe contrapartida a este comportamiento en JavaScript para navegadores que no soportan el nuevo atributo y lo cierto es que este nuevo atributo de la nueva especificación de HTML5 es un tanto extraño visto desde la perspectiva de que no añade o mejora una funcionalidad sino que bloquea un comportamiento de los navegadores.
Si existe en la nueva especificación es porque es necesaria por el problema de seguridad que conlleva el auto completado de ciertos campos en ciertos formularios.
Y con este atributo llegamos al final de esta entrada. En próximas entradas seguiré hablando de nuevos elementos y comportamientos a los formularios en HTML5.
En Genbeta Dev | Introducción a HTML5
