Button vs link vs input type = "submit" in form

Question

The user logs into his control panel and sees incoming messages. A "Reply" button appears next to each message. What is the correct way to implement this button?

I see three main options:

• Use the link:

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

  Disadvantage:

  • We need to style this link so that it looks like a button. Since I think that the “Response” action 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 the link text, and if we want to do action and have the verb (action) in the title - the button should be used).

2. Use the button:

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

   Disadvantage:

   • The user must have JavaScript enabled. Although, based on our statistics, 99.8% of our users have JavaScript, and if they don’t have it, it will be very difficult to work on our website (we have many functions implemented using JavaScript). Therefore, I think that 100% of our active users have JavaScript enabled.

3. Use the 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 that using the form here is "artificial." The user does not enter anything. We use the form to make our button work. I also think that using a POST request when we do not change anything and just need to show the response form to the user violates the principles of REST. But even when using GET, I still think that using the form in this case is artificial.

Some other notes:

• Using a button inside a link does not work in IE.
• This is a private section of our site, so search engines don’t see it, and we don’t need a link to help the search engine follow it and index the resource (this is a common argument for using links on the Internet instead of buttons)

Which one would you choose and why?

UPD Well, I decided to use the link. Thank you all for the discussion!

Answer 1

I would definitely use the link: progressive improvement .

You want the button to be used even when Javascript is off (remember: each user is not a javascript user at the time the page loads. If they are on a slow connection (for example, on mobile devices), they should be able to respond as soon as they see button).

Styling is not a problem (you are not going to use the default button styles, are you?).

Using POST when the user does not send anything sure is incorrect. Even with GET, it is still not material ...

Answer 2

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

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

Answer 3

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

 <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> 

Answer 4

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

The assumptions and comments submitted regarding the forms are incorrect or at least misleading. The form does not require user input; forms can be used, for example, to represent previously collected data without any other fields than the submit field. And the POST method can be used even if it does not change anything, for example. due to the amount of input data (since there are fairly low upper limits for GET data); in addition, the default GET method is used in the form presented in the question.

Otherwise, it is basically a non-constructive issue requiring discussion and argumentation, not technical solutions.