What is the difference between <button> and <input type="button">

HTML-CSS
16

Of course, this has nothing to do with the OP. :stuck_out_tongue_winking_eye:
more conclusion from linked pages

How to choose between a link and a button

Now we’re left with links and buttons. How do we choose between the two? Quite simply, by answering one question: What will happen when the user activates this control? The Microsoft User Interface Interaction Guidelines discussions of buttons and linksoutline this decision-making process rather well (paraphrased here):

  1. Will this control be used to initiate an immediate action?
  2. Is the action to navigate to another page?

Elsewhere they outline some general guidelines on making the choice:

  • Use command buttons for:
    • Primary commands.
    • Displaying windows used to gather input or making choices, even if they are secondary commands.
    • Destructive or irreversible actions, as well as commitment within wizards and page flows.
  • Use links for navigation to another page, window, or Help topic; display definitions; and command menus.

Whether or not you’re a Windows, Mac, or Linux person, these UI paradigms are the de-facto standard for link and button controls across all operating systems.

  • A button initiates an immediate action, such as form submission.
  • A link triggers navigation to a different resource.

A link with a crappy (or missing) href isn’t a button

I must see things like these at least once a day:

  1. <a class=“btn_addnew”></a> 2. <a href="#"><img src=“path/to/image.gif” /></a> 3. <a href="#"></a> 4. <a href="#">Some button text</a>

In first case, I often see these with background image sprites that give the control the visual look of a button. In this case this item is neither a button or a link. Because this item lacks an href attribute, it is an “anchor”, not a link. As an anchor it is not keyboard focusable. Furthermore, due to the use of a background image sprite, the item has no text alternative for the image and therefore no ‘name’. For low-vision users in High Contrast Mode, the image will disappear. For voice dictation users, they will be unable to use link or button commands on that control. From an accessibility standpoint, this item may as well not exist at all and the use of A here is no better than SPAN .

The second example is being seen less and less these days, superseded as it were, by some variations of 3 or 4. In each of these cases, these objects are only marginally better than the first example. In the first example, the lack of an href attribute meant that the item can’t get focus via keyboard. In these examples we see the use of ‘href=”#”’. Developers often use the hash mark to have a link that (they think) does nothing. The problem is that they’re wrong in multiple ways.

Per the specification, the ‘#’ is a “Fragment Identifier Separator”. In other words, the “#” is meant to precede a string of text which identifies a fragment on the page – a named anchor or an object’s specific ID. Developers think that by having no identifier it points to nothing, and unfortunately they’re 100% right. In certain browser/ operating system combinations, this may also mean that focus is shifted elsewhere. In some cases, for instance, it has the apparent effect of pointing to the browser window or body element. From there the tab order re-starts from the beginning.

Imagine this scenario: you’ve programmed a pseudo button which navigates through a wizard-like process with multiple steps, each using that <a href=”#”> link. Each time a keyboard user completes one step, they need to start over at the very top of the page, tabbing through to the next step. Lame.

Perhaps the thing that confounds me the most about using links (or spans or divs) as buttons is that there’s no intelligent argument that can be made in favor of this practice. The BUTTON element can be styled just like links, divs, and spans and no matter which of these elements you choose you still need to bind the relevant events to your control. So if it looks like a button and acts like a button, what compelling reason is there to not just use a button?

TL;DR

  1. DIV s and SPAN s are not buttons
  2. If it navigates, it is a link. Use link markup with a valid hypertext reference
  3. If it triggers an action, it is a button. Use a BUTTON element
  4. If you don’t like how a button looks, style it with CSS.
1 Like