Button vs link vs input type="submit" on a form
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:
Use a link:
- 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).
Use a button:
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>
- 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!
I would definitely use a link: progressive enhancement.
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>
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.