A user logs in to his control panel and sees his incoming messages. Near each message there is a "Reply" button. What is the correct way to implement that button?

I see three main options:

1. Use a link:

   <a href="customer.php?reply&messageid=1234">Reply</a>.
   

   Disadvantage:

   • We need to style that link to look like a button. Because I think that action "Reply" should be represented by a button, not a link (in my opinion links should be used when they link to some resource and when we have a noun in link text; and if we want to make an action and have a verb (action) in a caption - button should be used).

2. Use a button:

   <button onclick="location.href='customer.php?reply&messageid=1234'">Reply</button>`  
   

   Disadvantage:

   • The user must have JavaScript enabled. Though based on our statistics 99.8% of our users have JavaScript enabled, and if they don't it will be really difficult for them to work on our website anyway (we have many features implemented with JavaScript). So I think that 100% of our actual active users have JavaScript enabled.

3. Use a form with <input type="submit">:

   <form action="customer.php?reply" method="get">
     <input name="messageid" type="hidden" value="1234" />
     <input type="submit" value="Reply" />
   </form>
   

   Disadvantage:

   • I think using form here is "artificial". A user doesn't enter anything. We use the form just to make our button work. I also think that using POST request when we don't change anything and just need to show a reply form to a user - violates REST principles. But even with using GET I still think that using form is artificial in this case.

Some other notes:

• Using a button inside a link doesn't work in IE.
• It's a private section of our website so search engines can't see it and we don't really need a link to help search engine follow it and index the resource (it's a usual argument for using links in web instead of buttons)

Which one would you choose and why?

UPD. Well, I have decided to use a link. Thank you everyone for discussion!

A user logs in to his control panel and sees his incoming messages. Near each message there is a "Reply" button. What is the correct way to implement that button?

I see three main options:

1. Use a link:

   <a href="customer.php?reply&messageid=1234">Reply</a>.
   

   Disadvantage:

   • We need to style that link to look like a button. Because I think that action "Reply" should be represented by a button, not a link (in my opinion links should be used when they link to some resource and when we have a noun in link text; and if we want to make an action and have a verb (action) in a caption - button should be used).

2. Use a button:

   <button onclick="location.href='customer.php?reply&messageid=1234'">Reply</button>`  
   

   Disadvantage:

   • The user must have JavaScript enabled. Though based on our statistics 99.8% of our users have JavaScript enabled, and if they don't it will be really difficult for them to work on our website anyway (we have many features implemented with JavaScript). So I think that 100% of our actual active users have JavaScript enabled.

3. Use a form with <input type="submit">:

   <form action="customer.php?reply" method="get">
     <input name="messageid" type="hidden" value="1234" />
     <input type="submit" value="Reply" />
   </form>
   

   Disadvantage:

   • I think using form here is "artificial". A user doesn't enter anything. We use the form just to make our button work. I also think that using POST request when we don't change anything and just need to show a reply form to a user - violates REST principles. But even with using GET I still think that using form is artificial in this case.

Some other notes:

• Using a button inside a link doesn't work in IE.
• It's a private section of our website so search engines can't see it and we don't really need a link to help search engine follow it and index the resource (it's a usual argument for using links in web instead of buttons)

Which one would you choose and why?

UPD. Well, I have decided to use a link. Thank you everyone for discussion!

• javascript
• html
• forms
• button
• hyperlink

• <button>s submit a form too, if you want something more stylable than <input type="button">... – MaxArt Commented Jul 12, 2012 at 22:45

5 Answers 5

I would definitely use a link: progressive enhancement.

You want the button to be usable even with Javascript turned off (remember: every user is a non-javascript-user for the duration of the page load. If they're on a slow connection (e.g. mobile), they should be able to reply as soon as they see the button).

Styling is a non issue (you weren't gonna use the default button styles, were you?).

Using POST when the user isn't submitting anything sure is wrong. Even with GET, it's still not really form material...

It's pretty easy to style <a> and <button> identically, just use a common class name. <input type="button"> can be a little trickier, but you don't need to use it.

Your tag choice should never be dictated by your intended presentation, but what the element is and what it does. Links should be marked up as <a>.

I agree that a POST is wrong. So, set your form to use method="get". Use just one form and leave out the hidden fields. Using <button>, the displayed text can differ from the submitted value.

<form action="customer.php" method="get">
    <input type="hidden" name="reply" />
    <div class="message">
        <div class="messageBody">..</div>
        <button name="messageid" value="1234">Reply</button>
    </div>
    <div class="message">
        <div class="messageBody">..</div>
        <button name="messageid" value="1235">Reply</button>
    </div>
    ...
</form>

All methods are correct, except that method 2 is correct only under the assumption that you can safely ignore non-JavaScript browsing.

The assumptions and comments presented about forms are incorrect, or at least misleading. A form need not involve user input; forms can be used e.g. to submit previously collected data, with no other fields but a submit field. And the POST method can be used even when not changing anything, e.g. due to the amount of input data (as there are fairly low upper limits on GET data); besides, the form presented in the question uses GET, the default method.

Otherwise, this is mostly a non-constructive question, calling for discussion and argumentation rather than technical solutions.

One can always use both, like;

<button><a href="..">Click Me</a></button>