it-swarm.com.de

HTML: Wie erstelle ich einen Senden-Button mit Text + Bild?

Ich hätte gerne einen Submit-Button, der Text und ein Bild enthält. Ist das möglich?

Ich kann genau den gewünschten Look mit Code erhalten, der wie folgt aussieht:

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

... aber ich habe keinen Weg gefunden, eine davon für meine Formen zu haben ... Gibt es eine Möglichkeit, dies mit einem 

<input type="submit" ...> 

element? Oder bin ich gezwungen, den Bild- oder TextWeg zu gehen? Danke für Ihre Hilfe!

33
David

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

Versuchen Sie, type="submit" anstelle von type="button" in Ihr button-Element ( source ) einzufügen.

Achten Sie jedoch besonders auf Folgendes von dieser Seite:

Wenn Sie das button-Element in einem HTML-Formular verwenden, senden verschiedene Browser unterschiedliche Werte. Internet Explorer übermittelt den Text zwischen den Tags <button> und </button>, während andere Browser den Inhalt des value-Attributs übermitteln. Verwenden Sie das Eingabeelement, um Schaltflächen in einem HTML-Formular zu erstellen.

27
adrianbanks

Nehmen wir an, Ihr Bild ist ein 16x16 .png-Symbol namens icon.png. Nutzen Sie die Kraft 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 links vom Text angezeigt.

57
Adam Bard

Falls Dingbats/Icon-Fonts eine Option sind, können Sie diese anstelle von Bildern verwenden.

Das Folgende verwendet eine Kombination aus

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: Für alle Zeichen/Codepunkte wird georgia verwendet, wobei FontAwesome für alle Codepunkte gilt, für die georgia keine Zeichen bereitstellt. georgia liefert keine Zeichen im private Verwendung-Bereich , genau dort, wo FontAwesome seine Symbole platziert hat.

11
Abdull

Sie sind der Antwort selbst schon sehr nahe

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

Oder Sie können das Typattribut einfach entfernen

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

Ich habe eine sehr einfache Lösung gefunden! Wenn Sie ein Formular haben und eine benutzerdefinierte Schaltfläche zum Senden verwenden möchten, können Sie folgenden Code verwenden:

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

Oder leiten Sie es einfach auf einen Link einer Seite.

4
LucaSpeedStack

Bitte beziehen Sie sich auf diesen Link. Sie können eine beliebige Schaltfläche verwenden, die Sie zum Senden des Formulars verwenden müssen

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

2
user1363516

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

Ändern Sie die Eingabestilelemente so, wie Sie die Schaltfläche benötigen, die Sie benötigen.

Ich hoffe es war hilfreich.

2

Sehr interessant ... Ich konnte mein Formular zum Laufen bringen, aber die resultierende E-Mail wird angezeigt:

imageField_x: 80 imageField_y: 17

am unteren Rand der E-Mail, die ich bekomme.

Hier ist mein Code für die Buttons.

    <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 hilft dir das und mir auch.

:-)

1
MoJo

Du kannst das:

HTML Quelltext:

    <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 eine Aktion und eine Methode Ihrer Wahl sowie die ID und jeden beliebigen Text verwenden, der mit href = "javascript: und endend auf ()" beginnt. Stellen Sie jedoch sicher, dass Sie dieselben Elemente wie id und etwas Text eingeben, wenn Sie dieselben eingeben Ersatz an den gleichen Stellen (Java-Skript und HTML-Code).

Java-Skriptcode:

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

Hier ist ein anderes Beispiel:

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

0
Abdi