I am using React JS with Apollo client, when I want to create like a registration form for example, I usually create a div which contains some input fields and a button, the button is not of type "submit" it is just a regular button with an "onClick()" event that runs the registration function ... it does the job and I like the way the registration logic runs without passing any data through the URL as well as it doesn't need to refresh the page after each registration approach.
So the question is which way is better ?
NOTE: I know that there is some packages that can handle these situations like "Formik" for example ... but I like to code everything my self.
In my opinion, it's always better to keep using semantic HTML tag e.g <form> for form.
There are some advantages using <form> from what I've known so far:
:invalid and :valid which may be handyNote: Using the element will automatically communicate a section of content as a form landmark, if it is provided an accessible name. Developers should always prefer using the correct semantic HTML element over using ARIA.
Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role#description
For CSS pseudoclass demo, you could check my Stackblitz
I would recommend using <form> and make your <button> of type="submit".
Instead of adding an EventHandler to the button on onClick, I would bind it to the onSubmit event of the form.
With event.preventDefault() you stop the submission of the form and you can handle your registration logic there.