Formularios más semanticos

octubre 29, 2007 at 1:09 am 4 comentarios

En un proyecto en el que estoy, se requiere que los formularios sean muy breves pero claros, sin duda un gran problema. Bueno pues he creado un pequeño script JS que funciona con prototype, para ayudar un poco a que sean mas claros. Sinceramente no si esta sea “la solución”, pero sin duda nos ha ayudado bastante y lo he comprobado.

Consiste en hacer aparecer un tooltip en al momento de enfocar el elemento del formulario, dando una explicación mas detalla de que hacer y/o escribir, no es una maravilla y ya existe hace bastante, pero lo quise hacer a mi manera, una manera no obstrusiva y que funciona de la misma manera en todos los navegadores (bueno aunque sea en la matoria).

Sin mas comentarios vamos al grano, esto es lo que quiero lograr.

Tooltip HorizontalTooltip vertical

Y la forma de lograrlo es muy simple.

El HTML:

<input type="text" name="nombre" size="25" title="Ingrese su nombre completo" class="tooltip" />
<input type="text" name="edad" size="3" title="Ingrese su edad" class="tooltip option-horizontal" />

El CSS:

.tooltip-aviso {
    position: absolute;
    z-index: 100;
    display: none;
    width: 150px;
    border: 1px solid #A5C9FF;
    font-size: 90%;
    padding: 2px;
    background: #E0ECFF url(img/pointer.gif) no-repeat -10px 5px;
    height: auto!important; /* para los browsers buenos */
    height: 25px; /* para IE5+ */
    min-height: 25px; /* para los browsers buenos */
}
    .tooltip-aviso .tooltip-pointer {
        position: absolute;
        left: -10px;
        top: 5px;
        width: 10px;
        height: 19px;
        background: url(img/pointer.gif) left top no-repeat;
    }
    .tooltip-aviso-horizontal {
        background: #E0ECFF url(img/pointer-horizontal.gif) no-repeat 5px -10px;
    }
        .tooltip-aviso-horizontal .tooltip-pointer-horizontal {
            position: absolute;
            top: -10px;
            left: 10px;
            width: 19px;
            height: 10px;
            background: url(img/pointer-horizontal.gif) center top no-repeat;
        }

La Imagen:

Pointer Tooltip Horizontal

Finalmente el Javascript:

Tooltip.js – Solo 2KB

Pueden ver el ejemplo desde aquí o descargarlo completo desde aquí.

Testado en IE5.5+, Firefox 2.0+, Opera 9.0.

PD: La idea de la flecha, la tome de este artículo
.

Ver VideosTe VerdeImagenes para hi53GP

Entry filed under: JavaScript - AJAX, Prototype, Recursos, Web 2.0. Tags: , , , .

Evaluando el rendimiento de algunos CMS Pownce Tiene API

4 comentarios Add your own

  • 1. Rodolfo  |  octubre 29, 2007 a las 1:41 am

    La madre de todo es… Si necesita ser explicado, es por que no es usable.

    Responder
  • 2. Victor San Martin  |  octubre 29, 2007 a las 11:10 am

    A veces es bueno dar ayuda extra, si el usuario la necesita la tomara en cuenta, de lo contrario no.

    Responder
  • 3. Alex Hilario  |  febrero 21, 2008 a las 10:21 am

    Estimado amigo, muy interesante este formulario, de esta forma es mas dinamico un formulario de registro, solo observe que no es compatible con IE, aver si me ayudas con la compatibilidad.

    Responder
  • 4. Victor San Martin  |  febrero 27, 2008 a las 1:52 pm

    Disculpa pero que versión de IE ocupas, yo lo he probado con IE6 y IE7 y funciona a la perfección.

    Saludos

    Responder

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

Trackback this post  |  Subscribe to the comments via RSS Feed



A %d blogueros les gusta esto: