前端小伙伴们应该对button标签非常熟悉了，今天就来总结下button标签的详细用法，温故知新。

HTML 中的 标签用于创建可点击的按钮。按钮可以包含文本、图像或其他 HTML 元素，并且可以通过 JavaScript 进行交互。以下是 标签的详细用法和属性说明：

基本语法

Click Me!

常用属性

1. type: 定义按钮的行为。
2. button: 默认值，表示一个普通的按钮，不会提交表单。
3. submit: 表示提交按钮，会提交表单数据。
4. reset: 表示重置按钮，会重置表单中的所有输入字段。
5. name: 指定按钮的名称，在提交表单时会作为键值对的一部分发送到服务器。
6. value: 指定按钮的值，在提交表单时会作为键值对的一部分发送到服务器。
7. disabled: 如果存在该属性，按钮将被禁用，无法点击。
8. form: 指定按钮所属的表单，通过表单的 ID 来关联。
9. formaction: 覆盖表单的 action 属性，指定按钮提交表单时的 URL。
10. formmethod: 覆盖表单的 method 属性，指定按钮提交表单时使用的 HTTP 方法（如 GET 或 POST）。
11. formenctype: 覆盖表单的 enctype 属性，指定表单数据的编码类型。
12. formnovalidate: 如果存在该属性，表单在提交时将不进行验证。
13. formtarget: 覆盖表单的 target 属性，指定提交表单后结果的显示位置（如 _blank、_self、_parent、_top）。

示例代码

普通按钮

Click Me!

提交按钮

    
    Submit

重置按钮

    
    Reset

禁用按钮

Disabled Button

使用 JavaScript 控制按钮行为

Click Me!
<script>
function handleClick() {
    alert('Button was clicked!');
}
</script>

自定义样式

Custom Styled Button

注意事项

• 标签可以包含其他 HTML 元素，例如图标或图片。
• 使用 onclick 属性可以直接在 HTML 中添加事件处理程序，但更好的做法是使用 JavaScript 文件来分离逻辑和结构。
• 确保为按钮提供适当的 aria 属性以提高无障碍性。

如果这篇文章对你有用，欢迎点赞关注加评论哦。