HTML: Wie eine Taste einreichen mit Text + Bild in ihm?

Question

Ich mag eine Submit-Button haben, den Text enthält und ein Bild. Ist das möglich?

kann ich das 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, einen von denen, für meine Formen gefunden. Gibt es eine Möglichkeit, dass mit einem tun

<input type="submit" ...> 

Element? Oder bin ich gezwungen, die Bild oder Text zu gehen Art und Weise? Vielen Dank für Ihre Hilfe!

Answer 1

input type="submit" ist der beste Weg, eine Schaltfläche in einem Formular haben. Die Kehrseite der Medaille ist, dass Sie nicht etwas anderes als Text als Wert setzen. Das Button-Element kann andere HTML-Elemente und Inhalte enthält.

Versuchen type="submit" statt type="button" in Ihrem button Elemente setzen ( Quelle ).

Beachten 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 wird der Text zwischen den <button> und </button> Tags einreichen, während andere Browser den Inhalt des Wertattribut einreichen. Verwenden Sie das Eingabeelement erstellen Schaltflächen in einem HTML-Formular.

Answer 2

Angenommen, Ihr Bild ein Symbol .png 16x16 heißt icon.png die Macht des CSS verwenden!

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>

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

Answer 3

Bei dingbats / Symbol Schriftarten eine Option sind, können Sie sie anstelle von Bildern verwendet werden.

Im Folgenden wird eine Kombination aus

• ein Symbol Schriftart (z Font Ehrfürchtig) ,
• Zeichencodierungen in HTML (zum Beispiel &#xf090)
• die Unicode-Codepunkt des Symbols (bis &#xf090 für die Zeichen in verwenden möchten 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, für jeden Codepunkte FontAwesome georgia zurückzufallen bietet keine Zeichen für. georgia bietet keine Zeichen in der privaten Gebrauch reichen , genau, wo FontAwesome platziert hat seine Symbole .

Answer 4

Sie sind ganz in der Nähe der Antwort selbst

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

Oder Sie können einfach das Typ-Attribut entfernen

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

Answer 5

Ich habe eine sehr einfache Lösung gefunden! Wenn Sie ein Formular und Sie wollen eine individuelle haben Senden-Schaltfläche 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 einfach direkt auf einen Link von einer Seite.

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

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

Ich hoffe, es war hilfreich.

Answer 7

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 8

Sehr interessant. Ich konnte meine Form bekommen zu arbeiten, aber die daraus resultierenden E-Mail wird angezeigt:

imageField_x: 80 imageField_y: 17

am unteren Ende der E-Mail, die ich erhalte.

Hier ist mein Code für die Schaltflächen.

    <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 dir und mir dies auch helfen.

: -)

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 verwenden können und Aktion und Methode Ihrer Wahl und Id und einen beliebigen Text aus href = Start „javascript: und endet an ()“, aber stellen Sie sicher, dass, wenn ich die gleichen Dinge wie id geben und etwas Text geben Sie Ihren Ersatz 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">