表单上的按钮 vs 链接 vs 输入类型 =“提交”

Posted 2023-02-22

【中文标题】表单上的按钮 vs 链接 vs 输入类型 =“提交”

【英文标题】：Button vs link vs input type="submit" on a form

【发布时间】：2012-07-12 18:50:52

【问题描述】：

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

我看到三个主要选项：

使用链接：

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

缺点：

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

使用按钮：

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

缺点：

用户必须启用 javascript。尽管根据我们的统计数据，我们 99.8% 的用户都启用了 JavaScript，如果他们不这样做，他们无论如何都很难在我们的网站上工作（我们有许多使用 JavaScript 实现的功能）。所以我认为我们 100% 的实际活跃用户都启用了 JavaScript。

使用<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 中不起作用。 这是我们网站的私有部分，因此搜索引擎看不到它，我们真的不需要链接来帮助搜索引擎跟踪它并索引资源（这是在网络中使用链接而不是按钮的常用参数)

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

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

【问题讨论】：

<button>s 也提交一个表单，如果你想要比<input type="button">更具风格的东西...

【参考方案1】：

我肯定会使用一个链接：progressive enhancement。

您希望按钮在关闭 Javascript 的情况下仍然可用（请记住：在页面加载期间，每个用户都是非 javascript 用户。如果他们的连接速度较慢（例如移动设备），他们应该他们一看到按钮就可以回复）。

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

当用户没有提交任何确定是错误的东西时使用 POST。即使使用 GET，它仍然不是真正的表单材料...

【讨论】：

我听说过这样一种观点，即不应为表单控件和按钮设置样式，而应将其留给浏览器和操作系统以保持一致性，以便用户对 UI 感到熟悉。我个人认为这有点硬核。

@WesleyMurch - 我完全不同意。按钮和表单控件应该是您的应用程序的原生控件，而不是操作系统（除非您正在构建一个原生应用程序）。显然，不要过火；确保您不会因为一些花哨的控件而让您的用户失望。保持按钮/控件的精神，但要调整它以适应您的整体主题。

我打算使用默认按钮样式 :) 那有什么问题？

@nightcoder - 无论如何，重点仍然存在。样式化链接不是问题。 5-10 行 CSS 就可以解决问题。你真正应该关心的是语义。

@JosephSilber：当然。我记得在 SO 上有人试图弄清楚如何在没有边框或背景的文本输入中使用交替颜色的文本阴影和一些疯狂的衬线 Google 字体。有些人会忘乎所以，这可能会让用户感到困惑，但默认按钮样式肯定是丑。

【参考方案2】：

将<a> 和<button> 设置为相同的样式非常简单，只需使用一个通用的类名即可。 <input type="button"> 可能有点棘手，但你不需要使用它。

您的标签选择应该从不由您的预期演示决定，而是元素是以及它做什么。链接应标记为 <a>.

【讨论】：

+1，感谢您积极参与讨论，很有用。

【参考方案3】：

我同意POST 是错误的。因此，请将您的表单设置为使用method="get"。只使用一种形式并忽略隐藏字段。使用<button>，显示的文本可能与提交的值不同。

<form action="customer.php" method="get">
    <input type="hidden" name="reply" />
    <div class="message">
        <div class="messageBody">..</div>
        <button name="messageid" value="1234">Reply</button>
    </div>
    <div class="message">
        <div class="messageBody">..</div>
        <button name="messageid" value="1235">Reply</button>
    </div>
    ...
</form>

【参考方案4】：

所有方法都是正确的，除了方法 2 仅在您可以安全地忽略非 JavaScript 浏览的假设下是正确的。

关于表单的假设和 cmets 是不正确的，或者至少是误导性的。表单不需要涉及用户输入；可以使用表格，例如提交以前收集的数据，除了提交字段外没有其他字段。即使不更改任何内容，也可以使用 POST 方法，例如由于输入数据的数量（因为 GET 数据的上限相当低）；此外，问题中显示的表单使用了默认方法 GET。

否则，这主要是一个非建设性问题，需要讨论和论证，而不是技术解决方案。