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? Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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