按钮图像作为表单输入提交按钮?
问题描述:
<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>
我正在使用图像来代替提交按钮。作为提交按钮,用户点击登录图像时,如何提交登录详细信息?按钮图像作为表单输入提交按钮?
答
末到谈话...
但是,为什么不使用CSS?这样你可以保持按钮提交类型:
<input type="submit" value="go" style="background:url(/images/submit.png) no-repeat;" />
工程就像一个魅力。
答
您还可以使用第二张图片来指定按下按钮的效果。只需在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;"/>
并使用CSS
改变“未按”的形象上悬停的不透明度:
#pressed, #unpressed{position:absolute; left:0px;}
#unpressed{opacity: 1; cursor: pointer;}
#unpressed:hover{opacity: 0;}
我用它this page
答
<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>
这是它的工作代码。
答
使提交按钮成为您正在使用的主要图像。所以表单标签先来,然后提交按钮,这是你唯一的图像,所以图像是你的可点击图像形式。然后,只要确保将提交按钮代码之前传递的任何内容。
是的。这是最好的方法。一个侧面说明:一些服务器端语言有不同的方式来确定按钮是否被按下,通常通过鼠标点击的X和Y坐标来进行。因此,在你选择的语言的文档上有一个注意事项(如果你需要的话) – Amadiere 2010-08-01 10:24:01
如何在图像上插入按钮名称? – 2013-01-08 11:10:06
这适用于简单的表单提交,但如果您需要图像携带一个值(以确定点击了哪个图像/按钮),那么您将在FireFox中失败 - 您将不得不使用带背景的按钮:-( – schmoopy 2013-03-26 23:19:26