HTML5-Formularios(IV). Mas type

Ya hemos visto todo lo que se puede hacer con los nuevos campos para la gestión de fecha y hora, y a partir de ahora, nos podremos ahorrar mas de una rutina javascript. En este articulo, veremos una coleccion de campos orientados al filtro de datos, y aunque seguiremos necesitando filtros en el lado servidor, puede que nos ahorremos muchos del lado cliente.

Los siguientes valores del atributo «type«, hacen que nuestros campos controlen el contenido de la entrada, y sean capaces de generar mensajes de error.

• color – Paleta de colores
• email – Dirección de correo electrónico
• number – valor numérico
• range – barra de valores numéricos
• search – Buscar palabras
• url – Dirección de Internet

Vamos a irlos revisando.

type=»number»

Nos crea un campo de entrada, en donde solo se aceptaran valores numéricos; ademas acepta los atributos:

• max – establece el valor máximo
• min – establece el valor mínimo
• step – filtra el valor entrado por pasos, por defecto es 1

< input name=»importe» type=»number» />

< input name=»piso» type=»number» min=»0″ max=»20″ />

type=»range»

Otro de esos controles que han sido emulados de mil formas, y por fin lo tenemos directamente. Se trata del control deslizante, que sirve para introducir valores numéricos.

El control, tiene su presentación normal, en horizontal, pero con un poco de CSS, lo podemos pasar a vertical

Los controles están definidos en las lineas 11 y 14, y antes de enseñaros el CSS, quiero destacar varias cosas.

• Los labeles de los campos, los hemos relacionado con su campo, por eso decimos «label for=» e indicamos el nombre del campo, acabamos de mejorar semántica y accesibilidad.
• Para conseguir que me aparezca la escala, al lado del deslizante, he utilizado un «datalist», ademas vemos que un mismo datalist me vale para los dos.
• He utilizado el mismo «step» que mi escala de «datalist», pero no hubiera sido necesario, sin step, el range se desplaza suavemente, ya es cuestión de gustos

Y aqui, teneis la clase que utilizo en la linea 11 para conseguir que range se ponga vertical

En el estilo, veréis que he aplicado un «margin-top» para forzar que el control baje, ya que si no, aparece demasiado alto, y no se ve el principio, y el giro, lo hago con una de esas preciosas transformaciones que nos aporta CSS3, «rotate(90deg)». Mas sencillo, imposible. El resto de las lineas es para garantizar la compatibilidad entre navegadores…todo no podía ser bueno

Y si esto os parece genial, os invito a que modifiquéis estas lineas:

En la linea 14, he utilizado un atributo que no habíamos comentado, porque corresponde a detección de eventos, y dentro, le he añadido un poco de javascript.

En este mundo, todos las etiquetas del DOM, son objetos, y sus atributos propiedades, por lo que si digo:

olumen.value=volh.value

Significa que tomo el valor(value) del objeto «volh» (el input name=»volh»), y lo asigno como valor al valor del elemento «volumen» (la etiqueta «output» que he añadido en la linea 15, con nombre «volumen»

Modificar la pagina y probarla. Pero recordad que solo hemos actuado sobre el «volumen horizontal», os animo a que lo hagáis también sobre el vertical, pero acordaros que en una pagina no pueden haber dos nombres iguales.

Tambien podéis probar con esto. (averiguad lo que hace):

onchange="volumen.value=value"

type=»search»

Campo pensado para búsqueda; el formulario entero en el que se encuentra este campo, se envía al hacer un «intro«.

Se trata de un campo de texto con características semánticas que permiten que los navegadores puedan aplicarle estilos concretos, completarlo con búsquedas anteriores,…

type=»tel»

Campo de texto destinado a contener un numero de teléfono. El tipo solo establece propiedades semánticas, y ningún filtro; es necesario apoyarnos en otros atributos para comprobar lo que contiene.

La importancia del tipo, viene dada porque al conocer el navegador su significado, lo puede utilizar para la realización de acciones concretas, y por ejemplo, en un teléfono móvil, pasará a utilizar el teclado telefónico al recibir foco.

type=»email»

Campo de texto en donde se filtrara el formato de dirección de correo electrónico. En los teléfonos móviles conmuta al teclado con el símbolo de @

type=»url»

Campo de texto para direcciones URL. Se filtra que el dato contenga texto con formato de URL

type=»color»

Campo para seleccionar colores, Si el navegador lo soporta, abre la paleta de colores para que podamos indicar el que deseemos.

 

Recordad que podéis tener problemas con muchos navegadores, porque no hayan implementado todavía estos types, os recuerdo lo que hablamos en el articulo anterior sobre «modernizr», para que vuestras paginas sean compatibles.

Con esto, esta todo dicho sobre types….de momento. En el siguiente artículo, veremos otras etiquetas (antiguas y nuevas) que nos ayudan a trabajar con formularios.