CODEWITHSUNDEEP
javascripthtmlreactjsformsreact-hooks
cbdeveloper
cbdeveloper

Reputation: 31365

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?

This is more of a conceptual question.

TLDR: Since I'm not posting form information via HTTP to the server, neither I'm using HTML5 validation, is there anything I'm losing while not using the <form> and traditional HTML submit?

I've been using React in a project for a while now.

It's a Single Page App and my whole backend will be based on Firebase Cloud Functions.

Since it's a Single Page App, form submit redirects and page refreshes are not welcome.

I've been thinking that any form that I've built so far, I could have done the same without the html <form> tag.

Actually, all my form components submit function have something along the lines of:

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

Since I'm not posting anything to the server (I'll be calling Firebase cloud functions) and I'm not relying on HTML5 validation, do I really need to use the <form> and <input type="submit"/> or <button type="submit"/> ?

Basically, assuming that my code will handle the validation (not using HTML5 validation), any form component that I wish to build in React, I could do:

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>
  );
}

QUESTION

Since I'm not posting form information via HTTP to the server, neither I'm using HTML5 validation, is there anything I'm losing while not using the <form> and traditional HTML submit?

Upvotes: 0

Views: 56

Answers (2)

jedmao
jedmao

Reputation: 10502

Short answer

For your specific use case, you probably don't need it, because the engineering cost is probably way more than the benefits you would get (not-so-great ROI, if any).

Actually, depending on the form, I'd probably still use a form element to capture the onSubmit event, because there are two ways to submit a form:

  1. Clicking some kind of submit button.
  2. Pressing the enter key within the form.

Long answer

You can use a form element as a fallback for when JavaScript has not yet loaded or never does for whatever reason. Granted, this might be a huge edge case if you're invested so heavily in JavaScript on your site, but in a perfect world:

  1. No assumptions would be made about the user's JavaScript support.
  2. Everything would degrade gracefully (i.e., things would still work without JavaScript).

Think of this from an e-commerce perspective. Can you imagine clicking an Add to Cart button that did nothing because the JavaScript hadn't loaded yet? You can still do a form submit as a fallback, but this also requires much more engineering to capture that form post and do the same thing that would have been done on the client.

Fortunately, with a React Universal Application, you can share the same JavaScript code on the back as you would use on the front. Something to think about.

Alternative approach

Instead of a form post, you could just have the Add to Cart button navigate directly to a cart page with some query string parameters to tell the server which item and how much quantity to add. No client-side JavaScript required!

Advice

When building a new web page or React component, I like to take a 3-step approach:

  1. Start with the HTML pieces first. See how far you can get with no CSS or JavaScript of any kind. Make your render method return some primitive DOM elements (e.g., fieldsets, radio button groups for color and size selections). Really focus on the structure of your HTML document outline, accessibility and keyboard navigation. Put up a pull request.
  2. Add your CSS and make it look as pretty as you can, but this time you're going to ignore JavaScript and see how far you can go with that. Use CSS :hover and other pseudo classes to get interactive behaviors w/o JS. Put up another pull request with just those changes (and screenshots)!
  3. The final step is your JavaScript. Add as little as possible to get the job done, but get the job done! Put up your final pull request.

Upvotes: 0

Todd Chaffee
Todd Chaffee

Reputation: 6824

I would recommend you not use the <form> element. One of your top priorities with code is to make it readable and to express intention. Here is the MDN introduction to the <form> element:

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

Since you are not submitting information to a server, using the <form> element potentially creates confusion.

Upvotes: 1

Related Questions