Experto en diseño, HTML/CSS, y encargado de las campañas de marketing online de Axtro. Con años de experiencia en el mundo del diseño, además de formar parte de nuestro equipo realiza cursos de formación en diseño.
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.
Cuando se hace click sobre la barra de búsqueda o se llega por un tab, el texto preestablecido desaparece.
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.
« Ir a la parte 2 del tutorial de HTML5
Para facilitarles la lectura y a sugerencia de algunos usuarios, hemos reunido las tres partes de este tutorial en un PDF que se podrán descargar en el siguiente enlace.
Compartir
Hola como estas un saludo da gusto que tengamos tutoriales en español como este y mas que personas como tu compartan sus conocimientos y se tomen el tiempo en redactarlos en español ya que hay poca info en español sale gracias ^_^
Hola que tal esta excelente tu articulo, una sugerencia, agregalo en un PDF estaria excelente para nada mas bajar e imprimir jejej sale gracias por la informacion ^_^
Hola Oblelich, antes que nada pedirte disculpas por no haberte respondido antes; por aquí no dejamos de trabajar y vamos bastante liados. Quería agradecerte los comentarios y la sugerencia de que colguemos los artículos en PDF. He tomado nota, ya lo he pasado a PDF y espero esta tarde tenerlo colgado. Nuevamente agradecerte que nos sigas e interactúes con nosotros. Un saludo
muy buena la info, para ir empezando a saber de que va el tema esta perfecto!. Un saludo
hey donde puedo conseguir un programa o herramienta que me facilite la implementacion del html 5 porque dreamweaver no me acepta las etiquetas del html 5. espero pronto por su repuesta.
Muchas gracias, me han servido de mucho.
Muchas gracias por compartir informaciòn relamente util.
Verdaderamente interesante y la descripción bien estructurada. Gracias por el aporte, muy elaborado. Hacen falta más documentos en español sobre las nuevas técnicas. Gracias.
Hola, para Danny, revisa en Adobe labs ya existe una actualización gratuita para el Dreamweaver, que ademas de dar soporte a html5 trae una consola de preview para checar como luciria tu pagina en, una computadora, un iPad p un dispositivo movil. No estoy seguro si este upgrade es solo para la cs5. pero seguro en adobe labs debes de encontrar esta info.