<button>: 按钮标签

最后更新：2026-10-13

<button>按钮标签

<button>（按钮）元素创建一个可点击的按钮。相比 <input type="button">，<button> 更灵活，可以包含任意 HTML 内容（文字、图标、图片）。默认 type 为 submit。

分类	表单
内容模型	短语内容（不含交互内容）
允许的父元素	接受短语内容的元素
闭合标签	需要 `</button>` 标签
状态	标准

📝 语法

<button type="button">按钮文字</button>

⚙️ 属性

该元素支持全局属性及以下专有属性：

属性	值	描述
`type`	关键字	按钮的行为类型。 `submit` — 提交所在表单（默认）。 `button` — 普通按钮，无默认行为。 `reset` — 重置所在表单。
`name`	文本	按钮名称，随表单提交。
`value`	文本	按钮提交的值。
`disabled`	布尔	禁用按钮，不可点击。
`form`	表单 ID	指定按钮关联的表单（可跨表单）。

查看所有全局属性 → 查看所有事件属性 →

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
<button>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 在表单外使用按钮时，记得设置 type="button"，否则点击会意外提交表单。

❓ 常见问题

Qbutton 的 type 属性有哪些值？默认是哪个？

A三个值：submit（提交表单）、reset（重置）、button（无默认行为）。默认是 submit——表单外的按钮没影响，表单内不写 type 的按钮会意外触发提交，这是最常见的坑，建议始终显式写 type。

Qbutton 和 input type='button' 有什么区别？

A<button> 内容模型更丰富，可放图标、加粗文字、嵌套元素；<input type='button'> 只能通过 value 设置纯文本，且无法包含子元素。现代项目统一推荐 <button>。

Qbutton 里可以嵌套另一个 button 吗？

A不可以，交互元素不能嵌套——<button> 内不能再放 <button>、<a>、<input> 等。需要复合交互时拆分结构，或用 JS 在外层容器上代理事件。

<button> — forms 教程

📚 相关教程

HTML Forms HTML Input Types Reference

HTML 表单教程

学习按钮和表单控件。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。