How do I use an image as a submit button?

HtmlForm SubmitSubmit Button

Html Problem Overview

Can someone help to change this to incorporate an image called BUTTON1.JPG instead of the standard submit button?

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

Html Solutions

Solution 1 - Html

Use an image type input:

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

The full 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="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />
  </div>
</form>

Solution 2 - Html

Why not:

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

Solution 3 - Html

Use CSS :

input[type=submit] {

background:url("BUTTON1.jpg");

}

For HTML :

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

Solution 4 - Html

Just remove the border and add a background image in css

Example:

$("#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>

Solution 5 - Html

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

Solution 6 - Html

HTML:

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

CSS:

.button {  }
Categories
Recommended Html Solutions
Recommended Form Submit Solutions

Previous Solution:

How to calculate difference between two dates in weeks in python

PythonDatetime

Next Solution:

Android + Pair devices via bluetooth programmatically

AndroidBluetooth

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRolfView Question on Stackoverflow
Solution 1 - HtmlDevin BurkeView Answer on Stackoverflow
Solution 2 - Htmlvolume oneView Answer on Stackoverflow
Solution 3 - HtmlMuhammad Talha AkbarView Answer on Stackoverflow
Solution 4 - Htmluser6766561View Answer on Stackoverflow
Solution 5 - HtmlyajakassView Answer on Stackoverflow
Solution 6 - HtmlShaddyView Answer on Stackoverflow