imagen del botón como botón de enviar entrada de formulario?

<form method="post" action="confirm_login_credentials.php"> 
    <table> 
     <tr> 
      <td>User ID:</td> 
      <td><input type="text" id="uid"></td> 
     </tr> 
     <tr> 
      <td>Password:</td> 
      <td><input type="text" id="pass"></td> 
     </tr> 
     <tr> 
      <td colspan="2" align="right"> 
       <a href="#"><img src="images/login.jpg"></a> 
      </td> 
     </tr> 
    </table> 
</form>

Estoy usando una imagen en lugar de un botón de envío. ¿Cómo puedo enviar los datos de inicio de sesión cuando el usuario hace clic en la imagen de inicio de sesión como lo hace un botón de envío?imagen del botón como botón de enviar entrada de formulario?

Fuente

2010-08-01 nectar

110

Se podría utilizar un image submit button:

<input type="image" src="images/login.jpg" alt="Submit Form" />

Fuente

2010-08-01 10:17:38

Sí. Esta es la mejor manera. Una nota al respecto: algunos idiomas del lado del servidor tienen diferentes formas de ver si se presionó el botón, normalmente a través de las coordenadas X y Y del clic del mouse. Así que tenga un entrometido en la documentación de su idioma de elección (si lo necesita) – Amadiere

¿Cómo insertar el nombre del botón en la imagen? –

Esto funciona muy bien para enviar un formulario simple, pero si necesita que la imagen tenga un valor (para determinar en qué imagen/botón se hizo clic), entonces no tendrá suerte en Firefox - tendrá que usar un botón con un fondo :-( – schmoopy

tarde a la conversación ...

Pero, ¿por qué no usar css? De esta forma, puede mantener el botón como tipo de envío:

<input type="submit" value="go" style="background:url(/images/submit.png) no-repeat;" />

Funciona como un encanto.

Fuente

2013-07-19 04:11:47 Jahmic

También puede usar una segunda imagen para obtener el efecto de presionar un botón. Sólo tiene que añadir la imagen del botón "presionado" en el HTML la imagen de entrada antes:

<img src="http://integritycontractingofva.com/images/go2.jpg" id="pressed"/> 
<input id="unpressed" type="submit" value=" " style="background:url(http://integritycontractingofva.com/images/go1.jpg) no-repeat;border:none;"/>

Y el uso de CSS para cambiar la opacidad de la imagen "no presionada" en vuelo estacionario:

#pressed, #unpressed{position:absolute; left:0px;} 
#unpressed{opacity: 1; cursor: pointer;} 
#unpressed:hover{opacity: 0;}

lo uso para el botón azul "IR" en la this page

Fuente

2014-07-30 20:26:11 bcintegrity

<div class="container-fluid login-container"> 
    <div class="row"> 
     <form (ngSubmit)="login('da')"> 
      <div class="col-md-4"> 
        <div class="login-text"> 
         Login 
        </div> 
        <div class="form-signin"> 
          <input type="text" class="form-control" placeholder="Email" required> 
          <input type="password" class="form-control" placeholder="Password" required> 
        </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="login-go-div"> 
        <input type="image" src="../../../assets/images/svg/login-go-initial.svg" class="login-go" 
         onmouseover="this.src='../../../assets/images/svg/login-go.svg'" 
         onmouseout="this.src='../../../assets/images/svg/login-go-initial.svg'"/> 
       </div> 
      </div> 
     </form> 
    </div> 
</div>

Este es el código de trabajo para ello.

Fuente

2017-08-15 11:12:28

Haga que el botón enviar sea la imagen principal que está utilizando. Entonces las etiquetas de formulario llegarían primero y luego el botón de enviar, que es su única imagen, por lo que la imagen es su formulario de imagen en el que se puede hacer clic. Luego solo asegúrate de poner lo que estés pasando antes del código del botón de envío.

Fuente

2017-08-24 02:04:39 john

imagen del botón como botón de enviar entrada de formulario?

Respuesta

Cuestiones relacionadas