Tip:
Highlight text to annotate it
X
Hola a todos. Mi nombre es Mar Martínez, soy experta en E-learning y estándares web,
y trabajo en la Oficina de Armonización del Mercado Interior.
En el siguiente vídeo os voy a presentar algunas de las nuevas funcionalidades que
HTML5 incorpora para la gestión de los formularios. Antes de comenzar, deciros que podéis contactar
conmigo en la dirección de correo: mmar.martinez.carrascosa@gmail.com Además mi cuenta de Twitter relacionada con
el tema es @Mar_Martinez_C 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. 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.
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 y con los siguientes tipos de : 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. 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.
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
: number, range, date, datetime, datetime-local, month, time y week.
El atributo “step” especifica los intervalos numéricos válidos para un elemento .
Este atributo puede ser usado junto con los atributos “max” y “min” para crear
un rango cerrado de valores válidos de un campo.
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 : number, range, date, datetime, datetime-local, month, time y week.
El atributo “pattern” permite validar un elemento 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.
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 : text, search, url, tel, email, y password.
El atributo “Placeholder” permite que se muestre una pista o ejemplo de lo que el
usuario debe introducir en el campo de entrada, ya sea mediante un valor representativo o
mediante una descripción corta del formato esperado en el campo.
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 : 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.
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.
Y hasta aquí el video tutorial “HTML5: Nuevas funcionalidades en formularios (2ª
parte)”. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo
web” que está disponible en la dirección “idesweb.es”.
Espero que toda esta información te sea útil. Muchas gracias por tu atención y hasta pronto.