html button标签用法详解（htmlbutton标签属性）

yumo66621小时前技术文章4

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

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

基本语法

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

常用属性

type: 定义按钮的行为。
button: 默认值，表示一个普通的按钮，不会提交表单。
submit: 表示提交按钮，会提交表单数据。
reset: 表示重置按钮，会重置表单中的所有输入字段。
name: 指定按钮的名称，在提交表单时会作为键值对的一部分发送到服务器。
value: 指定按钮的值，在提交表单时会作为键值对的一部分发送到服务器。
disabled: 如果存在该属性，按钮将被禁用，无法点击。
form: 指定按钮所属的表单，通过表单的 ID 来关联。
formaction: 覆盖表单的 action 属性，指定按钮提交表单时的 URL。
formmethod: 覆盖表单的 method 属性，指定按钮提交表单时使用的 HTTP 方法（如 GET 或 POST）。
formenctype: 覆盖表单的 enctype 属性，指定表单数据的编码类型。
formnovalidate: 如果存在该属性，表单在提交时将不进行验证。
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>