Crear ayudas en formulario

[helacer]

Como estan?

Estoy creando un formulario en html con php y SQL. Me han pedido colocarle a cada campo una ayudita que le permita al usuario entender que informacion debe colocar en el campo.

Se poco javascript. Quisiera que me ayudararn cual seria una forma chebre y no tan complicada de vrear estas ayudas para el form.


Gracias.

[El_Metallick]

pero mas o menos ayuda de que estilo quieres, que hay varias opciones

1.- poner un texto al lado del campo que diga que tiene que contener
2.- poner un ícono que al pincharlo muestre lo que tiene que tener el campo
3.- cuando el usuario escriba mal mostrar un mensaje al lado

hay varios mas pero esas 2 son las que mas se usan segun lo que he visto

saludos

[helacer]

Pues ellos me pidieron como la primera opcion, claro que la segunda se ve como chebre.

Ayudeme en cualquiera de las dos primeras por favor

Gracias

[JavierB]

Hola helacer

Una forma sencilla, es utilizar esto:

Código:

<input type="text" value="Introduce nombre"
onfocus = "if(this.value=='Introduce nombre') this.value=''"
onblur = "if(this.value=='') this.value='Introduce nombre'" />

Saludos,

[Sergestux]

Tambien ayudaria algo que le agregaras el atributo title a tus campos que es lo mismo que los tooltip

Código PHP:

  <input type="text" value="Introduce nombre" title="Introduce nombre">  
   

[El_Metallick]

bueno algo como la opcion 2 sería algo asi:

primero el campo y la imagen:

Código:

<input type="text" name="nombre" /> - <img src="icono.gif" onclick="ayuda('nombre')" />
<input type="text" name="apellido" /> - <img src="icono.gif" onclick="ayuda('apellido')" />
<input type="text" name="email" /> - <img src="icono.gif" onclick="ayuda('email')" />

y en js sería algo asi:

Código:

function ayuda(campo) {
    if(campo == 'nombre') {
        alert('Introduzca su nombre. Letras entre A-Z y a-z');
    }
    else if(campo == 'apellido') {
        alert('Introduzca su apellido. Letras entre A-Z y a-z');
    }
    else if(campo == 'email') {
        alert('Introduzca su email. Letras entre A-Z y a-z, dígitos entre 0-9, puntos y guiones bajos');
    }
}

Ahora tienes mil formas de hacerlo mas bonito, lo puedes hacer con css pero la idea es mas o menos esa.

Saludos