如何在没有 JavaScript 的情况下设计可扩展的 HTML 表单？

Posted 2023-02-26

【中文标题】如何在没有 JavaScript 的情况下设计可扩展的 HTML 表单？

【英文标题】：How to design an extendable HTML form without JavaScript?

【发布时间】：2012-06-08 21:17:04

【问题描述】：

设计和处理一个用户可以添加任意数量的新输入字段的表单非常乏味不使用 JavaScript。

目前我正在执行以下操作：在表单中使用两个不同的提交按钮，一个用于添加新输入字段，一个用于提交导致数据库请求的表单。

使用的方法是POST

为了添加新的输入字段，我想使用 GET，但由于不可能在一种形式中使用两种方法，因此我必须在 POST 请求中进行。

为一种类型的输入字段做这个是相当容易的，但是当你需要为子表单（同一表单中的一些输入字段组）做这个时，这不仅变得乏味，而且错误-容易！

我不满意，有没有更智能的方法来实现这一点，而无需开始编写大量处理代码并进行重定向或至少简化实现以降低错误风险！

另外，也许 Java 提供了一个解决方案来解决这个一般优雅的问题，因为我使用的是 Java Servlets。

打开 javascript 我会提供一个单独的解决方案，我只关心备用解决方案，这不是正常情况。

【问题讨论】：

为什么要与服务器通信以添加一个新的表单字段，而这只能在客户端完成？另外，为什么要标记Java？

我同意：往返于服务器添加字段是一种糟糕的用户体验。没有理由不在客户端上使用 JavaScript 来执行此任务。

@Diodeus 如果 JavaScript 不可用怎么办？

你应该使用 JavaScript。

现在用户不得不故意关闭 JavaScript，他们会意识到后果。当然，您可能会选择糟糕的往返版本，但这不应该是主要体验。

【参考方案1】：

请看，不使用 JavaScript 会严重限制您的能力：您必须依赖标准的 HTTP 请求/响应周期。换句话说，您必须重建一个新页面（添加一些输入字段）并发送这个新页面每次 - 没有变通方法。

这是我将如何实现它：

<form action="/path/to/action" method="post">
  <input name="param_a" />
  <input name="param_b" />
  <button type="submit" name="next_input" value="param_c">Add a field</button>
  <button type="submit" name="submit">Submit your form</button>
</form>

...然后在服务器端代码中，我只需检查是否发送了 next_input 参数。如果发送，它的值将用于获取要添加的控件 - 并将相应的值（例如param_d）提供给下一个next_input。

更新：但我不禁想知道这是否真的有必要。通常，当这些页面是典型的登录页面（由搜索机器人扫描）时，我们会针对“无 JS”情况进行设计。考虑到一些用户会在没有启用 JS 的情况下访问您的页面，但愿意在启用所有漂亮的东西的情况下使用它……好吧，至少可以说，这不是很划算。 )