2013-01-07 11 views
24

Kann jemand helfen, dies zu ändern, um ein Bild mit dem Namen BUTTON1.JPG anstelle der Standard submit Schaltfläche zu integrieren?Wie verwende ich ein Bild als Übermittlungsschaltfläche?

<form id='formName' name='formName' onsubmit='redirect();return false;'> 
    <div class="style7"> 
     <input type='text' id='userInput' name='userInput' value=''> 
     <input type='submit' name='submit' value='Submit'> 
    </div> 
</form> 
+0

Ich war gerade aus dem Code zu unterscheiden versuchen. Ich wusste nicht, dass sie das schon tun. – Rolf

Antwort

48

Verwenden Sie ein image Art eingegeben:

<input type="image" src="/Button1.jpg" border="0" alt="Submit" /> 

Der vollständige HTML:

<form id='formName' name='formName' onsubmit='redirect();return false;'> 
    <div class="style7"> 
     <input type='text' id='userInput' name='userInput' value=''> 
     <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" /> 
    </div> 
</form> 
+0

Justin, Letzte Frage, wie trage ich den Wert 'userInput' in das Formular der nächsten Seite, damit er übermittelt werden kann mit dem nächsten Formular. Ich möchte, dass der Wert ausgeblendet wird. – Rolf

+2

Das ist eine wirklich geladene Frage, weil ich keine Ahnung habe, mit welchen Programmiersprachen oder Frameworks Sie arbeiten. Es ist am besten, dies als eine andere Frage zu posten und diese Informationen bereitzustellen (z. B. ASP.NET, ASP, PHP usw.), sodass jemand, der auf diesen Bereich spezialisiert ist, Ihnen besser helfen kann. Aber zuerst würde ich mich auf der Seite umsehen, ob die Frage schon einmal gestellt wurde. –

6

Verwenden CSS:

input[type=submit] { 

background:url("BUTTON1.jpg"); 

} 

Für HTML:

<input type="submit" value="Login" style="background:url("BUTTON1.jpg");"> 
+0

wo kann ich das einfügen? Was muss ich löschen? (Ich bin kein Programmierer) – Rolf

+9

* Beobachtung *: es ist nicht im langfristigen besten Interesse einer Website voller Programmierer zu lehren, Nicht-Programmierer zu lehren, wie man ohne Programmierer mieten ... –

+0

hahahahha: PI wurde auch zu posten Diese Antwort hast du gepostet, aber ich dachte, dass es keine gute Idee ist, neuen Programmierern zu sagen, alte Skripte zu benutzen! Ich weiß, ich war auch kein guter Helfer bei Stacky, bevor ich angefangen habe, aber jetzt bin ich einfach besser: D –

1
<form id='formName' name='formName' onsubmit='redirect();return false;'> 
     <div class="style7"> 
    <input type='text' id='userInput' name='userInput' value=''> 
    <img src="BUTTON1.JPG" onclick="document.forms['formName'].submit();"> 
</div> 
</form> 
8

Warum nicht:

<button type="submit"> 
<img src="mybutton.jpg" /> 
</button> 
-3

HTML:

<button type="submit" name="submit" class="button"> 
    <img src="images/free.png" /> 
</button> 

CSS:

.button { } 
4

gerade wieder bewegen, um die Grenze und fügen Sie ein Hintergrundbild in css

Beispiel:

$("#form").on('submit', function() { 
 
    alert($("#submit-icon").val()); 
 
});
#submit-icon { 
 
    background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */ 
 
    background-size: cover; 
 
    border: none; 
 
    width: 32px; 
 
    height: 32px; 
 
    cursor: pointer; 
 
    color: transparent; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <input type="submit" id="submit-icon" value="test"> 
 
</form>