Html 按钮图像作为表单输入提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3381609/
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
button image as form input submit button?
提问by nectar
<form method="post" action="confirm_login_credentials.php">
<table>
<tr>
<td>User ID:</td>
<td><input type="text" id="uid"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" id="pass"></td>
</tr>
<tr>
<td colspan="2" align="right">
<a href="#"><img src="images/login.jpg"></a>
</td>
</tr>
</table>
</form>
I am using an image in place of a submit button. How can I submit the login details when the user clicks on the login image as a submit button does?
我使用图像代替提交按钮。当用户单击登录图像作为提交按钮时，如何提交登录详细信息？
回答by Darin Dimitrov
You could use an image submit button:
您可以使用图像提交按钮：
<input type="image" src="images/login.jpg" alt="Submit Form" />
回答by Jahmic
Late to the conversation...
谈话迟到...
But, why not use css? That way you can keep the button as a submit type.
但是，为什么不使用 css？这样您就可以将按钮保留为提交类型。
html:
html：
<input type="submit" value="go" />
css:
css：
button, input[type="submit"] {
background:url(/images/submit.png) no-repeat;"
}
Works like a charm.
奇迹般有效。
EDIT: If you want to remove the default button styles, you can use the following css:
编辑：如果要删除默认按钮样式，可以使用以下 css：
button, input[type="submit"]{
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
from this SO question
从这个问题
回答by bcintegrity
You can also use a second image to give the effect of a button being pressed. Just add the "pressed" button image in the HTMLbefore the input image:
您还可以使用第二张图像来呈现按下按钮的效果。只需HTML在输入图像之前添加“按下”按钮图像：
<img src="http://integritycontractingofva.com/images/go2.jpg" id="pressed"/>
<input id="unpressed" type="submit" value=" " style="background:url(http://integritycontractingofva.com/images/go1.jpg) no-repeat;border:none;"/>
And use CSSto change the opacity of the "unpressed" image on hover:
并用于CSS更改悬停时“未压缩”图像的不透明度：
#pressed, #unpressed{position:absolute; left:0px;}
#unpressed{opacity: 1; cursor: pointer;}
#unpressed:hover{opacity: 0;}
I use it for the blue "GO" button on this page
我将它用于此页面上的蓝色“GO”按钮
回答by Vishal Biradar
<div class="container-fluid login-container">
<div class="row">
<form (ngSubmit)="login('da')">
<div class="col-md-4">
<div class="login-text">
Login
</div>
<div class="form-signin">
<input type="text" class="form-control" placeholder="Email" required>
<input type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="col-md-4">
<div class="login-go-div">
<input type="image" src="../../../assets/images/svg/login-go-initial.svg" class="login-go"
onmouseover="this.src='../../../assets/images/svg/login-go.svg'"
onmouseout="this.src='../../../assets/images/svg/login-go-initial.svg'"/>
</div>
</div>
</form>
</div>
</div>
This is the working code for it.
这是它的工作代码。
回答by john
Make the submit button the main image you are using. So the form tags would come first then submit button which is your only image so the image is your clickable image form. Then just make sure to put whatever you are passing before the submit button code.
使提交按钮成为您正在使用的主图像。因此，表单标签将首先出现，然后提交按钮，这是您唯一的图像，因此图像是您可点击的图像表单。然后确保在提交按钮代码之前放置您正在传递的任何内容。
回答by Vishal Gupta
This might be helpful
这可能会有所帮助
<form action="myform.cgi">
<input type="file" name="fileupload" value="fileupload" id="fileupload">
<label for="fileupload"> Select a file to upload</label>
<br>
<input type="image" src="/wp-content/uploads/sendform.png" alt="Submit" width="100"> </form>
