HTML:Come creare un pulsante di invio con testo + immagine al suo interno?

Question

Vorrei avere un pulsante di invio che contenga testo E un'immagine.È possibile?

Posso ottenere l'aspetto esatto che desidero con un codice simile a:

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

...ma non ho trovato il modo di averne uno per i miei moduli.C'è un modo per farlo con un

<input type="submit" ...> 

elemento?Oppure sono costretto ad andare lì immagine o testo modo?Grazie per l'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 testo come valore. L'elemento pulsante può contenere altri elementi e contenuti HTML.

Prova a mettere type="submit" invece di type="button" nel tuo button elemento ( source ).

Presta particolare attenzione a quanto segue da quella pagina:

  

Se si utilizza l'elemento del pulsante in un modulo HTML, browser diversi invieranno 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

Supponiamo che la tua immagine sia un'icona .png 16x16 chiamata icon.png Usa il potere dei 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 alla sinistra del testo.

Answer 3

Nel caso in cui dingbats / icon fonts siano un'opzione, puoi usarli al posto delle immagini.

Quanto segue utilizza una combinazione di

• un carattere icona (ad esempio Font Awesome) ,
• codifiche di caratteri in HTML (ad esempio &#xf090)
• il punto di codice Unicode dell'icona che si desidera utilizzare (ad es. font-family per il segno 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

Nota la specifica georgia: tutti i caratteri / punti di codice useranno FontAwesome, tornando a <=> per tutti i punti di codice per i quali <=> non vengono forniti caratteri. <=> non fornisce alcun personaggio nella uso privato , esattamente dove <=> ha posizionato le sue icone .

Answer 4

Sei molto vicino alla risposta tu stesso

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

In alternativa, puoi semplicemente rimuovere l'attributo type

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

Answer 5

Ho trovato una soluzione molto semplice! Se hai un modulo e vuoi avere un pulsante di invio personalizzato puoi usare un codice come questo:

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

O semplicemente indirizzalo a un link di una pagina.

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

Modifica gli elementi dello stile di input come desideri per ottenere il pulsante che ti serve.

Spero sia stato utile.

Answer 7

Fare riferimento a questo link. Puoi avere qualsiasi pulsante tu voglia semplicemente usare JavaScript per inviare il modulo

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

Answer 8

Molto interessante. Sono stato in grado di far funzionare il mio modulo ma viene visualizzata l'email risultante:

imageField_x: 80 imageField_y: 17

nella parte inferiore dell'email 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à anche te e me.

: -)

Answer 9

Puoi farlo:

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:puoi utilizzare un'azione e un metodo di tua scelta e l'ID e qualsiasi testo a partire da href="javascript:e termina con ()" ma assicurati che quando digito le stesse cose come ID e del testo tu digiti la sostituzione negli stessi posti (script Java e codice HTML).

codice script Java:

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