lang="es"> HTML5-Formularios(IV). Mas type
Recursos para formacion

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.

Vamos a irlos revisando.

type=»number»

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

< 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 numericos.

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.

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

En el estilo, vereis 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:

volumen.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»

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 articulo, veremos otras etiquetas (antiguas y nuevas) que nos ayudan a trabajar con formularios.

Salir de la versión móvil