Skip to Content »

AutoClear en Formularios HTML

  • 19/08/2008
  • 12:44 am
  • unijimpe

Uno de los métodos mas prácticos para indicar a los usuarios que tipo de información debe ingresar en los formularios es incluir un valor inicial. El siguiente ejemplo ayudará a mostrar valores por defecto los cuales se limpiarán al acceder al campo y volverán a mostrar el valor iniciar si no se ha ingresado información.

Preparando el Formulario
Lo primero es crear nuestro formulario, lo hacemos de la manera normal donde incluimos los valores iniciales que utilizaremos para indicar al usuario que valores ingresar.

HTML:
  1. <strong>Registro de Usuarios:</strong><br />
  2. Nombre: <input type="text" id="name" value="Nombre" /><br />
  3. Email: <input type="text" id="name" value="Email" /><br />
  4. Web: <input type="text" id="web" value="Direccion Web" /><br />
  5. <input name="btsend" type="button" value="Enviar" />

AutoClear Utilizando Javascript
La primero forma es utilizar solamente Javascript, para ello nos hemos basado en el script propuesto en Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus, este script se ejecuta al cargarse la página y recorre todos los elementos input text y guarda el valor inicial del formulario en la propiedad rel, luego agrega los eventos a ejecutarse en onfocus, onblur y ondblclick, en donde se verifica si se ha ingresado algún valor para mostrar la ayuda.

JavaScript:
  1. function init(){
  2.     var inp = document.getElementsByTagName('input');
  3.     for(var i = 0; i <inp.length; i++) {
  4.         if(inp[i].type == 'text') {
  5.             inp[i].setAttribute('rel', inp[i].defaultValue);
  6.             inp[i].onfocus = function() {
  7.                 if(this.value == this.getAttribute('rel')) {
  8.                     this.value = '';
  9.                 } else {
  10.                     return false;
  11.                 }
  12.             }
  13.             inp[i].onblur = function() {
  14.                 if(this.value == '') {
  15.                     this.value = this.getAttribute('rel');
  16.                 } else {
  17.                     return false;
  18.                 }
  19.             }
  20.             inp[i].ondblclick = function() {
  21.                 this.value = this.getAttribute('rel')
  22.             }
  23.         }
  24.     }
  25. }
  26. if(document.childNodes) {
  27.     window.onload = init
  28. }

Este script los colocamos en el header de nuestro HTML y ya tenemos el efecto AutoClear en nuestro formulario, podemos ver el resultado de este ejemplo en autoclear-javascript.html y si desean pueden ver el código fuente para ver como si incluyo el script.

AutoClear Utilizando Mootools
Si estamos utilizando Mootools, podemos reescribir esta función, utilizando los selectores de elementos y llamando a la función en el evento domready el cual es llamado cuando se ha cargado la página.

JavaScript:
  1. window.addEvent('domready', function() {
  2.     inp = $$('input[type=text]');
  3.     inp.each(function(inp) {
  4.         inp.setProperty('rel', inp.value);
  5.         inp.addEvent('focus', function(){
  6.             if (this.value == this.getProperty('rel')){
  7.                 this.value = '';
  8.             }
  9.         });
  10.         inp.addEvent('blur', function(){
  11.             if (this.value == ''){
  12.                 this.value = this.getProperty('rel');
  13.             }
  14.         });
  15.         inp.addEvent('dblclick', function(){
  16.             this.value = this.getAttribute('rel');
  17.         });
  18.     });
  19. });

Nótese que hemos utilizado la función each de Mootools que nos permite recorrer todos los elemento del array que contienen los campos de texto, lo siguiente es agregar los eventos para detectar el focuso blur. Pueden ver el resultado de esta versión en autoclear-mootools.html

Posts Relacionados

CSS Reset

  • 17/08/2008
  • 5:21 pm
  • unijimpe

CSS Reset es una técnica para inicializar todos los estilos que vienen por defecto con los navegadores (margenes, alineaciones, alto de las lineas, tamaños de letra, etc.). La técnica consiste en eliminar completamente los estilos predefinidos por el navegador para luego empezar a trabajar con una hoja de estilos en blanco.

Una vez inicializados o reseteados los estilos, podemos empezar a construir los estilos con la garantía que serán mucho mas consistentes. Hay muchas técnicas para realizar esta eliminación de estilos, desde los muy sencillos hasta los muy completos.

Reset Básico
Consiste en utilizar el selector universal para el padding y margin de todos los elementos html. Es la técnica mas usada por la mayoría de los desarrolladores.

CSS:
  1. * {
  2.    padding: 0;
  3.    margin: 0;
  4. }

Reset Universal Básico
Esta técnica consiste ademas de eliminar el padding y el margin, eliminar los estilos de las fuentes, los bordes y las alineaciones.

CSS:
  1. * {
  2.     vertical-align: baseline;
  3.     font-weight: inherit;
  4.     font-family: inherit;
  5.     font-style: inherit;
  6.     font-size: 100%;
  7.     border: 0 none;
  8.     outline: 0;
  9.     padding: 0;
  10.     margin: 0;
  11. }

Eric Meyer’s CSS Reset
Esa un tecnica desarrollada por Eric Meyer en Reset Reloaded y basado en YUI Reset CSS con algunas modificaciones. Esta técnicas es una de las mejor logradas y que resuelven la mayoría de problemas de estilos.

CSS:
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td {
  9.     margin: 0;
  10.     padding: 0;
  11.     border: 0;
  12.     outline: 0;
  13.     font-weight: inherit;
  14.     font-style: inherit;
  15.     font-size: 100%;
  16.     font-family: inherit;
  17.     vertical-align: baseline;
  18. }
  19. /* remember to define focus styles! */
  20. :focus {
  21.     outline: 0;
  22. }
  23. body {
  24.     line-height: 1;
  25.     color: black;
  26.     background: white;
  27. }
  28. ol, ul {
  29.     list-style: none;
  30. }
  31. /* tables still need 'cellspacing="0"' in the markup */
  32. table {
  33.     border-collapse: separate;
  34.     border-spacing: 0;
  35. }
  36. caption, th, td {
  37.     text-align: left;
  38.     font-weight: normal;
  39. }
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42.     content: "";
  43. }
  44. blockquote, q {
  45.     quotes: "" "";
  46. }

Hay que notar que no se utiliza el selector universal y el su lugar se listan todos los elementos a los que deseamos se aplique el reset, además de ello se eliminan los estilos de las listas, entre otros. Lo recomendable es guardar estas reglas en una hoja de estilos llamada reset.css e incluirlos en nuestro web antes de incluir los estilos propios del web.

Mas Información

Posts Relacionados

AdSense for Feeds

  • 16/08/2008
  • 6:01 pm
  • unijimpe

Hace mucho se venia anunciando, por al fin esta disponible Adsense for Feeds el cual permite incluir anuncios AdSense en nuestros Feeds para de esta forma monetizar aun mas nuestro web por medio de nuestros suscriptores.

Para los usuarios de FeedBurner se están migrando los datos a Google Accounts para que estas puedan mostrar los anuncios AdSense, ahora si aun tu cuenta no ha sido migrada, puedes enviar un email a: adsense-support-aff@google.com en donde debes incluir: el nombre de usuario de FeedBurner y la direccion de Email asociada a AdSense. Con estos datos se procederá a migrar tus datos a Google Accounts para luego tener acceso a tus Feeds desde el panel de AdSense.

Luego, si deseas incluir estos bloques en tus Feeds, en tu panel de AdSense, dirigete a Configuración de AdSense en donde encontrarás un nuevo item AdSense para sindicación que te permitirá configurar rápidamente la publicidad.

Al agregar los bloques de anuncios, estos se publicarán en una nueva dirección en la cual se han agregado los anuncios, veamos un ejemplo de las rutas:

Este ultima URL es la que debemos promover para la suscripción de nuestros visitantes. Obviamente si haz migrado tus datos a Google Accounts, la redirección al nuevo URL se hará automáticamente. Entonces para finalizar es recomendable cambiar los datos del Feed en el header de nuestro web.

Posts Relacionados

  •