tablas - HTML: ¿Cómo hacer un botón de envío con texto+imagen en él?

formulario html

Question

Me gustaría tener un botón de enviar que contenga texto y una imagen. es posible?

Puedo obtener el aspecto exacto que quiero con un código que se ve así:

<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

... pero no he encontrado una manera de tener uno de esos para mis formularios. ¿Hay alguna manera de hacer eso con un

<input type="submit" ...> 

¿elemento? ¿O estoy obligado a ir por la imagen o por el texto ? ¡Gracias por tu ayuda!

Answer 1

¡He encontrado una solución muy fácil! Si tiene un formulario y desea tener un botón de envío personalizado, puede usar un código como este:

<button type="submit">
    <img src="login.png" onmouseover="this.src=''login2.png'';" onmouseout="this.src=''login.png'';" />
</button>

O simplemente dirígelo a un enlace de una página.

Answer 2

Aquí hay otro ejemplo:

<button type="submit" name="submit" style="border: none; background-color: white">

Answer 3

Digamos que su imagen es un ícono de 16x16 .png llamado icon.png ¡Use el poder de CSS!

CSS:

input#image-button{
    background: #ccc url(''icon.png'') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

HTML:

<input type="submit" id="image-button" value="Text"></input>

Esto colocará la imagen a la izquierda del texto.

Answer 4

En caso de que las fuentes dingbats / icon sean una opción, puede usarlas en lugar de imágenes.

Lo siguiente usa una combinación de

• una fuente de ícono (p. ej. Font Awesome) ,
• codificaciones de caracteres en HTML (por ejemplo, &#xf090 )
• el punto de código Unicode del icono que desea usar (por ejemplo, &#xf090 para el logotipo de inicio de sesión ) ,
• CSS:

En HTML:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<form name="signin" action="#" method="POST">
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>

En CSS:

.stylish {
    font-family: georgia, FontAwesome;
}

jsFiddle

Observe la especificación de la font-family : todos los caracteres / puntos de código usarán FontAwesome , volviendo a FontAwesome para cualquier punto de código para el cual georgia no proporcione caracteres. georgia no proporciona ningún personaje en el rango de uso privado , exactamente donde FontAwesome ha colocado sus iconos .

Answer 5

Estás muy cerca de la respuesta tú mismo

<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

O bien, simplemente puede eliminar el atributo de tipo

<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

Answer 6

Muy interesante. Pude hacer que mi formulario funcione, pero el correo electrónico resultante muestra:

imageField_x: 80 imageField_y: 17

en la parte inferior del correo electrónico que recibo.

Aquí está mi código para los botones.

    <tr>
      <td><input type="image" src="images/sendmessage.gif" / ></td>
      <td colspan="2"><input type="image" src="images/printmessage.gif"onclick="window.print()"></td>
    </tr>

Tal vez esto te ayude a ti y a mí también.

:-)

Answer 7

Por favor, consulte este enlace. Puede tener cualquier botón que desee solo use javascript para enviar el formulario

http://www.w3schools.com/jsref/met_form_submit.asp

Answer 8

Puedes hacerlo:

Código HTML:

    <form action="submit.php" method="get" id="form">        
    <a href="javascript: submitForm()">        
    <img src="save.gif" alt="Save icon"/>        
    <br/>        
    save        
    </a>        
    </form>        

nota: puede usar la acción y el método de su elección, Id y cualquier texto que empiece desde href = "javascript: y termina en ()", pero asegúrese de que cuando escriba las mismas cosas, como id y algún texto que escriba en su reemplazo en los mismos lugares (script java y código HTML).

código de script java:

    var form=document.getElementById("form");        
    function submitForm()        
    {        
    form.submit();       
    }         

Answer 9

<input type="button" id="btnTexWrapped" style="background: url(''http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg'');background-size:30px;width:50px;height:3em;" /> url(''http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg'');background-size:30px;width:50px;height:3em;" />

Cambia los elementos de estilo de entrada como quieras para obtener el botón que necesitas.

Espero que haya sido de ayuda.

Answer 10

input type="submit" es la mejor manera de tener un botón de enviar en un formulario. La desventaja de esto es que no puede poner nada más que texto como su valor. El elemento del botón puede contener otros elementos y contenido HTML.

Trate de poner type="submit" lugar de type="button" en su elemento de button ( source ).

Sin embargo, preste especial atención a lo siguiente de esa página:

Si usa el elemento del botón en un formulario HTML, diferentes navegadores enviarán diferentes valores. Internet Explorer enviará el texto entre las etiquetas <button> y </button> , mientras que otros navegadores enviarán el contenido del atributo de valor. Use el elemento de entrada para crear botones en un formulario HTML.