把 button 伪装成超链接

06月 17th, 2009 — Dreamer

今天看到一篇文章：Styling buttons to look like links，里面讲到一些东西挺实用，也确实需要开发者注意。比如，有些开发者就是会用 a 标签来做提交。比如有一个列表，每个列表后面都会有一个“删除”链接：

1

列表列表 <a href="/delete.php?id=xxx" title="">删除</a>

点击删除链接后就会带一个id或者其它参数到delete.php页面，delete.php中再去实现删除的逻辑。这样做有一个问题，就是它提交参数使用的是 GET 方法。根据HTML中的定义，GET方法一般是用来获取数据的，不会涉及到对后端数据的修改；而POST方法则可能包含对数据库的修改等操作，所以删除用链接实现不太好。有一种解决办法就是把 button 伪装成超链接的样子，然后在外面套上 form ，CSS 现在很强大，伪装一下不是很困难，可以参考这篇文章：Styling buttons to look like links 。另外，相对于用 input 实现按钮而言，button 更强大一点，建议多用 button 。

有时候设计师为了界面上的美观或者UI上的一致，会把一些元素设计成超链接的样子，然后web developer 拿过来图之后可能就“忠实”执行设计师的意图把那个地方做成了超链接，却忽略了一些功能上的考虑。这个就好像HTML标签语义化一样，虽然有些地方用 div 或者 span 看上去都一样，但是还是有区别的。以后做东西的时候我一定要多想想，不要被表面的东西迷惑了。

相关阅读：

Push my button
Rediscovering the Button Element


本文链接:http://www.zhuoqun.net/html/y2009/1297.html 转载请注明出处。TrackBack：http://www.zhuoqun.net/html/y2009/1297.html/trackback

相关日志


Posted in Other, 技术.

8条评论

  • At 2009.06.17 22:51, Robin said:

    用ajax呀, 干嘛要把按钮伪装成链接这么复杂.

    [Reply]
    • At 2009.06.18 09:03, Dreamer said:

      有时候用 ajax 会把应用复杂化，还需要用js对页面中的元素做一些处理。

      [Reply]
    • At 2009.06.18 12:40, sasumi said:

      感觉语义化不好 。 对于一个只有一个input 的表单。感觉上怪怪的。

      [Reply]
      • At 2009.06.19 02:46, aben said:

        -moz-user-select: text; 没有明白这行代码的含义…那位老师给解释一下

        [Reply]
        • At 2009.06.19 08:57, Dreamer said:

          这行代码是让 button 上面的文字在 Firefox 下可以用鼠标选中，不然的话是没法选中的。

          [Reply]
          • At 2009.06.20 01:10, aben said:

            谢谢，果然如此…

            [Reply]
        • At 2009.06.19 22:39, 墨尔本 said:

          hehe~应该用http定义的其他方法 而不是post和get

          [Reply]
          • At 2009.06.25 11:06, 网页打不开 said:

            其实也不难奥 就是那种点击的效果比较难做

            [Reply]
            (Required)
            (Required, will not be published)
            « Mac4Lin

            Advanced Bash-Scripting Guide »