como poner una imagen como botón de submit de un formulario html sin javascript

Para poner una imagen como botón en un formulario, tan solo será necesario definir un tag html "input" con propiedad "type" como "image". Así no será necesario usar javascript, y será estandard para todos los navegadores. Este deberá estar dentro de la estructura html del formulario y automáticamente enviará el formulario html pulsando sobre el o aciendo intro en cualquier caja del formulario.

ejemplo:

HTML:
  1. <form action="urldestino.php"> <!-- caja de texto-->
  2.  
  3. <input name="cajaTexto" type="text" />
  4. <!-- caja de texto-->
  5. <!-- botón de submit con imagen -->
  6.  
  7. <input title="boton comprar" alt=" conton comprar " src="rutaImagen/Imagen-boton-Submit.jpg" type="image" />
  8.  
  9. </form>

Este sistema es el mejor sistema para poner un boton con imagen en un submit de formulario. Aunque el tipo del input no sea submit, el tipo "image" tambien envia los datos del formulario a la url de action.

Este sistema hace mas usables las páginas, porque despues el javascript si no lo pones correctamente provoca que te vayas a explorer o a firefox y no funcione el envio del formulario. Además de que con el javascript, cuando haces intro en una caja de formulario no se enviará a no ser que haya un input type image o input type submit.


Odio las paginas que hacen esto mismo con una imagen y un javascript en el elemento onClick que ejecuta el evento Submit() del formulario.

Etiquetas: , , , , , ,

3 comentarios para “como poner una imagen como botón de submit de un formulario html sin javascript”

  1. Xocoyote dice:

    Gracias por la información, me resultó muy útil.

  2. cristian dice:

    Gracias a ti xocoyote, por el comentario. Hay veces que te gusta saber que estas siendo útil...

  3. Onizukar dice:

    Gracias a este tutorial pude solucionar ese molesto asunto de usar javascript para enviar un form en cirugiaplasticasaltillo.mx

    Enviar un form con javascrip no solo es molesto sino que también es una ofensa contra la accesibilidad web

    muchas gracias

Deja un comentario

CAPTCHA Image Audio Version
Reload Image