Menu
I've seen so many posts along the lines of "I'd like to one-specific-thing for my one-specific-situation when it comes to buttons in HTML.
If I may, I'd like to get a professional take all in one post, here:
When making buttons in HTML, what situations lead to:
<a> being the best answer? <button> being the best answer? <div> being the best answer? <input type='button'> being the best answer?
821
input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves. Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases.
A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).
You should use <a> or <button> , not <div> . an anchor with an href attribute will trigger page reload. Without an href, it is not "tabable", and it still does not carry the button semantic.
The difference is that <button> can have content, whereas <input> cannot (it is a null element). While the button-text of an <input> can be specified, you cannot add markup to the text or insert a picture.
There's a good article that summarizes the differences nicely
In short:
| | General usage | Complex designs | Can be disabled | |-----------------------|----------------------------|-----------------|-----------------| | <button> | General button purpose. | Yes | Yes | | | Used in most cases | | | | --------------------- | -------------------------- | --------------- | --------------- | | <input type="button"> | Usually used inside | No | Yes | | | forms | | | | --------------------- | -------------------------- | --------------- | --------------- | | <a> | Used to navigate to | Yes | No | | | pages and resources | | | | --------------------- | -------------------------- | --------------- | --------------- | | <div> | Can be used for clickable | Yes | No | | | area which is not button | | | | | or link by definition | | | If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
