html-如何使用图像作为提交按钮?

有人可以帮助更改此内容以合并名为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> 
Rolf asked 2020-08-12T05:46:23Z
6个解决方案
73 votes

使用<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> 类型的输入:

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

Devin Burke answered 2020-08-12T05:46:34Z
18 votes

为什么不:

<button type="submit">
<img src="mybutton.jpg" />
</button>
volume one answered 2020-08-12T05:46:55Z
6 votes

使用CSS:

input[type=submit] {

background:url("BUTTON1.jpg");

}

对于HTML:

<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">
Muhammad Talha Akbar answered 2020-08-12T05:47:20Z
4 votes

只需删除边框并在CSS中添加背景图片

例:

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

answered 2020-08-12T05:47:44Z
1 votes
<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>
yajakass answered 2020-08-12T05:47:59Z
-5 votes

HTML:

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

CSS:

.button {  }
Shaddy answered 2020-08-12T05:48:24Z
translate from https://stackoverflow.com:/questions/14199788/how-do-i-use-an-image-as-a-submit-button