5

Quisiera saber como utilizar una imagen como submit ya que no me deja de la forma en que lo estoy utilizando y al utilizar una type="image" me genera un error en la parte de php espero y me puedan ayudar.

<?php
$usb_comPort = "COM3";
	if ($_POST['btn']) {
		exec("ECHO 1 > $usb_comPort");
	}
?>

<!DOCTYPE html>
<html>
<head>
	<title>Boton Peatonal</title>
	<link rel="icon" href="icono.png">
</head>
<body>
	<form  method="post" action="">
		<input type='submit' name='btn' value="" src="boton.png" style='width:300px; height:130px' >
		
	</form>
</body>
</html>

1
  • 1
    ¿Podrías compartir el código PHP que te genera error y el mensaje de error que te genera? En ese código no veo por ningún lado el type="image" y la forma en la que usas la imagen no entiendo por qué dices que "no me deja". ¿Qué es lo que tratas de conseguir? el 24 may. 2019 a las 9:23

3 respuestas 3

8

El atributo src es propio de las etiquetas <img>, por lo que otros elementos no lo admiten. Lo que podrías hacer es darle un background-image al botón.

#enviar {
  background-image: url('https://ep00.epimg.net/tecnologia/imagenes/2015/06/25/actualidad/1435248518_445335_1435251285_noticia_normal.jpg');
  background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
	<title>Boton Peatonal</title>
	<link rel="icon" href="icono.png">
</head>
<body>
	<form  method="post" action="">
		<input id="enviar" type='submit' name='btn' value="" style='width:300px; height:130px'>
	</form>
</body>
</html>

3

Solo por aportar un poquito de usabilidad a la respuesta, que es perfectamente válida de @phpMyGuel, le añadiría a ese input un 'cursor:pointer' para que sea claramente identificado como una botón o bien cambiaría directamente el input por un button:

css

#enviar {
      background-image: url('https://www.royalcanin.es/wp-content/uploads/2016/03/11.jpg');
      background-size: cover;
      background-color: orange;
      cursor: pointer;
      width:300px; 
      height:130px;
    }

#enviar2 {
  background-image: url('https://www.royalcanin.es/wp-content/uploads/2016/03/11.jpg');
  background-size: cover;
  cursor: pointer;
  background-color: red;
  width:300px; 
  height:130px;
}

forms html

<form  method="post" action="">
    <input id="enviar" type='submit' name='btn' value="">
</form>
<form  method="post" action="">
    <button id="enviar2" name='btn' value="">&nbsp;</button>
</form>
0

Esta función es la que enviara el POST onclick en la imagen

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Submit con Imagen</title>
    <style type="text/css">
     body {
     background-color: #9CC;
      }
    </style>
    <script>
    function enviar(destino)   // esta es la funcion 
     { 
    document.form1.action = destino;
    document.form1.submit()
    }
    </script>
  

abrimos formulario //dejo vacío action

 

 

 

    <table border="0">
    <tr>
    <td align="center" bgcolor="#CCFFFF">Escriba mensaje</td>
    <td bgcolor="#CCFFFF">&nbsp;</td>
    </tr>
    <tr>

input ingresar texto

    <td bgcolor="#FFFFFF"><input name="eliminar" type="text"/></td> 

input imagen debes poner una imagen y reemplazar los datos y la ubicacion

    <td bgcolor="#FFFFFF"><input  type="image"src="images/cruz-eliminar.gif" 
    width="15" height="15" onclick="enviar" /></td> // aquí se ejecuta la función
    </tr>
    </table>
    </form>
    <p>&nbsp;</p>

lo siguiente lo puse para verificar el envío submit imprimiendo el $_POST si existe y no esta vacio

    <?php if (isset($_POST['eliminar'])&&($_POST['eliminar']!="")){ echo "Texto 
    Enviado= ".$_POST['eliminar'];} elseif (isset($_POST['eliminar'])&& 
    ($_POST['eliminar']=="")) echo "Nada Enviado"?>
    </body>
    </html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.