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

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

graceful-degradation forms css html

Topher Fangio · 技术社区 · 16 年前

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

tvanfosson 16 年前

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

Greg 16 年前

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

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

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