jueves, 19 de mayo de 2011

Formulario en HTML 5 y CSS3

Practicando con nuevas tecnologías encontré estas mancuerna que me dejo sorprendido, y mas por el alcancé que se manejan con ellas, algo similar a lo que nos ofrece AJAX y Flash. En este caso les traigo un formulario creado con puro HTML y CSS, el único inconveniente es que no todos los navegadores lo soportan (Firefox4, Internet Explorer 9, Chrome, Opera), es una lastima que aun no cuenten con el soporte al 100% para esta tecnología de punta.

Bueno lo que les traigo como lo había mencionado es un formulario, donde los primeros campos es decir nombre y apellido tiene un validador con CSS donde nos pone una sombra de color verlo los campos requeridos. continuando con el campo Email, con un otro tipo de validador, en este caso pone un asombra de color  rojo el control donde se escribe, en caso de que estuviera incorrecto o no tenga el formato deseable (Algo similar a un post anterior donde se valida con JavaScript).
Posteriormente sigue un campo fecha, en este caso no se aprecia de forma correcta, ( a decir verdad a partir de este campo ya no se aprecia lo que quería mostrarles a no ser que utilizen Opera como navegador).

Para desgracia o ventaja de muchos estas funciones solo son compatibles con Opera 11.


Se los explicare de forma breve lo que realizan los siguientes campos con los controles input, con diversos tipos de Type.
 
Fecha (type="date"): Despliega un calendario donde se puede escoger la fecha que se refleja en nuestro control.
 Rating (type="range"): Este control puede ser muy útil, ya que nos prime escoger un valor que va de un máximo a un minino sin necesidad de escribirlo.

Escoge un Color (type="color"): Este control en lo particular me agrado mucho, nos ofrece un despliegue como el que trae flash, en el cual nos permite escoger el color que seleccionemos.


¿Que te parece esta Blog? (type="number"): Este control es muy similar al que utilizo en rating, pero nos muestra las flechitas para subir o bajar el numero, de igual forma con un max y min.





Formulario con HTML 5 y CSS 3
Nombre:

Apellido:

Email:


Fecha:


Rating:


Escoge un Color:


¿Que te parece esta Blog?



Espero les halla gustado este post sobre un poco de html, si necesitan el código de este formulario no duden en pedírmelo.

Para visualizar mejor este formulario y vean lo sorprendente que es HTML 5 y CSS 3, les recomiendo instalar Opera 11 en el siguiente link Clic para Descargar.

Atte.
LSCA:. Gustavo Ortiz Gamez.

No hay comentarios:

Publicar un comentario