Formularios con Imagenes

No te pasa que estas cansado de las formas cuadradas aburridas que tienen tus formularios?, con esta guia te voy a enseñar a hacer formularios utilizando imagenes.

1- Con un programa de diseño crea la imagen de tu formulario, voy a hacer uno para ingreso de usuarios, mi imagen quedo asi:

2- Seguimos utilizando nuestro programa de diseño, esta vez vamos a cortar nuestra imagen, de manera que queden los campos del formularios separados del resto de la imagen, algo parecido a esto:

3- Una vez cortado nuestro formulario vamos a abrir nuestro Front Page y donde queramos que aparezca, colocamos todo en tablas. te va a quedar algo como esto:

ahi vemos que no insertamos imagenes dentro de los campos de formularios, ahi..precisamente vamos a insertar campos de formularios, veamos como nos queda.

quedan los formularios blancos y feos no?, ahora vamos a insertale style, en el archivo style.css vamos a agregar lo siguiente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

}
input, select, textarea {
color : #6a7578;
font-size : 9px;
font-family : Tahoma;
font-weight : normal;
background-color : transparent;
padding : 1px;
margin-top : 2px;
margin-left : 2px;
margin-right : 2px;
margin-bottom : 2px;
border : 0px;
}

Vemos en la linea 7 que el color de fondo es “transparent” es decir, transparente.
En la linea 13 el borde del campo del formulario es de 0 pixeles.

4- Una vez hecho esto, nuestro formulario nos esta quedando algo como esto:

5- Ahora vamos con el boton de enviar, hacemos clic en la imagen y el codigo de la imagen que seria algo como esto:

1

<img border="0" src="tu_imagen.png" width="35" height="52">

Lo vamos a cambiar por esto:

1

<input type="image" src="tu_imagen.png" id="submit">

Nuestro formulario nos quedo listo, ahora queda de tu parte hacer mejores diseños o nuevas utilidades para esta fabulosa forma de hacer formularios.

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

• Titulos con Imagenes
• Cambiar color de fondo de web Dinamicamente
• Opciones para el Background (fondo) de tu web
• Menu con 3 estados
• Formularios con imagenes cambiantes

8 Comentarios en "Formularios con Imagenes"

1. 

   isa

   14 Diciembre 2008

   Respuesta

   que pasada de tutorial, me encanta, y lo voy a poner en práctica en cuanto pueda!

2. 

   Mijael166

   21 Diciembre 2008

   Respuesta

   :P Dale linda…Lo hice con tablas pero despues me di cuenta que con divs es mucho mas facil colocar los campos del formulario…para que sepas…Besos linda :P

3. 

   miapa

   11 Mayo 2009

   Respuesta

   No hay forma que pongas un tutorial para aprender como poner para que las personas se registren en nuestra web? como crear eso de registro en fin todas esas cosas seria muy interesante iojala puedas grax por tu atencion!

4. 

   Mijael166

   12 Mayo 2009

   Respuesta

   Ok, eso es php complejo que yo aun no domino, lo de esta pagina es wordpress, pero puedo buscar algun recurso y mostrar como se hace!!, gracias por tu duda, la tomare en cuenta para los proximos tutoriales.

5. 

   isa

   7 Junio 2009

   Respuesta

   Respuesta al Comentario deMijael166: prefiero usar tablas creeme jaja las llevo manejando más tiempo que los divs y me resulta más fácil, bueno, despues de 6 meses voy a hacer el tutorial jajaja ya te contaré jajaja.

6. 

   isa

   9 Junio 2009

   Respuesta

   No me sale Mijael :( es al poner las tablas y tal, lo he intentaod con tablas y divs, pero no me queda bien.

7. 

   Mijael166

   9 Junio 2009

   Respuesta

   Como dije..con divs es mucho mas facil, crea uno grande para el recuadro verde, crea otro div que una los dos formularios (nombre y pass) y crea otro para el boton de enviar, separalos como te dije (con padding y margen y listo. Te queda muy descuadrado?

8. 

   isa

   10 Junio 2009

   Respuesta

   más o menos es así como lo hice, mira te voy a enviar por e-mail lo que llevo hecho ¿vale? y te explico lo que pasa, besos!