提交链接 - 没有 Javascript：缺点？答案

【问题标题】：Submit Link - No Javascript: Downsides?提交链接 - 没有 Javascript：缺点？
【发布时间】：2010-12-01 05:36:43
【问题描述】：

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

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

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

<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 应用不正确这一明显事实之外）？

【问题讨论】：

您的示例代码中有语法错误：method='post>（需要关闭引号）
糟糕，我看的不够仔细。感谢您接听！

标签： html css forms graceful-degradation

【解决方案1】：

不需要使用图像输入，为什么不使用常规的提交按钮并应用一些粗暴的样式使其看起来像常规文本？

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

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

【讨论】：

【解决方案2】：

我喜欢这样一种解决方案，它使用通过 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();

【讨论】：

【解决方案3】：

使用 HTML 4.01 Strict 它可以在 FF3.5 上运行，但不能在 IE8 或 Chrome 上运行。该链接有效，但没有文本，只是缺少图像的空白点。

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

正如 James Skidmore 所建议的，使用 javascript 进行点击以将其作为帖子提交是很容易的。

我会建议不显眼的 JS，所以，如果有人没有 JS，那么它将作为链接工作，进行 GET 提交，但如果他们有 JS，那么它会将行为更改为没有丑陋 url 的 POST改变。

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

【讨论】：

感谢您在多个浏览器上查看。我以为会是这样，但由于我在 Mac 上，如果不安装 VM，我无法准确测试 IE。

【解决方案4】：

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

【讨论】：