按钮图像作为表单输入提交按钮？

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

我正在使用图像来代替提交按钮。作为提交按钮，用户点击登录图像时，如何提交登录详细信息？按钮图像作为表单输入提交按钮？

来源

2010-08-01 nectar

110

你可以使用一个image submit button：

<input type="image" src="images/login.jpg" alt="Submit Form" />

来源

2010-08-01 10:17:38

是的。这是最好的方法。一个侧面说明：一些服务器端语言有不同的方式来确定按钮是否被按下，通常通过鼠标点击的X和Y坐标来进行。因此，在你选择的语言的文档上有一个注意事项（如果你需要的话） – Amadiere 2010-08-01 10:24:01

如何在图像上插入按钮名称？ – 2013-01-08 11:10:06

这适用于简单的表单提交，但如果您需要图像携带一个值（以确定点击了哪个图像/按钮），那么您将在FireFox中失败 - 您将不得不使用带背景的按钮:-( – schmoopy 2013-03-26 23:19:26

末到谈话...

但是，为什么不使用CSS？这样你可以保持按钮提交类型：

<input type="submit" value="go" style="background:url(/images/submit.png) no-repeat;" />

工程就像一个魅力。

来源

2013-07-19 04:11:47 Jahmic

您还可以使用第二张图片来指定按下按钮的效果。只需在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

来源

2014-07-30 20:26:11 bcintegrity

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

这是它的工作代码。

来源

2017-08-15 11:12:28

使提交按钮成为您正在使用的主要图像。所以表单标签先来，然后提交按钮，这是你唯一的图像，所以图像是你的可点击图像形式。然后，只要确保将提交按钮代码之前传递的任何内容。

来源

2017-08-24 02:04:39 john

按钮图像作为表单输入提交按钮？

回答

相关问题