How do I use an image as a submit button?

Question

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> 

Garboil

I was just trying to differentiate from the code. I didn't know they already do that. – Garboil

Answer 1

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> 

Tayler

Justin, Last question, how do I carry that 'userInput' value into the next page's form so it can be submitted with the next form. I want the value to be hidden. – Garboil

That's a really loaded question because I have no idea what programming languages or frameworks you're working with. It's best to post that as a different question and provide that information (e.g., ASP.NET, ASP, PHP, etc.) so someone specialized in that area can help you more thoroughly. But first, I would look around the site to see if the question has been asked before. – Tayler

Note that this will behave differently on a form compared to an actual input of type submit under certain conditions. – Sandalwood

Best answer! The official way to make an image submit button. See also: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – Girasol

This will not work if you wish to actually embed an img or svg element. – Uncover

This answer should be updated to explain more of the why, not just the how. As @Girasol pointed out, this is the "official" way to do this. "<input> elements of type image are used to create graphical submit buttons". – Quitt

Answer 2

Why not:

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

Adrieneadrienne

seems better to me since it preserve the essential type of the action triggered by the element – Mendoza

It is illegal to associate an image map with an IMG that appears as the contents of a BUTTON element. – Annorah

thanks lot , stack overflow need one important feature show correct anser and top up rating show to beging of statting. this answe really help fulll. otrher anser can't so why wast dev time. – Ommatidium

Answer 3

Use CSS :

input[type=submit] {

background:url("BUTTON1.jpg");

}

For HTML :

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

Nakamura

where do I paste that? what do I need to delete? (I am not a programmer) – Garboil

Observation: it's not in the long-term best interest of a site full of programmers to teach non-programmers how to survive without hiring programmers... – Tayler

hahahahha :P I was also going to post that answer you posted but i thought that it is not a good idea to tell new programmers to use ancient scripts! I know, I was also not a good helper at stacky before when i started it but now i am just better :D – Nakamura

Answer 4

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>

Ignominy

Answer 5

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

Jural

Answer 6

if you need to make a button in the form of an icon from bootstrap do that:

<button type="submit" style="background-color:unset;border:none;">
    <i class="bi bi-person"></i>
    <p style="margin-top:-0.9em;">Logout</p>
</button>

Teniers

Answer 7

HTML:

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

CSS:

.button {  }

Geyer