Html 如何将图像用作提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14199788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 04:47:40 来源:igfitidea点击:
How do I use an image as a submit button?
提问by Rolf
Can someone help to change this to incorporate an image called BUTTON1.JPGinstead of the standard submitbutton?
有人可以帮助更改此设置以合并称为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>
回答by Devin Burke
Use an imagetype input:
使用image类型输入：
<input type="image" src="/Button1.jpg" border="0" alt="Submit" />
The full HTML:
完整的 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> 回答by volume one
Why not:
为什么不：
<button type="submit">
<img src="mybutton.jpg" />
</button>
回答by Muhammad Talha Akbar
Use CSS :
使用 CSS ：
input[type=submit] {
background:url("BUTTON1.jpg");
}
For HTML :
对于 HTML ：
<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">
回答by Muhammad Talha Akbar
Just remove the border and add a background image in css
只需删除边框并在 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>回答by yajakass
<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>
回答by Shaddy
HTML:
HTML：
<button type="submit" name="submit" class="button">
<img src="images/free.png" />
</button>
CSS:
CSS：
.button { }
