按钮通过type="submit"提交表单,2. 用onclick或addEventListener执行JavaScript,3. type="reset"重置表单,type="button"配合脚本避免默认行为,4. 调用函数发送请求。

在HTML中,按钮(button)通常用于触发某种操作,比如提交表单或执行JavaScript函数。要让按钮真正“起作用”,需要将其与表单或事件正确连接。以下是几种常见的连接方式。
1. 按钮与表单连接(提交表单)
如果按钮位于一个 form 标签内,可以通过设置按钮的 type 属性为 submit 来实现表单提交。
示例:
说明:
- 点击该按钮时,浏览器会将表单数据按照 form 的 action 和 method 提交到服务器。
- 如果不写 type,默认行为通常是 submit。
2. 按钮绑定点击事件(执行JavaScript)
使用 onclick 属性或 JavaScript DOM 事件监听器,可以让按钮触发自定义脚本。
立即学习“前端免费学习笔记(深入)”;
方法一:直接在HTML中绑定 onclick
方法二:通过JavaScript添加事件监听(推荐做法)
优点:结构与行为分离,更易于维护。
3. 按钮控制表单但不提交(如验证、重置)
有时按钮用于表单内的其他操作,比如重置输入或验证内容,这时应使用不同的 type。
- type="reset":重置表单所有字段
- type="button":普通按钮,无默认行为,常配合JavaScript使用
示例:
4. 使用 button 调用外部函数或API
实际开发中,按钮常用来调用函数处理数据或发送请求。
示例:点击按钮发送一个fetch请求
基本上就这些常见用法。根据需求选择连接方式:提交用 submit,交互用 onclick 或 addEventListener,避免误提交就用 type="button"。关键是理解按钮所处上下文——是否在表单中,目标是提交还是执行脚本。











