Button vs link vs input type="submit" on a form

Question

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:
```
<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).

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.

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!

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

Joseph Silber · Accepted Answer · 2012-07-13 05:33:41Z

9

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

edited Jul 13, 2012 at 5:33

answered Jul 12, 2012 at 22:35

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

No Results Found Over a year ago

I've heard the argument that one should not style form controls and buttons, but leave it to the browser and OS for consistency so users feel familiar with the UI. I personally think that's a bit hardcore.

Joseph Silber Over a year ago

@WesleyMurch - I couldn't disagree more. Buttons and form controls should feel native to your application, not the OS (unless you're building a native app). Obviously, don't go overboard; be sure that you don't throw off your users by some fancy-pants controls. Keep the spirit of the buttons/controls, but tweak it to fit your overall theme.

nightcoder Over a year ago

I was gonna use the default button style :) What is wrong with that?

Joseph Silber Over a year ago

@nightcoder - Regardless, the point still stands. Styling the link is not the issue. 5-10 lines of CSS will do the trick. What you should really care about is the semantics.

No Results Found Over a year ago

@JosephSilber: Absolutely. I recall someone on SO trying to figure out how use alternating-colored text-shadows with some crazy serif Google font in a text input with no borders or background. Some people get carried away and it can get confusing to the user, but the default button styles sure are ugly.

|

No Results Found · Accepted Answer · 2012-07-12 22:37:35Z

4

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

answered Jul 12, 2012 at 22:37

No Results Found

103k38 gold badges199 silver badges232 bronze badges

1 Comment

nightcoder Over a year ago

+1, Thank you for your active participation in the discussion, it was useful.

gilly3 · Accepted Answer · 2012-07-12 23:04:04Z

1

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>

edited Jul 12, 2012 at 23:04

answered Jul 12, 2012 at 22:49

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Comments

Jukka K. Korpela · Accepted Answer · 2012-07-13 08:09:13Z

1

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.

answered Jul 13, 2012 at 8:09

Jukka K. Korpela

203k38 gold badges281 silver badges407 bronze badges

Comments

Sami · Accepted Answer · 2022-03-12 08:27:46Z

0

One can always use both, like;

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

answered Mar 12, 2022 at 8:27

Sami

1

Collectives™ on Stack Overflow

Button vs link vs input type="submit" on a form

5 Answers 5

13 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

13 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related