HTML: Como fazer um botão de envio texto da imagem + nele com?

Question

Eu gostaria de ter um botão que contém texto e uma imagem enviar. Isso é possível?

Eu posso obter a aparência exata que eu quero com o código que se parece com:

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

... mas eu não encontrei uma maneira de ter um daqueles para os meus formulários. Existe uma maneira de fazer isso com um

<input type="submit" ...> 

elemento? Ou estou forçado a ir ao imagem ou o texto maneira? Obrigado pela sua ajuda!

Answer 1

input type="submit" é a melhor maneira de ter um botão de envio em um formulário. A desvantagem desta situação é que você não pode colocar qualquer coisa diferente de texto como seu valor. O elemento botão pode conter outros elementos HTML e conteúdo.

Tente colocar type="submit" vez de type="button" em sua elemento button ( fonte ).

Preste atenção especial, no entanto, o seguinte a partir dessa página:

Se você usar o elemento de botão em um formulário HTML, navegadores diferentes apresentará valores diferentes. Internet Explorer apresentará o texto entre as <button> e </button> marcas, enquanto outros navegadores apresentará o conteúdo do atributo de valor. Use o elemento de entrada para criar botões em um formulário HTML.

Answer 2

Digamos que a sua imagem é um .png ícone 16x16 chamado icon.png Use o poder do 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>

Isto irá colocar a imagem para a esquerda do texto.

Answer 3

No caso fontes dingbats / ícone são uma opção, você pode usá-los em vez de imagens.

A seguir utiliza uma combinação de

• uma fonte ícone (por exemplo da fonte impressionante) ,
• em HTML (por exemplo &#xf090)
• o ponto de código Unicode do ícone que deseja usar (por exemplo &#xf090 para o Entrar logo) ,
• CSS:

Em 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>

Em CSS:

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

jsFiddle

Observe a especificação font-family: todos os caracteres / pontos de código usará georgia, de volta ao FontAwesome para qualquer código pontos georgia não fornece personagens para cair. georgia não fornece quaisquer caracteres na uso privado gama , exatamente onde FontAwesome colocou seus ícones .

Answer 4

Você está realmente perto da resposta yourself

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

Ou, você pode simplesmente remover o atributo do tipo

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

Answer 5

Eu encontrei uma solução muito fácil! Se você tem um formulário e você quer ter um costume botão enviar você pode usar algum código como este:

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

Ou apenas dirigi-lo a um link de uma página.

Answer 6

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

Alterar elementos de estilo de entrada como você deseja obter o botão que você precisa.

Espero que tenha sido útil.

Answer 7

Por favor, consulte este link. Você pode ter qualquer botão que deseja javascript uso apenas para enviar o formulário

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

Answer 8

Muito interessante. Eu tenho sido capaz de obter a minha forma de trabalho, mas os e-mail resultante exibe:

imageField_x: 80 imageField_y: 17

na parte inferior do e-mail que eu recebo.

Aqui está o meu código para os botões.

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

Talvez isto ajude você e para mim também.

: -)

Answer 9

Você pode fazer isso:

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: você pode usar e ação e método de sua escolha e Id e qualquer texto a partir de href = "javascript: e terminando com ()", mas certifique-se de que, quando eu digitar as mesmas coisas como id e algum texto você digitar a sua substituição nos mesmos lugares (java script e código HTML).

código java script:

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

Answer 10

Aqui está um outro exemplo:

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