# form标签导致点击button页面被清空
* 抖音：
* B站：
注意看啊这是一个很普通的按钮
但是
如果我们把它放到了一个form表单里边
注意看像这样
我再次点击它的时候呢注意啊… 大家看！
它就会变成了一个提交按钮
我们可以再加一个按钮来验证一下
button2 然后呢我们再写一个input（输入框）
注意看这里面写点东西
button2没问题，但是button1呢
大家看就刷新了
所以啊
像这种button标签它也是有type的
我们把它type写成button
大家看我们再来试试
大家看这样就可以了
如果我们不写呢
其实就像以前的input type=submit一样
好最后咱们再来看
有小伙伴发来的bug啊
他写了一个简单的生成这个
渐变代码的工具
然后点这个复制代码
他就出bug了
大家看代码是复制了
但是呢
页面刷新了
其实原因就是因为他把这个button
放在了一个form表单里
那我们除了在这加一个type="button"
还有什么方法吗
大家看现在是type等于button
这样就可以了
其实还有一个方法
就是前面这个按钮它没有问题
原因是什么呢
它在前面这个按钮的点击事件里
第一句加了一个event.preventDefault()
有了这个它就会阻止原生的那个事件
所以呢我们在第二个
按钮的点击方法里也加一个
我们先在这加一个event接收一下
好然后再加一个
我们再把原声的这个type=button去掉
好
然后呢
生成一个，这回复制，注意\~ 也没有问题了
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/form-biao-qian-dao-zhi-dian-ji-button-ye-mian-bei-qing-kong.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.