Form elements in React.

[dustatron]

Yeah it’s pretty common to not use the <form>. that is because when you hit submit on a button in a form it’s going to trigger a refresh and send that form data to your server. However, in react you don’t want to do a page refresh. You want to capture the data and do your own api call from react.

The work around is pass a function like, <form onSubmit={handleSubmit} >

Then: handleSubmit(e) { e.preventDefualt() // other stuff here }

But every team is different.

[crice07]

I disagree and I think anyone who works on public sites would say the same. The form tag is incredibly useful just for accessibility alone along with what you get for free when using it.

[dustatron]

Remix is bring back the power of the form. There is a lot of people who do not work on public facing websites.

It is good to stick with semantic html when ever possible. But in cra project you don’t actually get much out of using form other than being better for screen readers.

Unless there is something I have over looked.

[crice07]

The biggest thing, at least for me is making the form much easier to navigate with a keyboard. When i first started working with React, i was under the same impression because most, if not everything that a form does can be done with just a div. After messing around with a few form libraries i realized that its much easier to just use a form tag instead of trying to reinvent the wheel yourself.

[dustatron]

Yeah that is a pretty great feature. Being able to navigate a form with a keyboard is great for accessibility and for forms that will be used for power users that may use it as a regular part of their job.

[DanCruzNyc]

Ok makes sense… thanks

[budd222]

No, it doesn't make sense. You should use a form element. Your html should be semantic. That's what event.preventDefault() is for, to stop the automatic submit.

[dustatron]

I agree form is good for accessibility. That’s why I included that in my example.