0

So, I've seen throughout my years of surfing stack overflow, that using a div as a clickable element is not a good practice, and that you should use a .

However, as I became more skilled with css, I started to use the label trick with radio buttons to make css only layouts. The problem I have, is with forms.

For some reason, buttons reload the page when they are in a forms, and this creates a lot of difficulties for my specific project that I'm not gonna explain.

So pretty much, I need to know if labels, like divs, are not a good practice to have clickable events on

thank you

Tidris
  • 114
  • 2
  • 8
  • I, personally, have or see no issues with adding a clickable event on block elements – Cornel Raiu Apr 15 '21 at 05:21
  • _For some reason, buttons reload the page when they are in a forms, and this creates a lot of difficulties for my specific project that I'm not gonna explain._ _So pretty much, I need to know if labels, like divs, are not a good practice to have clickable events on_ I don't understand how these two statements are related-- are you looking to add handlers to `label`s, or `button`s? – Alexander Nied Apr 15 '21 at 05:25
  • regarding your `buttons reload the page when they are in forms` issue, here is a good answer for this: https://stackoverflow.com/questions/3314989/can-i-make-a-button-not-submit-a-form – Cornel Raiu Apr 15 '21 at 05:26
  • The reason you were told to avoid the `onclick` on `div`s is most likely be of non-semantic, inaccessible behavior. `label` elements should generally be wired w/ attributes such that they focus the associated field-- I'd strongly recommend you avoid breaking that behavior. Furthermore, they are not focusable (nor should they be) so it would leave out keyboard access for the wired behavior. Preventing default behavior on buttons to override is common and generally acceptable. – Alexander Nied Apr 15 '21 at 05:27
  • 1
    This is difficult to discuss in the abstract-- if you could include a [mcve] that shows the specific scenarios you are facing, it will better enable the community to provide you with helpful guidance. – Alexander Nied Apr 15 '21 at 05:29
  • 2
    Reloading only happens if you use a button of type `submit` (which is the default value of a ` – cloned Apr 15 '21 at 05:41
  • Okay that button fix does actually fix my problem, thank you a lot. On the other hand, @AlexanderNied, sorry for not clarifying. Pretty much, I needed to create clickable buttons in the form. These buttons are the parents of a label element ``, which activates a radio input to make something appear. The problem is, when I click on these buttons, the page reloads making the functionality essentially useless. You guys provided a solution that stop the page from reloading, so it can function effortlessly. – Tidris Apr 15 '21 at 06:29

1 Answers1

-1

You might want to look into Unobtrusive JavaScript on how to best implement a click event for a label. I think you can find an answer to your question and understand the semantics of onClick() here.

PWJ
  • 83
  • 10