Turn Form Button into Hyperlink?!

Is it possible to take this Form Submit Button…

		<input id="createPM" type="submit" name="createPM" class="" value="Create PM"/>

… and make it so that when I click on it, it goes to another page (e.g. “create_pm.php”) like a hyperlink would do?

(With the key point being that I do NOT want the default, silver/grey/metallic look to change…)



It’s a form element, not a hyperlink. Best to use the right tool for the job.

A more semantic way to go about it would be to use a button element and inline JavaScript, see the below example.

<button onclick="window.location='http://www.google.com'; return false;">Click Me</button>

Not a great option for anyone with JS off, though … It’s easy enough to style an anchor to look the same, although default forms elements don’t look the same cross browser, so you’d want to style links and form buttons the same way, I guess.

There is no sin in wanting people to click on a Button to go to somewhere else on your site than a link…

And Paul O’ showed me how to do that using a background image slice to create the illusion of a Button, however, I would like it to have the default silver/gray/metallic look, so that is what I’m asking.

Also, Ralph, what I am trying to do is logical, because I want a “Send PM” Button on my “inbox.php” page to take them to my “create_pm.php” script which is a Form…

That is the whole point…

It is more intuitive to click on a metallic looking “Send PM” Button in a User’s Inbox, and then be taken to a Form to do just that, versus clicking on a hyperlink.

Yahoo Mail does that exact thing…



Here is a partial screen-shot of my Inbox…

As mentioned before, I think having a metallic Button for “Create PM” is more consistent with my “Go” Button to the left, versus having a Create PM hyperlink…

Because, the entire area is encapsulated in an HTML Form, I could leave things as a Form Button and use a Redirect to take the User to my “create_pm.php” script, but I was hoping to make things function like a hyperlink while look like a Form Button… :-/



I don’t know if this is really a proper use of the form element, but you could try doing it like this:

<form action="http://sitepoint.com/" method="post">
    <input type="submit" value="Let's Go!">

You have to use the whole <form> element, rather than just an input.

As far as I can tell, there is nothing wrong with having several Submit Buttons in a Form and having Redirects behind some of them…

What I have works, and it looks like I want it to as well.



If the form’s action attribute is a URL and the method is a GET rather than a POST, hitting a submit button will send the user to the new URL.

Seems to work with POST too.

Couldn’t you just put the button inside an <a> and get the best of both worlds?

<a href="http://google.com">
    <input type="button" value="Google!" />

It doesn’t validate, so even if it works, it’s probably best avoided.