HTML 5 Básico 3

En el primer capítulo de esta charla sobre HTML5, mencionamos por arriba sobre los cambios en los formularios que incluye el HTML5.

Como norma para todos, un formulario es una etiqueta <form> y en su interior algunos elementos <input type=”text”> o <input type=”password”> finalizado con un botón <input type=”submit”> y ya está. A continuación explicaremos algunas de estas novedades.

Texto como PLACEHOLDER

Placeholder es un nuevo atributo que se utiliza dentro de los campos input. Sirve para mostrar un texto dentro del input siempre y cuando el campo esté vacío o no esté señalado. En cuanto se haga click dentro del campo (o se llegue por el TAB), el texto desaparecerá.

Seguramente ha visto la propieda Placeholder antes. Por ejemplo, Mozilla Firefox 3.5 incluye textos placeholder en la barra de localización.

Ejemplo place holder firefox

Cuando se hace click sobre la barra de búsqueda o se llega por un tab, el texto preestablecido desaparece.

Ejemplo place holder firefox

Irónicamente Firefox no da soporte a esta propiedad, al igual que IE y Opera, solo es compatible (a día de hoy) con Safari y Chrome. Aquellos navegadores que no soporten placeholder simplemente lo ignorarán y no mostrarán nada.

Aquí hay un ejemplo de cómo se puede incluir placeholder en un formulario:

Código:


<form>
  <input placeholder="Buscar en la base de datos">
  <input value="Buscar">
</form>

Ejemplo:

Campos con autofocus

El atributo de autofoco permite al usuario decidir y controlar qué campo de texto debe ser enfocado (señalado, activado) en cuanto la página es cargada o se esté cargando, permitiendo al usuario comenzar a escribir sin tener él que especificar cual es su campo de texto principal en su página. El atributo de autofoco es un atributo boleano (respuesta true – false) y no deberá haber más de un elemento en la página.

Muchos sitios utilizan JavaScript para focalizar y dirigir el cursor automáticamente al campo de texto. Por ejemplo Google cuando comienza a cargar su página dirigirá el cursos a su input de búsqueda automáticamente para que puedas empezar a escribir tus palabras de búsqueda en su navegador. Esto puede ser conveniente para algunos y para otros que pueden tener una necesidad específica no tanto. Si aprietas la barra de espacio esperando que la página baje haciendo un scroll, esto no sucederá porque está enfocado el input del formulario.

HTML5 introduce un atributo de control de autofoco en los formularios. El atributo autofoco hace exactamente lo que suena, en cuanto la web se comienza a cargar, mueve el cursor y así la atención del usuario a un campo <input> particular.

A día de hoy, Autofocus solo lo soportan Safari, Chrome y Opera. Firefox e IE, lo ignorarán.

Código:


<form>
 <input name="b" autofocus>
 <input type="submit" value="Search">
</form>

Ejemplo

En el primer tutorial mencionamos varios de los nuevos atributos de los formularios, y en próximos artículos iremos profundizando en ellos. Ahora les dejo una galería de sitios hechos con HTML5 que podrán inspeccionar viendo el código fuente.
Galería de HTML5

fuente: http://theproc.es/2010/2/21/14057/manual-de-html5-en-espanol—3-de-3

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s