Should I use a <form> or just a <div> to create a form?

user_18440430 0
Viewed 50

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 ?

  1. Using a form tag to do form things
  2. Using a div instead

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.

typescript reactjs javascript
2 Answers

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:

  1. Support CSS pseudoclass :invalid and :valid which may be handy
  2. Better accessibility

Note: 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

user_3751480

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.

user_72954880
Related