4.12 HTML5: Nuevas funcionalidades en formularios (parte 1)
Objetivos:
En el siguiente vídeo se presentan los nuevos controles de HTML5:
- url.
- tel.
- email.
- number.
- color.
- search.
- range.
- datetime.
- datetime-local.
- date.
- month.
- week.
- time.
Además, se comenta el soporte por parte de los navegadores y se muestra la representación de algunos controles en dispositivos móviles.
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 siguiente tabla extraída de la página web del w3C, podemos ver la lista de estados disponibles para el atributo “type” en HTML5.
En esta primera parte del vídeo tutorial vamos a centrarnos en algunos de los nuevos estados del atributo “TYPE” del elemento “input”. Al final del vídeo además veremos 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 la segunda parte del vídeo tutorial lo que veremos son algunos de los nuevos atributos de contenido que introduce HTML5, y además hablaremos brevemente de Modernizr y de los Polyfills.
Aquí podéis ver una tabla con todos los nuevos valores para input type que vamos a analizar en este primer videotutorial (url, tel, email, number, color, search, range, datetime, datetime-local, date, month, week, time).
En cuanto al tipo de input “url”, como se puede deducir, se usa en aquellos campos que deban contener una dirección web. El valor del campo “url” es automáticamente validado cuando el formulario es enviado. <input type="url" name="url"/>
En el ejemplo podemos ver cómo el sistema informa al usuario de que la url introducida no tiene un formato correcto.
El tipo de input “tel” se usa para definir campos en los que se deba introducir un número de teléfono. Dada la variedad de formatos que existe en todo el mundo para los números de teléfono, este tipo no impone una sintaxis o patrón determinado, así que para validarlo como un formato numérico en particular se debe complementar con “pattern”, un atributo de contenido que veremos en detalle en la segunda parte del video tutorial, y que se basa en expresiones regulares. <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{9}"/>
En el ejemplo podemos ver cómo el sistema informa al usuario del error cometido al introducir el número de teléfono.
Cabe destacar que este tipo puede ser útil para el caso de teléfonos móviles, porque se puede crear un autocompletado con el número del teléfono en cuestión e incluso se puede mostrar la agenda del teléfono móvil para seleccionar un número almacenado.
El tipo de input “email” se usa para definir campos en los que se deba introducir una dirección de correo electrónica válida. <input type="email" name="email"/>
En el ejemplo podemos ver cómo el sistema informa al usuario de que la dirección de correo electrónica introducida no tiene un formato correcto.
El tipo de input “number” se usa para definir campos en los que se deba introducir un valor numérico. Este campo puede contener atributos que permitan realizar restricciones sobre el número, por ejemplo, definiendo un valor mínimo o máximo mediante los atributos “min” y “max” (de los que hablaremos en la segunda parte del video tutorial),
o asignándole un valor específico por defecto, mediante el atributo “value”. <input type="number" name="cantidad" min="1" max="5" value="2"/>
En el ejemplo podemos observar que al asignarle un valor por defecto, éste aparece automáticamente al mostrarse el campo.
El tipo de input “color” se usa para definir campos en los que el usuario puede seleccionar un color desde una paleta de colores. Le hemos asignado un color azul marino de base mediante el código hexadecimal, aunque si no se define un valor, por defecto adquiere el color negro.
<input type="color" name="favcolor" value="#123456"/>
El tipo de input “search” se usa para definir campos de búsqueda en formato de texto, adquiriendo un aspecto gráfico más adecuado a su función. <input type="search" name="buscador"/>
Como se puede observar en el ejemplo, al introducir texto en este campo, el navegador muestra una cruz a la derecha que permite al usuario borrar todo lo escrito hasta el momento.
El tipo de input “range” se usa para definir campos que deban contener un valor numérico que esté dentro de un rango específico, rango que definimos con los atributos “min” y “max”, de los que hablaremos en la segunda parte del video tutorial.
También podemos usar otros atributos como por ejemplo “value” para darle un valor por defecto, o el atributo “step”, del que también hablaremos en la segunda parte del video tutorial, y que sirve para definir los intervalos en los que puede variar el valor.
<input type="range" name="puntos" min="1" max="10"/>
El tipo de input “datetime” permite al usuario seleccionar la hora completa además del día, mes, año y zona horaria. <input type="datetime" name="fechahora"/>
El tipo de input “datetime-local” permite al usuario seleccionar la hora completa más el día, mes y año, pero en este caso, a diferencia del anterior, no se incluye la zona horaria.
<input type="datetime-local" name="fechahora_usuario"/>
Si la zona horaria no es importante para tu aplicación, usa este tipo (datetime-local) en lugar de datetime.
El tipo de input “date” permite al usuario seleccionar una fecha completa formada por día, mes y año. <input type="date" name="fecha"/>
El tipo de input “month” permite al usuario seleccionar un mes y un año específico.
<input type="month" name="mes"/>
El tipo de input “week” permite al usuario seleccionar una semana y un año específicos.
<input type="week" name="semana"/>
El tipo de input “time” permite al usuario seleccionar la hora, en formato de horas y minutos.
<input type="time" name="hora"/>
En la siguiente tabla, podemos ver todos los valores de input type que hemos analizado en este vídeo, y qué navegadores los soportan hasta el momento de ser grabado.
Como se puede observar, no todos los principales navegadores soportan todos los nuevos tipos de input, sin embargo, puedes usarlos de todos modos, ya que, en los navegadores que no estén soportados, estos tipos se comportarán por defecto como un input de tipo “text".
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 a menudo 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.
Hasta ahora hemos tenido en cuenta los navegadores web desde el punto de vista de un ordenador de sobremesa o un portátil. A continuación vamos a ver las mejoras de usabilidad que introducen los tipos de input “tel”, “email” y “url” cuando lo que estamos usando es un dispositivo con pantalla táctil.
Dentro de un formulario, cuando el foco se situé en un campo de tipo “tel”, las pantallas táctiles cambiarán su formato por defecto y se optimizarán para la introducción de un número de teléfono, mostrando un teclado numérico.
Cuando el foco se situé en un campo de tipo “email”, las pantallas táctiles se optimizarán para la introducción de un campo de texto.
En este caso iPhone va más allá, ya que el teclado incorpora la tecla de acceso directo de la arroba (@). En el caso de Android, se usa el tipo de entrada de texto que existe por defecto.
Por último, cuando el foco se situé en un campo de tipo “url”, las pantallas táctiles cambiarán y se optimizarán para la introducción de un campo de texto. Pero en este caso, como ocurría en el anterior, iPhone va más allá e incorpora la teclas de acceso directo de barra inclinada y de “.com”.
En el caso de Android, para url se usa el tipo de entrada de texto que existe por defecto.
En resumen, los dispositivos móviles están incorporando mejoras muy interesantes de usabilidad para el usuario, adaptándose en la medida de lo posible a sus necesidades, ahorrándoles así trabajo y tiempo.
No hay comentarios:
Publicar un comentario