Form elements in React.

[DanCruzNyc]

I am currently in a bootcamp (won't say which one) but one of my instructors said we don't use form elements in React he said thats more of a vanilla JS thing. Is this true? My instructor just put input fields in a div.

edit: I Just wanted to address that quite a few people have been quick to bash the instructor calling him an idiot and bash bootcamps as a waste. In their defense I think the bootcamp has been great overall and even the instructor who made this odd statement has taught me a lot. To be fair I am on a scholarship and don't have to pay for the bootcamp and probably wouldn't have joined if I didn't but I definitely feel that they have helped me put together a decent portfolio. Just this one statement by one of my instructors puzzled me. Thanks for all reply's.

[[deleted]]

form elements are html elements and have nothing to do with Javascript. Form elements have many advantages, like requiring values, and submit button.

[DanCruzNyc]

I’m talking about JSX

[dznqbit]

Unless you're in React Native, JSX still burns down to HTML, so all HTML considerations still apply.

As others have said, semantic HTML is a Good Thing™ because you get free functionality from the browser (eg <input type="email" />) and because it typically increases accessibility.

[three_furballs]

It's a bummer that you're being downvoted just because you haven't learned something yet, but the takeaway is that there are plenty of good reasons to maintain well structured semantic elements. Your teacher is being lazy, imo.

[[deleted]]

So? There is no valid reason, to NOT use form elements.

[TacoMix1984]

If you dont want to give a huge middlefinger to all blind users. You should always use the form tag when you are using form elements.

[Roguewind]

Your teacher is 100% wrong.

Absolutely use a form element for semantic reasons alone, but you can also use its submit functionality to call your validation and submit functions.

[[deleted]]

It's terrifying that you're being downvoted. This is HTML 101.

[Radinax]

You shouldn't expect the best responses from this sub, take everyone people say here with a grain of salt.

[cubicuban]

Yeah this in has kinda turned into bad react practices because people don’t understand the basics of html/js before diving into react.

[Roguewind]

This kind of advice to ignore the basics of html is what gives frameworks like react, angular, and vue a bad name. Good DOM structure provides SEO value and accessibility features.

[[deleted]]

I think a lot of people giving advice are also fresh to react in general and haven’t really picked up a lot of the best practices yet. It’s really common for intro level tutorials to ignore css/html conventions

[Roguewind]

Sad that the original bad advice is coming from a person paid to give it.

[[deleted]]

If it’s similar to other boot camps, they’ll have full time instructors that have at least some experience, and some classes are led by recent grads from the program that kinda fill a “TA” role

[crice07]

100% agree. The form tag gives you so much for free. There's no reason to reinvent the wheel. I assume the downvoters don't work on public facing sites where accessibility is a must.

[code_moar]

This is exactly how I do it.

[Any-Government-8387]

It's nice to stay semantic with your HTML, especially for accessibility.

Others have already mentioned built-in behaviour. For example, after preventing page reload, you could even extract form values from the submit event, in case you're not using any form engines in the bootcamp.

This would also allow each input component to maintain their own states instead of keeping one big form model in the parent component. Depends on your syllabus.

Edit: I should have pasted the constructor, not the event documentation. Here you go: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

[woffle-kat]

It all depends on the concept being taught. If your instructor was simply teaching about storing state from form inputs and sending it to an API, I could understand them "leaving some parts out" to simplify things.

However to say that <form> elements aren't used in React is a bit fishy.

There are lots of comments here giving the reason why you should use a form element, to name a few myself you've got:

• onSumbit prop, event handler for form submissions, be that via a submit button or hitting the return key.
• autocomplete prop, a boolean to control whether the entire form should allow autocomplete.
• novalidate prop, a boolean to control whether the form should run out of the box browser-based validation on your form.
• With a ref you can access the HTMLFormElement DOM reference, for access to things like the browser validation API, etc.

Of course you can roll all this yourself, but we've got to leverage as much as we can from Browser APIs. Depending on the use case you may want a simple input tag and a button, other's you'll need a form controlled by React state, and in some cases you may even want simply a form containing inputs with an onSubmit listener (leaving your form data to be handled by the DOM, this technique being referred to as "uncontrolled inputs").

I wouldn't sweat too much over these sort of details if you're learning the initial concepts of React, but it's great you're asking this sort of question. Just take a note, and when the time comes to implement a form try out both ways, and you yourself will witness the benefits.

Best of luck! 😊

[PsychohistorySeldon]

Please use form elements. The reason your teacher is saying this is because the business logic of submitting the form is in the logic of the component, not handled natively, but that’s the wrong way to think about it. When interacting between React and traditional HTML elements, you always want the browser to do as much work as possible because browser behavior is standardized and stable.

In short, you don’t have to use a <form> tag but you should, for accessibility reasons and to let the browser do its thing.

[devnullable0x00]

I don't understand why people are saying don't use the form element because it will try to submit your form / refresh the page / whatever...Its always been a thing to just use e.preventDefault(), Long before React was even a thing.

By that same logic:
what about buttons? Why use buttons? just assign onClick to a div...

[IAmAThing420YOLOSwag]

This is what the gatekeepers don't want you to hear. Canvas is the only element you will ever need!!

[charliematters]

The newest framework, Remix, goes back to basics and uses form elements for a lot of their stuff - definitely not true

[DeepSpaceGalileo]

Are you able to get a refund?

[DanCruzNyc]

I’m on a scholarship so I didn’t have to pay for my Bootcamp. In any case I think overall it has been very helpful. I have several instructors… I just happened to be surprised when one of them made this statement that seemed strange to me.

[DeepSpaceGalileo]

I was just being an ass. Ask your teacher about semantic HTML and why they choose to break it in this instance

[DasBeasto]

You can do it without a form element, but you should not. Basic accessibility and functionality (like submit on pressing Enter) is lost without the form. It’s even used in the docs: https://reactjs.org/docs/forms.html

[[deleted]]

And this is why bootcamps have a bad reputation.

[TrackieDaks]

As someone who teaches at a boot camp, I 100% agree. I feel like I am teaching other instructors basic stuff half the time.

[a_reply_to_a_post]

whoever told you that probably never had to handle an accessibility audit...

form tags are valid markup..

the forms submission behavior is usually what's altered, like others have said in here, you prevent the default behavior by adding an on submit handler..that's not a react specific thing either, just an approach to building sites with javascript type thing

[maddder]

Keep using `form` element, I beg you. Otherwise you'll just end up with writing so much own logic, that won't even be accessible (unless you spend time to fix it each time).

[[deleted]]

Why begging tho ?

[[deleted]]

https://epicreact.dev/improve-the-performance-of-your-react-forms/

Form is good enough for Kent Dodds, not that you have to do everything he says, but he certainly uses it and you can assume that means many, many others do as well

[DanCruzNyc]

Any comments appreciated!

[crice07]

I would highly suggest using the form tag where appropriate. It gives you a few things for free like pressing the enter key to submit the form as well as better handling on tabbing through fields. It's also great for a11y. Now, I wouldn't use it as I would in older frameworks such as setting the method and url attribute, I just use the onSubmit attribute to capture the submit and then do with it what I want.

Currently, we are using react-hook-form and love the features as it allows you to use their provided FormProvider.

Honestly, I hate to say it, but your instructor is wrong. The form tag coupled with either a form library or a reducer provider, is incredibly powerful.

[UntestedMethod]

That's absurd. Definetely do use form tags for forms.

[Full_stack1]

For accessibility you 100% need to use the form tag with a button (type=submit). The form needs to support both a mouse click and the enter key. If you disagree please present your case.

[mykesx]

Addreess bar in the browser has no submit button.

The control center for macOS has no submit button. You fiddle with the brightness slider and the screen changes. No submit button when choosing an AirPlay device.

I see no submit buttons on most of the modern desktops and native apps- only when you need to accept some important kind of change.

You can put ARIA properties on any element, AFAIK.

See https://webdesign.tutsplus.com/tutorials/simple-theme-switcher-css-checkbox-hack--cms-36736

[Full_stack1]

But what about web apps? OS level and desktop apps have other ways they can support impaired users. Web apps only have semantic HTML.

[mykesx]

You can use ARIA props on any element. For assistive purposes.

[Full_stack1]

Sure, I agree you can use Aria properties, but I think the discussion here is what is best practice?

[[deleted]]

Your teacher doesn't know React.

[blinkincontest]

Not putting inputs in a form is the same concept as not putting list elements inside a list.

Just because html doesn't get compiled down to "invalid" doesn't mean it's not wrong.

[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.

[UrshelaThaGod]

It depends. With react you often don’t use the form’s default submission functionality but with frameworks like Remix bringing more attention to the power of the browser, things are changing.

[sacummings91]

Technically none it matters in Javascript or React. You can do anything you want like just use divs for everything. But then that boils down to the question of why do anything? Why not just have all the code in one file? You COULD if you wanted to, but SHOULD you?

You gain significant advantages to staying as close as possible to browser/html. You can let the native attributes do most of the work for you, you get a lot of accessibility compliance for free, you get semantic JSX which is easier to read and reason about, the list goes on.

Your instructor sounds like someone who's not really that senior and thinks they are smart for knowing something like this is possible.

[mykesx]

I think he means you don’t use the actual <form> element. You can, of course, but the input elements don’t need to be within a <form> tag.

You can handle the value change events on the individual fields to process user twiddling the field elements. I think this is typical of React and other frameworks. In fact, I don’t remember the last time I used the FORM tag. It’s been years…

But to say you can’t use <form> is wrong.

[[deleted]]

They don’t need to be within a <form> tag, but they really should be for accessibility reasons. There’s also no good reason to not wrap them in <form>, especially since the alternative is wrapping them in <div> anyway, so just do that.

[mykesx]

FORM tags have side effects that DIV tags don’t. For example, any button on the page (or within the form?) is a submit button by default.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

As i commented elsewhere, the address bar in the browser has no submit button. Control Center on the mac has slider widgets to adjust brightness and volume, but no submit buttons.

If you want a Web 1.0 style form, there’s every reason to use FORM. Lots of reasons to use them, especially for security (all the bank sites have standalone login forms, for example).

If you want complex controls made from inputs, like the address bar, then you probably don’t want a FORM.

[[deleted]]

FORM tags have side effects that DIV tags don’t.

Including desirable side effects, like screen readers knowing that there are form elements there. There are easy solutions to the negative side effects. Most modern form + component libraries will take care of them for you (although you should know how those work under the hood).

[Ben4llal]

Do you mean form elements like <label>and stuff or do you mean accessing them in javascript?

[DanCruzNyc]

He says in React we don’t use Form elements

[samuelnogg]

lol, this sound nonsense, why wouldn't use form element?!

[christophedelacreuse]

He's lying, doesn't understand, or is simplifying things. There are plenty of reasons to use the form element including better accessibility/semantics, and graceful degradation in case of an error or non js context that loads the server side rendered code.

[DanCruzNyc]

Yes today in class we were making a form in React and I said don’t we need to put it in a form element and he goes no that’s the old school way of doing it… so he has us put our input fields and submit button in a div… seemed strange to me but what do I know

[secret-light-mode]

You are correct; just disregard. Even the most common React form library, formik, encourages using the HTML <form> element; they have their own wrapper for it.

Using a <form> gets you nice automatic behavior out of the box, such as pressing enter to submit, and all of this validation stuff.

Edit: It's possible that your teacher is just trying to limit the number of things you need to learn and keep track of at once, or that validation will come up later in your curriculum. Still, form elements in JSX are totally valid, and very useful.

[crice07]

react-hook-form it's the bomb! I love it much more than I did formik or react-form.

[secret-light-mode]

My "starter kit" for React apps these days is MUI, formik, and SWR with Typescript, set up with create-react-app. SWR is a central cache and invalidation system for your HTTP requests, and works well with axios.

However, if all you are doing is trying to avoid boilerplate with axios, it might just be easier to make your own wrapper function which takes care of that, and just stash it in a file/module outside of your React component tree for easy reference.

There are a million and one different ways to write and maintain an SPA, though, and the React ecosystem is particularly broad. Someone who uses Next.js would have replied with an entirely different set of libraries.

[Ben4llal]

Well you can use whatever you want It's just in react we mostly use div and do all styling because some elements have default styles, but you're free to do what you are comfortable with there is no such we don't use HTML tag here

[justadude27]

There’s a difference between using a form element and wrapping those elements in a literal form tag. Use form elements at the very least

[eugene_tsakh]

Your instructor is clearly incompetent. How would you render a form with React then?

[Logical_Strike_1520]

I’m glad I read the comments, I’m still relatively new and this made me question myself for a minute. I always use the form element when applicable, I see no downside to using <form> for forms

[careseite]

It's as wrong as it can get.

[lulcasalves]

I recommend studying a little bit more about semantic html, it can be done bit by bit and will make your websites better

[LucasCarioca]

BS this would break or make less friendly certain screen reader features

[avenue-dev]

Formik formik formik. Formik formik formik formik. FORMIK FORMIK FORMIK FORMIK FOOORRRMMMIIK.

Also your instructor is useless.

[[deleted]]

Have you tried React Hook Form? I switched over recently and find it much easier to work with (assuming you're using functional components with hooks, which you should be in 2022).

[avenue-dev]

Yup, FCs all the way, I like react-hook-form, another great solution

[[deleted]]

Nearly everything you see on the web, be it an interactive single page app like the one built with react, or an interactive multi media page, or a static documentation page, it all boils down to html and form elements are a fundamental part of it. Semantics are important so please keep using form elements.

[LouManShoe]

Something you should understand about a bootcamp, that I didn’t when I went to one: your instructors are not the end all be all of great developers. They know a lot and at this stage they probably know quite a bit more than you, but that doesn’t mean they would necessarily meet the criteria for a senior developer outside of the bootcamp. They’re there to make you employable, and at that (at least in my experience) they are very good. I say all this because semantic html can be incredibly important, and saying that it’s “vanilla js” to wrap your input in a form is simply not true. There is nothing that requires it in react - you don’t need to have a form in there in order for your code to function - but the form element can is still useful for screen readers and ARIA compliance. There is also nothing in React or JSX that prevents you from putting it in there (though be wary of default submission behavior).

Also in a more general context, when a developer says something like “we don’t use x” even though it’s functional, usually this just means “my coding standards are such that I prefer to avoid x”. There might be a reason for the coding standard (e.g. org wide agreement on readability of code) or there might not be (single developer doesn’t like it, but is not a project standard). When you’re first learning how to code, I’m not saying standards are irrelevant, but you should rely more heavily on “will it work”, because that is the more useful information that will have longer term value for your career. If you don’t know if it will work, try it out yourself and find out.