0

前几天我发现了一个启示。在尝试使用图像创建提交按钮时，我遇到了图像未显示但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 应用不正确这一明显事实）？

4

4 回答 4

5

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

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

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>
于 2009-09-24T21:48:31.060 回答
2

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

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

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

我建议使用不显眼的 JS，因此，如果有人没有 JS，那么它将作为链接工作，进行 GET 提交，但如果他们有 JS，那么它会将行为更改为 POST，而不会更改难看的 url。

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

于 2009-09-24T21:00:04.793 回答
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();
于 2009-09-24T21:02:44.180 回答
0

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

于 2009-09-24T20:48:41.337 回答