单页应用程序：如果我没有向服务器发布表单值并且没有使用任何 HTML 验证，我可以停止使用 <form> 标签吗？

Question

这更像是一个概念性问题。

TLDR: 由于我没有通过 HTTP 将表单信息发布到服务器，我也没有使用 HTML5 验证，我是否丢失了什么不使用 <form> 和传统 HTML submit?

我在一个项目中使用 React 有一段时间了。

这是一个单页应用程序，我的整个后端将基于Firebase Cloud Functions。

由于它是单页应用程序，不欢迎表单提交重定向和页面刷新。

我一直在想，到目前为止我构建的任何表单，如果没有 html <form> 标签，我也可以做同样的事情。

实际上，我所有的表单组件提交函数都有类似的内容：

function onSubmit(event){
  event.preventDefault(); // BASICALLY DON'T SUBMIT ANYTHING AND LET MY CODE HANDLE THIS
  touchAllInputsValidateAndSubmit();
  return;
}

因为我没有向服务器发布任何内容（我将调用 Firebase 云函数）并且我不依赖于 HTML5 验证，所以我真的需要使用 <form> 和 <input type="submit"/> 或 <button type="submit"/> ?

基本上，假设我的代码将处理验证（不使用 HTML5 验证），我希望在 React 中构建任何表单组件，我可以这样做：

function SomeFormComponent() {
  const [formState,setFormState] = useState(); // STORE FORM INPUT VALUES IN STATE

  function handlePseudoSubmit() {
    callCloudFunction(formState);  // ON SUBMIT, PASS THE FORMSTATE TO A CLOUD FUNCTION
  }

  return(
    <React.Fragment>

      // Clickable divs for checkboxes
      // Regular inputs
      // Can use contenteditable divs
      // Whatever you can think of that could be part of a form

      <button onClick={handlePseudoSubmit}>
        Click to PseudoSubmit
      </button>

    </React.Fragment>
  );
}

问题

由于我没有通过 HTTP 将表单信息发布到服务器，我也没有使用 HTML5 验证，在不使用 <form> 和传统 HTML submit?

Answer 1

我建议您不要使用 <form> 元素。代码的首要任务之一是使其可读并表达意图。这是 MDN introduction to the <form> element:

The HTML element represents a document section that contains interactive controls for submitting information to a web server.

由于您没有向服务器提交信息，因此使用 <form> 元素可能会造成混淆。

Answer 2

简答

~~对于您的特定用例，您可能不需要它，因为工程成本可能远远超过您将获得的收益（not-so-great 投资回报率，如果有的话）。~~

实际上，根据表单的不同，我可能仍会使用表单元素来捕获 onSubmit 事件，因为有两种提交表单的方式：

点击某种提交按钮。
在表单中按 enter 键。

长答案

您可以使用表单元素作为 JavaScript 尚未加载或由于任何原因从未加载时的后备。诚然，如果您在网站上对 JavaScript 投入如此之多，这可能是一个巨大的边缘案例，但在 完美世界 :

不会对用户的 JavaScript 支持做出任何假设。
一切都会优雅地降级（即，没有 JavaScript，事情仍然可以工作）。

从 e-commerce 的角度思考这个问题。您能想象点击“添加到购物车”按钮什么也没做，因为 JavaScript 还没有加载吗？您仍然可以执行表单提交作为后备，但这也需要更多的工程来捕获该表单 post 并执行与在客户端上执行的相同的操作。

幸运的是，使用 React 通用应用程序，您可以在背面共享相同的 JavaScript 代码，就像在正面使用一样。需要考虑的事情。

替代方法

而不是表单 post，您可以让“添加到购物车”按钮直接导航到购物车页面，并使用一些查询字符串参数告诉服务器要添加的项目和数量。不需要 client-side JavaScript！

建议

在构建新网页或 React 组件时，我喜欢采用 3 步法：

先从 HTML 件开始。看看在没有 CSS 或 JavaScript 的情况下你能走多远。让你的渲染方法 return 一些原始 DOM 元素（例如，fieldsets, radio button groups for color and size selections). Really focus on the structure of your HTML document outline, accessibility 和键盘导航。提出一个拉取请求。
添加你的 CSS 并尽可能让它看起来漂亮，但这次你将忽略 JavaScript 并看看你能做到多远。使用 CSS :hover 和其他 pseudo classes 来获得交互行为 w/o JS。提出另一个仅包含这些更改（和屏幕截图）的拉取请求！
最后一步是您的 JavaScript。尽可能少地添加以完成工作，但要完成工作！提交您的最终拉取请求。

单页应用程序：如果我没有向服务器发布表单值并且没有使用任何 HTML 验证，我可以停止使用 <form> 标签吗？

Singe Page App: If I'm not posting form values to the server and I'm not using any HTML validation, can I stop using the <form> tag?

html

javascript

forms

reactjs

react-hooks

简答

长答案

替代方法

建议