代码之家 › 专栏 › 技术社区 › Topher Fangio

提交链接-没有javascript:缺点?

graceful-degradation forms css html

0

Topher Fangio · 技术社区 · 15 年前

前几天我发现了一个启示。当试图使用图像创建提交按钮时,我遇到了一个问题,图像不是显示的,而是 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 回复 | 直到 15 年前

1

2

tvanfosson 15 年前

我喜欢使用实际链接(隐藏)的解决方案,该链接通过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();

2

5

Greg 15 年前

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

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

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

3

2

James Black 15 年前

使用HTML4.01 Strict,它可以在ff3.5上工作,但不能在ie8或chrome上工作。链接可以工作,但是没有文本,只有一个空白点来显示丢失的图像。

因此,这似乎是一个坏主意,因为它可能只在一个浏览器上工作。对我来说,这是一个很大的缺点,除非你唯一的市场是火狐浏览器,那么,继续,好主意。:)

正如JamesSkidmore所建议的,很容易用javascript进行onclick,将其作为一个帖子提交。

我建议不引人注目的JS,因此,如果某人没有JS,那么它将作为链接工作,执行GET提交,但是如果他们有JS,那么它将改变行为,使之成为post,而不会发生丑陋的URL更改。

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

4

0

James Skidmore 15 年前

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