如何使用图片作为提交按钮？(How do I use an image as a submit bu

有人可以帮助改变这种纳入称为图像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");">

Answer 4:

只是删除边界和CSS添加背景图片

例：

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

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>

Answer 6:

HTML：

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

CSS：

.button {  }

文章来源: How do I use an image as a submit button?