HTML: come fare un pulsante di invio con testo + immagine al suo interno?

Question

Mi piacerebbe avere un pulsante di invio che contiene il testo e un'immagine. È possibile?

posso ottenere l'esatto aspetto che voglio con il codice che assomiglia a:

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

... ma non ho trovato un modo per avere uno di quelli per le mie forme. C'è un modo per farlo con un elemento

<input type="submit" ...> 

? O sono costretto a passare l'immagine o il testo? Grazie per il vostro aiuto!

Answer 1

input type="submit" è il modo migliore per avere un pulsante di invio in un modulo. Il rovescio della medaglia di questo è che non puoi mettere altro che il testo come valore. L'elemento del pulsante può contenere altri elementi e contenuti HTML.

provare a mettere type="submit" invece di type="button" nel vostro button elemento (source).

Prestare particolare attenzione però al seguente da quella pagina:

Se si utilizza l'elemento pulsante in un modulo HTML, diversi browser presenterà valori diversi. Internet Explorer invierà il testo tra i tag <button> e </button>, mentre altri browser invieranno il contenuto dell'attributo value. Utilizzare l'elemento di input per creare pulsanti in un modulo HTML.

Answer 2

Diciamo che l'immagine è un'icona 16x16 .png chiamata icon.png Usa la potenza del 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> 

Questo metterà l'immagine a sinistra del testo.

Answer 3

Sei davvero vicino alla risposta da soli

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

In alternativa, si può semplicemente rimuovere il tipo attributo

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

Answer 4

Molto interessante. Sono stato in grado di ottenere la mia forma al lavoro, ma le risultanti di posta elettronica viene visualizzato:

imageField_x: 80 imageField_y: 17

in fondo l'e-mail che ricevo.

Ecco il mio codice per i pulsanti.

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

Forse questo aiuterà te e me.

:-)

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

elementi di stile Modificare i dati su come si vuole ottenere il pulsante si ha bisogno.

Spero sia stato utile.

Answer 6

Ho trovato una soluzione molto semplice! Se si dispone di un modulo e si desidera avere un costume pulsante per inviare è possibile utilizzare un codice simile a questo:

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

O semplicemente di indirizzarla verso un link di una pagina.

Answer 7

Nel caso dingbats/icon fonts sono un'opzione, è possibile utilizzarli al posto delle immagini.

seguenti usi una combinazione di

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

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

In CSS:

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

jsFiddle

preavviso le specifiche font-family: tutti i punti di codice/personaggi utilizzeranno georgia, ricadendo a FontAwesome per eventuali punti di codice georgia non fornisce caratteri per. georgia non fornisce alcun carattere nello private use range, exactly where FontAwesome has placed its icons.

Answer 8

Fare riferimento a questo collegamento. Si può avere un qualsiasi tasto si vuole solo utilizzare JavaScript per inviare il modulo

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

Answer 9

Si può fare questo:

codice 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: è possibile utilizzare e l'azione e metodo di tua scelta e Id e qualsiasi testo a partire da href = "javascript: e termina a()" ma assicurati che quando digito le stesse cose come id e del testo digiti nella tua sostituzione nelle stesse posizioni (script java e codice HTML).

java codice di script:

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

Answer 10

Ecco un altro esempio:

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