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

Question

Me gustaría tener un botón de envío que contiene texto y una imagen. es posible?

puedo conseguir el aspecto exacto que quiero con el código que se parece a:

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

... pero no he encontrado una manera de tener uno de los de mis formas. ¿Hay una manera de hacer eso con un elemento

<input type="submit" ...> 

? ¿O estoy obligado a ir a la imagen o texto manera? ¡Gracias por su ayuda!

Answer 1

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.

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

Prestar especial atención a la siguiente sin embargo de esa página:

Si se utiliza el elemento de botón en un formulario HTML, diferentes navegadores presentar valores diferentes. 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.

Answer 2

Digamos que su imagen es un icono de 16x16 .png llamado icon.png ¡Utilice 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 pondrá la imagen a la izquierda del texto.

Answer 3

usted está realmente cerca de la respuesta por ti mismo

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

O, simplemente puede quitar el tipo de atributo-

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

Answer 4

muy interesante. he podido conseguir mi forma de trabajar, pero las pantallas de correo electrónico generados:

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> 

Quizás esto te ayude a ti y a mí también.

:-)

Answer 5

<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;" />

elementos de estilo Cambio de entrada como desee para obtener el botón que necesita.

Espero que haya sido útil.

Answer 6

¡He encontrado una solución muy fácil! Si usted tiene una forma y que desea tener una costumbre botón de enviar se puede utilizar un poco de código como este:

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

O simplemente dirigirlo a un enlace de una página.

Answer 7

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

A continuación se utiliza una combinación de

• an icon font (e.g. Font Awesome),
• character encodings in HTML (e.g. &#xf090)
• the Unicode code point of the icon you want to use (e.g. &#xf090 for the sign in logo),
• 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

previo aviso las especificaciones font-family: todos los caracteres/puntos de código utilizarán georgia, cayendo de nuevo a FontAwesome para cualquier código de puntos georgia no proporciona caracteres para. georgia no proporciona ningún carácter en el private use range, exactly where FontAwesome has placed its icons.

Answer 8

Consulte este enlace. Puede tener cualquier botón que desee sólo tiene que utilizar Javascript para enviar el formulario

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

Answer 9

Usted puede hacer esto:

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: se puede usar y acción y método de su elección y Id y cualquier texto que empiece desde href = "javascript: y termina en()", pero asegúrese de que cuando escribo las mismas cosas, como id y algún texto, escriba su reemplazo en los mismos lugares (script java) y código HTML).

java código de script:

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

Answer 10

Aquí es otro ejemplo:

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