javascript - 单页应用程序 : If I'm not posting form values to the server and I'm not using any HTML validation, 我可以停止使用 <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>元素可能会造成困惑。