HTML: Wie man eine Übermittlungsschaltfläche mit Text + Bild darin bildet?

Question

Ich hätte gerne eine Schaltfläche senden, die Text und ein Bild enthält. Ist das möglich?

Ich kann die genaue Aussehen bekomme ich mit Code möchten, die wie folgt aussieht:

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

... aber ich habe keine Möglichkeit haben, einer von denen, für meine Formen gefunden. Gibt es eine Möglichkeit, das zu tun mit einem

<input type="submit" ...> 

Elemente? Oder bin ich gezwungen, die Bild oder Text Weg gehen? Danke für Ihre Hilfe!

Answer 1

input type="submit" ist der beste Weg, um eine Senden-Schaltfläche in einem Formular zu haben. Der Nachteil davon ist, dass Sie nichts anderes als Text als Wert angeben können. Das Schaltflächenelement kann andere HTML-Elemente und Inhalte enthalten.

Versuchen Sie, type="submit" anstelle von type="button" in Ihrem button Element (source) zu setzen.

Achten Sie besonders jedoch auf die folgenden von dieser Seite:

Wenn Sie auf die Schaltfläche Element in einem HTML-Formular verwenden, werden verschiedene Browser unterschiedliche Werte einreichen. Internet Explorer sendet den Text zwischen den Tags <button> und </button>, während andere Browser den Inhalt des Wertattributs übergeben. Verwenden Sie das Eingabeelement, um Schaltflächen in einem HTML-Formular zu erstellen.

Answer 2

Angenommen, Ihr Bild ist ein 16x16 .png-Symbol namens icon.png Verwenden Sie die Leistungsfähigkeit von 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> 

Dadurch wird das Bild auf der linken Seite des Textes setzen.

Answer 3

Sie sind ganz in der Nähe der Antwort selbst

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

Oder können Sie einfach das

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

Answer 4

Sehr interessante Art-Attribut entfernen. konnte ich meine Form bekommen zu arbeiten, aber die daraus resultierenden E-Mail angezeigt:

imageField_x: 80 imageField_y: 17

am Ende der E-Mail, die ich erhalte.

Hier ist mein Code für die Tasten.

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

Vielleicht wird dies Ihnen und mir auch helfen.

:-)

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

Eingabe ändern Stilelemente wie Sie die Taste, die Sie benötigen.

Ich hoffe, es war hilfreich.

Answer 6

Ich habe eine sehr einfache Lösung gefunden! Wenn Sie ein Formular und Sie möchten eine benutzerdefinierte haben Submit-Button können Sie einen Code wie folgt verwenden:

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

Oder es nur auf einen Link von einer Seite lenken.

Answer 7

Falls dingbats/icon fonts eine Option sind, können Sie diese anstelle von Bildern verwenden.

Im Folgenden wird eine Kombination aus

• 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

Beachten Sie die font-family Spezifikation: alle Zeichen/Code Punkte georgia verwenden, um FontAwesome für alle Codepunkte zurückzufallen georgia bietet keine Zeichen für. georgia bietet keine Zeichen in private use range, exactly where FontAwesome has placed its icons.

Answer 8

Bitte beachten Sie diesen Link. Sie können eine beliebige Taste haben Sie nur Javascript verwenden möchten das Formular abzuschicken

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

Answer 9

Sie können dies tun:

HTML-Code:

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

Hinweis: Sie können verwenden und Aktion und Methode Ihrer Wahl und Id und jeder Text beginnend mit href = "javascript: und ending to()" aber stellen Sie sicher, dass wenn Sie die gleichen Dinge wie id und etwas Text tippen Sie Ihre Ersetzung an den gleichen Stellen (Java Script und HTML-Code).

Java-Script-Code:

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

Answer 10

Hier ist ein anderes Beispiel:

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