如何将图像用作提交按钮？

Question

有人可以帮助改变它,以包含一个名为BUTTON1.JPG而不是标准submit按钮的图像？

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

Answer 1

使用image类型输入:

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

完整的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> 

Answer 2

为什么不:

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

Answer 3

使用CSS:

input[type=submit] {

background:url("BUTTON1.jpg");

}

对于HTML:

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