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

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

基本语法

<button type="button">Click Me!</button>

常用属性

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）。

示例代码

普通按钮

<button type="button" onclick="alert('Button clicked!')">Click Me!</button>

提交按钮

<form action="/submit" method="post">
    <input type="text" name="username" required>
    <button type="submit">Submit</button>
</form>

重置按钮

<form action="/submit" method="post">
    <input type="text" name="username" required>
    <button type="reset">Reset</button>
</form>

禁用按钮

<button type="button" disabled>Disabled Button</button>

使用 JavaScript 控制按钮行为

<button id="myButton" type="button" onclick="handleClick()">Click Me!</button>
<script>
function handleClick() {
    alert('Button was clicked!');
}
</script>

自定义样式

<style>
    .custom-button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>
<button class="custom-button">Custom Styled Button</button>

注意事项

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

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