Question

前几天我发现了一个启示。当尝试使用图像创建提交按钮时，我遇到了一个问题，即图像没有显示但value文本是。当时，这不是我想要的，但现在，当我回顾过去时，我看到了一些潜在的用途。

如果您需要将数据发送到其他页面，但不需要用户输入，您可以通过GET或通过POST的表单通过链接（或表单）发送数据。问题是前者创建了丑陋的URL，而后者需要一个看起来不合适的submit按钮。当然，我可以想出一个图像，但如果我只想要可选择的文字怎么办。

所以，我开始玩了一下，Firefox似乎呈现了我想要的内容，作为提交表单的可点击链接。您所要做的就是从src标记中删除input type='image'属性：

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

此解决方案是否适用于其他浏览器？这样做有什么缺点（除了你的链接CSS没有正确应用的明显事实）？

Answer 1

没有必要使用图像输入，为什么不使用常规提交按钮并应用一些沉重的样式使其看起来像普通文本？

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

Answer 2

使用HTML 4.01 Strict它适用于FF3.5，但不适用于IE8或Chrome。该链接有效，但没有文字只是丢失图像的空白点。

所以，这似乎是一个坏主意，因为它可能只适用于一个浏览器。对我来说这是一个相当大的缺点，除非你的唯一市场是针对Firefox浏览器，那么，继续，好主意。：）

正如詹姆斯·斯基德莫尔（James Skidmore）建议的那样，使用javascript进行onclick很容易将其作为帖子提交。

我会建议不引人注目的JS，所以，如果有人没有JS，那么它将作为一个链接工作，做GET提交，但如果他们有JS那么它会将行为改为POST而没有丑陋的url变化

或者，如前所述，图像的背景可以与表单背景融合。

Answer 3

我喜欢使用实际链接（隐藏）的解决方案，该链接通过javascript与noscript标记内的按钮一起显示。

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="test@test.com" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

Answer 4

您可以通过JS动态提交表单，或使用透明或白色背景的常规提交按钮。

提交链接 - 没有Javascript：下行？

4 个答案: