HTML5.- Construyendo Formularios en WebMatrix Parte 2


PlaceHolder

Es un nuevo atributo que se utiliza dentro de la etiqueta input. Sirve para mostrar un texto dentro del input como funciona al darle la respectiva variable a este atributo presentara la misma siempre y cuando el campo esté vacío o no esté con focus. En cuanto se haga clic dentro del campo (o se llegue por el TAB), el texto desaparecerá . Vale la pena rescatar que antes para realizar este tipo de marcado era necesario JavaScript.

 

Antes con JavaScript

image_thumb17

 

image_thumb61

 

Ahora con el poder de HTML5

 

image_thumb41

 

image_thumb22

 

Actualmente no es compatible con el navegador IE9, presentando un <input> normal como si no se empleara el atributo respectivo.

 

Required

Este atributo se especifica dentro de los formularios que <input> son requeridos o obligatorios. Dependiendo de la forma de llevar el código se puede especificar esto de dos maneras.

image_thumb35

image_thumb23

 

Autofocus

Con forme vamos avanzando te puedes ir percatando que con la llegada de HTML5 va eliminando el uso de JavaScript innecesario haciendo nuestro tiempo de desarrollo más simple y limpio para dedicarnos en las partes más importantes. Ahora si necesitamos que uno de nuestros <input> tenga un focus vale solo aplicar el atributo autofocus esto hará que al cargar la página el cursor se posiciones en dicho input.

 

image

 

image_thumb56

 

Pattern

Ahora con este atributo podemos insertar una expresión regular directamente en nuestros <input> para filtrar el ingreso de lo proporcionado por el usuario.

 

image_thumb82

 

image_thumb75

 

En caso de no estar familiarizado con la definición de lo que es una expresión regular te recomiendo que revises el siguiente articulo en wikipedia.

A continuación les dejo los fuentes de los ejercicios: placeholder, autofocus, required y pattern.

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas en formspring o déjanos tu comentario Wink

No olvides seguir en twitter a:

Para estar al día con las entradas de la comunidad Avanet.

Anuncios

Un comentario en “HTML5.- Construyendo Formularios en WebMatrix Parte 2

Los comentarios están cerrados.