Colocar una Imagen como un botón para enviar un formulario

Quería crear un formulario personalizado con una imagen. Esa imagen se debe pulsar para enviar el formulario, es decir, debe funcionar como un botón...

La FAQ Colocar una Imagen como un botón para enviar un formulario tiene

Pertenece a la categoría:
Pregunta
Quería crear un formulario personalizado con una imagen. Esa imagen se debe pulsar para enviar el formulario, es decir, debe funcionar como un botón de submit, pero no es un botón sino la imagen.



¿Se tiene que hacer con algún lenguaje de programación con Javascript?
Respuesta de Miguel Angel Alvarez
Para colocar una imagen para enviar un formulario hay una etiqueta HTML específica, no necesitas utilizar ningún lenguaje de script para configurar ese comportamiento de una imagen, porque HTML ya provee la infraestructura por medio de la etiqueta <input> de los formularios.



La imagen la debes colocar de manera parecida a un submit, pero el tipo de submit es image y luego tienes el atributo src para definir la ruta donde se encuentra el archivo gráfico de la imagen.



Te dejo un ejemplo de formulario con una imagen, que pulsando sobre ella se envía el formulario, como si fuera un botón de submit.




<form action="http://www.mi-dominio.com" method="post">



Algo: <input type="text" name="texto">



<input type=image src="images/go.gif" width="25" height="15">



</form>

Volver al árbol de categoríasVolver al árbol de categorías

Comentarios

FromCol

03/1/2008
Existe otra opcion y es la siguiente:

<form method='post'>
<a href='#' onClick="document.forms[0].action='script_que_recibe_los_datos.xxx';document.forms[0].submit();"><img src='ruta_a_la_imagen.xxx' border='0'></a>
</form>

Entonces, como ves, de esta manera no puedes referenciar el metodo action del form ni cargarlo porque al hacer el submit, lanzara el del form y no el del onClick.

Ademas, se referencia el form por el index (forms[0]) porque no le colocamos name, si se lo nombras, entonces cambia forms[0] por el name que le pusiste.

Debe escribir border='0' en las propiedades de la imagen, porque se esta definiendo como un hipervinculo y como tal, por defecto, el sistema le traza un recuadro azul.

Entre las ventajas que tienes es que a cada imagen le puedes asociar un action diferente a los que igual se envian todos los valores de los campos contenidos en el formulario.

Espero que te sirva.

fanor

24/8/2010
poner imagen en ves de boton
<a href="formulario.php" title="Consultar programas por autor"><img src="images/consultar[1].jpg" border="0"></a>

esta ruta te permite enviar por medio de una imagen a un formulario x,
formulario.php: es la ruta donde queremos que se balla al pulsar la imagen.
title: permite que al pasar el mouse por ensima de la imagen te de a que formulario ingresara.
y ya lo otro es la iruta de la imagen donde se encuentra alojada y el tipo de imagen..

Jhumbert

13/9/2011
coment
muy bueno tu aporte..! saludos

Gian

23/11/2011
Graciasss
Me sirvio de mucho, revise el dreamweaver y en Insertar/Formulario/campo de Imagen.

y Gualaaa... los codigos que dices son los mismos que genere... gracias de nuevo eres lo maximo gracias.

marcelo

06/4/2012
felicitaciones
No c quien eres pero tu ayuda si me sirvio de mucho:::Gracias!!!

nicson

07/7/2013
no se puede colocar imagen a boton
eso no se puede hacer por que lo probé y se pierde el boton o submit solo queda como imagen
FAQ relacionadas

Para ver más FAQ relacionadas accede a las categorías:

Volver al árbol de categoríasVolver al árbol de categorías