javascript - 表单上的按钮 vs 链接 vs 输入类型 ="submit"

Question

用户登录到他的控制面板并查看他收到的消息。每条消息附近都有一个“回复”按钮。实现该按钮的正确方法是什么？

我看到三个主要选项:

1. 使用链接:

   <a href="customer.php?reply&messageid=1234">Reply</a>.
   

   缺点:

   • 我们需要将该链接设置为看起来像一个按钮。因为我认为“回复”这个 Action 应该用一个按钮来表示，而不是一个链接(在我看来，当链接到某些资源并且我们在链接文本中有一个名词时，应该使用链接；如果我们想做一个 Action 并在标题中包含动词( Action )- 应使用按钮)。

2. 使用按钮:

   <button onclick="location.href='customer.php?reply&messageid=1234'">Reply</button>`  
   

   缺点:

   • 用户必须启用 JavaScript。虽然根据我们的统计数据，我们 99.8% 的用户都启用了 JavaScript，如果他们不启用，他们将很难在我们的网站上工作(我们有许多功能是用 JavaScript 实现的)。所以我认为我们 100% 的实际活跃用户都启用了 JavaScript。

3. 使用 <input type="submit"> 的表单:

   <form action="customer.php?reply" method="get">
     <input name="messageid" type="hidden" value="1234" />
     <input type="submit" value="Reply" />
   </form>
   

   缺点:

   • 我认为这里使用表格是“人为的”。用户不输入任何内容。我们使用表单只是为了让我们的按钮工作。我还认为，当我们不做任何更改而只需要向用户显示回复表单时使用 POST 请求 - 违反了 REST 原则。但即使使用 GET，我仍然认为在这种情况下使用表单是人为的。

一些其他注意事项:

• 在链接中使用按钮在 IE 中不起作用。
• 这是我们网站的私有(private)部分，因此搜索引擎看不到它，我们真的不需要链接来帮助搜索引擎跟踪它并为资源编制索引(这是在网络中使用链接而不是按钮的常见论据)

你会选择哪一个，为什么？

UPD。好吧，我决定使用一个链接。谢谢大家的讨论!

Answer 1

我肯定会使用链接:progressive enhancement。

即使关闭了 Javascript，您也希望该按钮可用(请记住:在页面加载期间，每个用户都是非 javascript 用户。如果他们的连接速度较慢(例如移动设备)，他们应该能够在他们看到按钮后立即回复)。

样式不是问题(您不会使用默认按钮样式，是吗？)。

当用户没有提交任何东西时使用 POST 肯定是错误的。即使使用 GET，它仍然不是真正的形式 Material ......