using <form action='page.html'> <button type=submit> to make a button a hyperlink?

Question

This is how I construct my stylized buttons.

<span class='button button-orange' id='sign-up'><input type='button' value='Sign up here' /></span>

Putting an anchor tag (with href) around the span lets you hyperlink in FF but messes up in IE if your mouse is hovered over the button's value attribute value. (value='Sign up here')

Is there anything wrong with doing this?

<form action='page.html'>
<span class='button button-orange' id='sign-up'><input type='submit' value='Sign up here' /></span>
</form>

By wrong I mean, can you see any dire consequences of doing this?

Thanks!

Answer 1

Looks fine to me. Run it by all of the browsers, and see how it flies.

Answer 2

Looks better than the original. IE and FF have different opinions about what values to transmit with when button elements are clicked.

If the value of the button is important (for example, if you have multiple buttons on the form), you should consider adding some javascript to make sure the appropriate value gets passed along.

Answer 3

I'd add the class and id attributes directly in the , instead of using a span for this. Anyway, both are valid.

Answer 4

Looks good but i think its better to use other names for your css classes.

Not "button-orange" -> use something like button-for-links.

If you change the color, you have to change the code:-)

Answer 5

The only thing I'd worry about is that you cannot nest form elements in HTML. Looks like it would be fine, but if you added inside a larger <form></form> you will run into problems.