←back to thread

Just use a button

(gomakethings.com)
284 points moebrowne | 6 comments | | HN request time: 0.879s | source | bottom
Show context
pverheggen ◴[] No.45774978[source]
A good addition to this article is that most buttons should have type="button" on them. By default, buttons are type="submit", which if contained inside a form will submit that form.

I'm sure there are some devs who reach for a div because they're unaware of the proper way to disable submit behavior.

replies(4): >>45775148 #>>45775591 #>>45775683 #>>45775964 #
galaxyLogic ◴[] No.45775591[source]
> they're unaware of the proper way to disable submit behavior.

That is an issue in favor of DIV, you don't accidentally set type="submit" because you don't know about that. There are many things many people don't know.

Using a DIV means you start from empty plate and explicitly add the features you want to add, which makes it easy to later remove or change those features when you want to.

Of course if your knowledge of HTML standards is great and Button exactly fits your current use-case you probably will use it, but designs and requirements change all the time.

Using DIV makes your design more transparent, you see there are certain features you have set to it by adding the attributes.

Using a Button means you (and other people reading your code) probably want to consult documentation to understand what it exactly does. With a DIV + attributes that is explicitly "spelled out".

Just some pros and cons.

replies(9): >>45775691 #>>45775744 #>>45775764 #>>45775783 #>>45775855 #>>45775871 #>>45775913 #>>45776764 #>>45777303 #
1. serial_dev ◴[] No.45776764[source]
So some developers cannot be trusted to figure out that they, in some cases, need to add a single attribute to the button, but they can reimplement a button with all its behavior, feel, look, and accessibility settings starting with a div?
replies(2): >>45776899 #>>45777617 #
2. brazukadev ◴[] No.45776899[source]
React in a nutshell
3. Levitz ◴[] No.45777617[source]
No, but they can reimplement it in a good enough state for the vast majority of users without getting bothered by default behaviour or styling that might vary per browser.

Which, don't get me wrong, is still a problem, accessibility matters, but if there's a reason as to why something happens, the way to fix it is to actually look at that reason.

replies(1): >>45779095 #
4. dpark ◴[] No.45779095[source]
A button can easily be styled and it’s definitely easier to fix the one little behavior than to reimplement all the other behaviors that are needed.
replies(1): >>45782182 #
5. Levitz ◴[] No.45782182{3}[source]
And yet often this is not what happens. Why?

People don't do stuff poorly on purpose. There's also nobody out there for which button elements are some arcane and obscure thing, we all know they exist, so what is happening?

I'm not arguing for using divs instead of buttons, I'm arguing that if that happens there's a reason for it, and we ought to look at that reason and attempt to deal with it rather than admonishing developers in general.

replies(1): >>45782396 #
6. dpark ◴[] No.45782396{4}[source]
Does it happen often? The unintended behavior seems extremely discoverable. “Hey, Google. Why does my button onclick not fire correctly?” “Oh, I need to set this stupid property.”

Would it be nice if this wasn’t necessary? Sure. But browsers aren’t going to break compatibility to fix this quirk.

> we ought to look at that reason and attempt to deal with it

I’m curious how you think we could deal with this aside from education.