4.13 HTML5: Nuevas funcionalidades en formularios (parte 2)
Objetivos:
En el siguiente vídeo se presentan los nuevos atributos que se pueden emplear en los controles de los formularios:
- autocomplete.
- autofocus.
- min.
- max.
- step.
- pattern.
- placeholder.
- required.
También se explica qué es Modernizr y los polyfills.
Como ya vimos en la primera parte del tutorial, una de las características más importantes que nos trae el nuevo estándar HTML5 son los nuevos elementos disponibles para el manejo de formularios, ya que nos permite gestionarlos de manera nativa, y por tanto se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente. El disponer de controles avanzados nativos facilita mucho el trabajo del desarrollador, porque no se tiene que preocupar por problemas de compatibilidad entre distintos navegadores.
Además esto supone un ahorro de tiempo y de ancho de banda, ya que, por un lado, permite que el formulario NO sea enviado si no es válido, y por otro lado, permite informar al usuario de que alguno de los valores introducidos no cumple los requisitos definidos.
Para los usuarios, los formularios tienen ahora un comportamiento mucho más intuitivo, donde por ejemplo, se pueden mostrar pistas sobre lo que se debe introducir en los campos de entrada... Se puede mostrar un calendario interactivo al usuario para rellenar un campo de fecha o incluso se puede seleccionar un color desde una paleta de colores.
En la primera parte del vídeo tutorial analizamos algunos de los nuevos estados del atributo “TYPE” del elemento “input”. Al final del vídeo vimos brevemente cómo los dispositivos móviles están mejorando su usabilidad para adaptarse a las necesidades del usuario, modificando la apariencia de su teclado táctil dependiendo del tipo de datos que el usuario tenga que rellenar.
En esta segunda parte del vídeo tutorial, vamos a ver algunos de los nuevos atributos de contenido que introduce HTML5, y además vamos a hablar brevemente de Modernizr y de los Polyfills.
En esta lista podéis ver los nuevos atributos de contenido incluidos en HTML5 para el elemento “input” que vamos a analizar.
Alguno de ellos, como ocurre con el atributo “Autocomplete”, se pueden usar además con otros elementos, como el elemento “form”.
El atributo “Autocomplete” nos permite especificar si un formulario completo o un campo de éste debe tener la opción de autocompletado activada o no. Cuando el autocompletado esté activado (es decir, cuando su valor sea “on”), el navegador completará automáticamente el campo con valores que el usuario haya introducido en ese campo en ocasiones anteriores. <form autocomplete="on">
Si se desactiva (asignando el valor “off”) lo que se consigue es prevenir que un campo se autocomplete automáticamente, ya que en muchos casos este autocompletado puede causar problemas, incluso de seguridad. <input type="email" name="email" autocomplete="off">
Es posible tener el autocompletado a “on” en un formulario, y a “off” en uno o más campos dentro del mismo formulario (por ejemplo en el campo de contraseña), y viceversa.
Este atributo funciona con el elemento <form> y con los siguientes tipos de <input> :
- text,
- search,
- url,
- tel,
- email,
- datepickers,
- password,
- range,
- y color.
El atributo “Autofocus” nos permite especificar en qué campo de entrada queremos que se coloque automáticamente el foco cuando se carga la página. <input type="text" name="nombre" autofocus />
Es un atributo de tipo booleano, por lo que no deberemos definir más de un elemento con este atributo en la misma página.
Este atributo puede suponer una ventaja en muchos casos, sobre todo a usuarios de teléfonos móviles, ya que permite al usuario comenzar a escribir de inmediato sin tener que hacer click en el campo, pero por otro lado, supone una desventaja para aquellos usuarios que utilizan la barra espaciadora para moverse hacia abajo por la página, ya que esto no sucederá si el foco está colocado automáticamente en un campo.
Ya que el forzar la colocación del foco puede provocar problemas de accesibilidad y de usabilidad, en caso de usarse, se debe estar seguro de que el campo que lo contenga sea el campo que prácticamente la totalidad de los usuarios vayan a usar en primer lugar.
Por ejemplo, en la página principal de Google, lo más lógico es colocarlo en el campo de búsqueda, ya que en otro caso, estaríamos provocando problemas de usabilidad.
Los atributos “min” y “max” sirven para delimitar un rango de valores numéricos, permitiendo especificar el valor máximo y mínimo para un campo de entrada. El campo no permitirá al usuario introducir un valor por encima del máximo ni por debajo del mínimo. <input type="number" name="cantidad" min="2" max="14" />
En el ejemplo hemos usado el input type number restringido por un valor mínimo y uno máximo (2 y 14 respectivamente). Se puede observar que el sistema no permite incrementar el valor del campo más allá de 14 porque ha llegado al máximo definido.
Estos atributos, min y max, los habíamos visto ya en la primera parte del tutorial en dos ocasiones:
Al analizar el input type “number”,
Y al analizar el input type “range”.
En ambos casos para restringir el valor de un campo numérico.
Estos atributos funcionan con los tipos de <input>:
- number,
- range,
- date,
- datetime,
- datetime-local,
- month,
- time
- y week.
El atributo “step” especifica los intervalos numéricos válidos para un elemento <input>.
Este atributo puede ser usado junto con los atributos “max” y “min” para crear un rango cerrado de valores válidos de un campo. <input type="number" name="puntos" min="2" max="14" step="2" value="2" />
En este ejemplo, donde “step” vale 2, y tenemos definido un valor por defecto (2), un máximo (14) y un mínimo (2), los valores válidos para el campo son 2, 4, 6, 8, 10, 12 y 14.
El atributo “step” funciona con los tipos de <input>:
- number,
- range,
- date,
- datetime,
- datetime-local,
- month,
- time
- y week.
El atributo “pattern” permite validar un elemento <input> en base a una expresión regular (RegEx). Para los que no lo sepáis, Las expresiones regulares son modelos o patrones que describen las combinaciones de caracteres que se pueden introducir en el campo de texto (las que se tomarían como correctas).
Se puede usar el atributo global “title” para ayudar al usuario a comprender lo que debe escribir en el campo. <input type="text" name="prefijo_pais" pattern="[A-Za-z]{3}" title="código de 3 letras"/>
En el ejemplo podemos ver en primer lugar, el efecto de usar el atributo “title” mostrando un tooltip de ayuda, y a continuación, podemos ver cómo un campo que tiene una expresión regular definida avisa al usuario cuando el texto introducido no cumple dicha expresión regular.
El atributo “pattern” funciona con los tipos de <input>: text, search, url, tel, email, y password.
Esta pista se muestra en el campo mientras está vacío, y desaparece, bien cuando el campo recibe el foco (en Firefox por ejemplo) bien cuando se comienza a rellenar el campo (para el caso de Google Chrome).
El atributo “Placeholder” funciona con los tipos de <input>: text, search, url, tel, email, y password.
El atributo “required” es un atributo booleano que, cuando está presente, especifica que el input que lo contiene debe ser rellenado por el usuario antes de enviar el formulario. Es el clásico campo obligatorio, que suele marcarse con un asterisco o con color rojo. <input type="text" name="nombre" required />
El atributo “required” funciona con los tipos de input: text, search, url, tel, email, date pickers, password, number, checkbox, radio, y file.
En la siguiente tabla, podemos ver todos nuevos atributos de contenido que hemos analizado en este vídeo, y qué navegadores los soportan hasta el momento de ser grabado.
Ya que HTML5 no será recomendación oficial del W3C hasta el año 2014, el soporte de las nuevas funcionalidades es muy desigual entre los navegadores, así que conviene consultar algunas páginas web de referencia para conocer el estado de compatibilidad con ellos. Es recomendable consultar más de una y hacer tus propias pruebas en los distintos navegadores y entre sus distintas versiones.
Recuerda que lo que hemos visto en este vídeo se basa en el estado del HTML5 y el soporte que dan de él los distintos navegadores en el momento de ser grabado, y puede cambiar de un día para otro hasta que sea recomendación oficial del W3C en el año 2014.
Antes de finalizar, quería hablaros brevemente de “Modernizr” y de los “Polyfills”.
Modernizr es una micro-librería Javascript que nos permite conocer la compatibilidad del navegador del usuario con las tecnologías HTML5 y CSS3, y en caso de que alguna característica usada en el código no sea compatible con el navegador, Modernizr lo detecta y permite tomar medidas para resolver el problema.
Estas medidas se basan en el uso de los Polyfills, que son librerías Javascript que nos permiten cubrir las capacidades HTML5 y CSS3 que los navegadores no soportan. Lo que hacen es cambiar el HTML5 por otras tecnologías soportadas por el navegador en cuestión, por ejemplo, por Javascript.
En resumen, el código que desarrollemos será estándar HTML5/CSS3 . Modernizr nos permite utilizar el Polyfill (es decir, un fragmento de código en otro lenguaje) solo si es necesario debido a alguna incompatibilidad con el navegador del usuario.
Modernizr ya cuenta con una extensa lista de Polyfills, lo que supone un ahorro notable de trabajo para los desarrolladores.
Vamos a ver muy rápidamente un ejemplo de uso de Modernizr, que podemos encontrar en la página web de Modernizr.
En este ejemplo, lo que se hace en primer lugar es comprobar si la geolocalización es soportada por el navegador. Si lo es, se carga el fichero Javascript o CSS3 que hay en la parte del “yep”, y si no lo soporta, se carga el fichero especificado en el “nope”.
Podéis descargar Modernizr desde esta página: modernizr.com
Además podéis encontrar la lista de los Polyfills más usados en la dirección que se muestra en pantalla.
Actividad
1
En HTML5, ¿qué atributo se emplea para especificar los intervalos numéricos válidos para un elemento input?
2
En HTML5, el atributo que se emplea para que un cuadro de texto sea obligatorio es
3
En HTML5, ¿qué atributo se emplea para mostrar una pista o ayuda de lo que se debe escribir en un cuadro de texto?
4
En HTML5, el valor del atributo pattern tiene que ser
No hay comentarios:
Publicar un comentario