html：在表单中使用按钮操作

Question

I'm styling links as buttons, and have noticed that the link action is overridden by the form action. So a cancel button actually updates. Is there a way to remove this behaviour easily and reliably(across all browsers) from the button, while keeping it inside the form element? Or do I need to restyle the buttons?

---

update:

<form>
 <input type='text'>
 <a href="cancel"><button>cancel</button></a>
 <input type="submit">
</form>

right now the a>button has the same action as input(submit)

---

ended up restyling and removing the button tags

Answer 1

Sorry if I have the wrong end of the stick here but I am not entirely sure I understand your question as that cancel button shouldnt be submitting your form, you are however using buttons incorrectly which may be the source of your problem.

I think if you do it the way you are doing it they wont work in IE:

<input type="button" value="Cancel" onClick="window.location='http://www.yoursite.com/cancellink'" />

If you do them as above should do whatever you want in all browsers unless js is disabled - hope this helps Instead of linking to a page you could call any js function inther to clear form or whatever you want

Answer 2

您需要设置按钮的类型，默认情况下，如果未设置type属性，则按钮将作为表单内的提交按钮。

<a href="cancel"><button type="button">cancel</button></a>

Answer 3

Because of the way links work, when you click <a href="cancel"> , it will try to navigate the browser to that resource. (eg http://yoursite.com/cancel ).

If you want your button to do some JS action, remove the <a> . It's just redundant in this case. Style the <button> how you want it.

If you want your button to navigate to a page, remove the <button> and style the <a> .