HTML表单中如何创建点击后可返回首页的cancel取消按钮

你操作后出现勾选框，是因为错误使用了type="checkbox"的input标签作为按钮，这类标签本身就是复选框交互控件，自然会出现勾选选择的交互效果，不符合按钮的使用需求。

以下两种是兼容性最好、实现成本最低的原生写法，不需要额外引入依赖：

方式1：使用button标签实现（适合需要和表单逻辑联动的场景） #

在表单内插入button标签，显式声明类型为普通按钮，点击触发跳转逻辑即可，不会默认触发表单提交：

<button type="button" onclick="window.location.href='/'">取消</button>

注意必须加type="button"属性，form标签内的button默认类型为submit，不加的话点击会先触发表单提交再跳转，不符合预期

方式2：使用a标签模拟按钮（适合无表单联动需求的场景） #

直接用a标签实现首页跳转，再自定义CSS样式做成按钮外观，语义更符合跳转的交互逻辑：

<a href="/" class="cancel-btn">取消</a>

你可以给.cancel-btn类自定义padding、背景色、边框、文字装饰等样式，最终视觉效果和普通按钮完全一致。

• 不要使用input的checkbox/radio类型实现按钮，这类控件原生交互就是选择操作，改样式成本高也不符合语义规范
• 放在form标签内的非提交用按钮，一定要显式声明type="button"，避免触发默认的表单提交行为

内容的提问来源于stack exchange，提问作者eoghacmc02