3

What is the best way to make buttons(javascript) like this and what is the correct tag? "a", "b" or any other tag ?

Example - http://jsfiddle.net/S7FPH/

or

<html>
<head>
<style type="text/css">
a.a_button, b.b_button {
    margin: 10px;
    background-color: green;
    width: 100px; height: 20px;
    text-align: center;
    display: block;
    color: yellow;
}
a.a_button {text-decoration: none;}

b.b_button{
    cursor: pointer;
    font-weight: 100;
}
</style>

<script type="text/javascript">
    function test(){
        alert("test");
    }
</script>
</head>
<body>

<a class="a_button" href="" onclick="test(); return false;">click</a>

<b class="b_button" onclick="test();">click</b>

</body>
</html>

UPDATE:

Thats how it should look People asked it depends on how i want to use it, so here is an example.

about "button" tag - is thear is a way to make "button" tag look similar to my example(design) ? about "ul" - i like it but i dunno how to position it this way.

Winns
  • 810
  • 1
  • 9
  • 20

6 Answers6

5

Write Unobtrusive JavaScript and use:

  • A link (<a href="fallback">…</a>) if you can fall back to a regular link if the JS doesn't work
  • A submit button (<input type="submit"> or <button type="submit">…</button>) if you can fall back to a form submission if the JS doesn't work
  • A basic button inserted into the DOM with JavaScript (<input type="button"> or <button type="button">…</button>) if there is no sensible fall back available.

Your simplified example is too far divorced from whatever your real use case is to tell which of the above applies in this care.

Note that all of the above are focusable for free. Using elements that aren't designed to be interacted with requires adding focusability using tabindex (which isn't supported in some older browsers) and without focusability you can only interact with them using a pointing device (such as a mouse) and not with a linear input device (such as a keyboard).

Don't use a bold element. That would be nonsense.

People asked it depends on how i want to use it, so here is an example.

That can fall back to links simply enough. You should also make use of pushState so you don't break bookmarking.

about "button" tag - is thear is a way to make "button" tag look similar to my example(design) ?

Just change the background-colours and border-styles.

about "ul" - i like it but i dunno how to position it this way

floats, or display: inline-block, combined with sensible margins and enough width to ensure that you get two items per line.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Your Button is an anchor so use <a></a> tag.

W3C Recommendation is to use the <input> tag for each button in a form.

Tag Input

Jannis M
  • 745
  • 1
  • 4
  • 15
0

It is a matter of how much of a purist you are.

I prefer a myself because you get the cursor for free, however you need to return false in the onclick to not reload the page.

In both cases, you can assign the onclick in the head onload instead of inline

If you need a button, there are input tags and button tags that will do the job too

mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

It is impossible to give a positive answer without knowing what the buttons are supposed to do and in which context. The example is far too abstract for that.

But a and b are most probably wrong, not syntactically but semantically. Using span, possibly with a class attribute, would be better.

Is there a reason not to use button elements, if the elements are supposed to be JavaScript-powered buttons and nothing else?

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

If you're looking for an element that accepts user input, without navigating to a new URL, you should probably use a button tag.

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
0

I suggest a tags with meaningful href attributes. Things like:

<ul id="nav">
  <li><a href="#first">First</a></li>
  <li><a href="#previous">Previous</a></li>
  <li><a href="#next">Next</a></li>
  <li><a href="#last">Last</a></li>
</ul>

This way, the user can hover over the element and get an idea of what clicking it will do. Note that this works even if you hide the text in CSS, which you might want to do if using a background image. Of course, you'll want to suppress the default browser action to avoid having "#first" appear in the address bar, and having the browser look for an element with an id of "first" and jumping to it.

Another benefit of using a tags is that users with keyboard navigation enabled will be able to tab from one to the next (so don't forget to include :focus rules in your style sheet).

davidchambers
  • 23,918
  • 16
  • 76
  • 105