Question

I have seen several places in stackoverflow where folks have elegantly and easily turned a p or a div into a “button” with a click event in jQuery in an HTML based website. I implemented something like that successfully. The styling of these elements is easy and flexible. Why use a button for a script-based click event? They are harder, it seems to me, to style and position. Is it simply a matter of personal choice, or is there a best-practices reason to use a button like one would do in, say, WPF or Windows Forms (or, dare I say it, Silverlight)? I use input submit buttons for posting form input, of course, when implementing an ASP.Net MVC project, because the return to the server demands it.

Thanks for your thougths.

Answer 1

I’d suggest using a button or input element to submit, or perform other actions on, a form element (among others) simply because not everyone uses a mouse to navigate, or use, the internet. I haven’t used screen-reader software myself, as yet, but given the popularity of forms on the internet I believe that they’ve developed an adequate user-interface representation for a button.

They don’t, however, implement (or reliably implement) JavaScript to the same end, or effect, that you might for a visual UI.

So depending on your use-case, I’d strongly advise sticking with a generic button (or input). Failing that, leave the button in place in the HTML and remove it with JavaScript and transfer functionality to whatever element you’d rather use (if you must).

I personally can’t see the benefit of using a block-level element as a button, but if it makes sense to you to discard the semantics, and inherent attributes of the button element in favour of a div or p (and presumably custom data-* attributes) that’s your call. But please bear in mind that the internet should be usable for those that use it differently than you or I.