HTML 按钮 - 绿叶网

HTML 按钮是一种常用的交互元素，用于用户在网页上触发特定操作。按钮通常表现为可点击的文本或图标，点击按钮后会执行相应的 JavaScript 代码或提交表单数据给后端。

在现代 Web 开发中，按钮都是推荐使用 button 标签来实现。其中，按钮分为以下 3 种。

普通按钮（button）。
提交按钮（submit）。
重置按钮（reset）。

HTML 普通按钮

在 HTML 中，普通按钮一般情况下都是配合 JavaScript 来进行各种操作的。

语法：

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

说明：

普通按钮的 type 属性值为 "button"。

示例 1：HTML 创建普通按钮

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function () {
            const oBtn = document.getElementsByTagName("button")[0];
            oBtn.onclick = function () {
                alert("I ❤ HTML！");
            };
        }
    </script>
</head>
<body>
    <form method="post" action="/">
        <button type="button">表白</button>
    </form>
</body>
</html>

页面效果如下图所示。

分析：

对于这段功能代码，小伙伴们不需要理解，等学完 JavaScript 教程就懂了。当我们点击按钮后，会弹出对话框，如下图所示。

HTML 提交按钮

在 HTML 中，提交按钮一般都是用来给服务器提交数据的。你可以把提交按钮看成是一种特殊功能的普通按钮。

语法：

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

说明：

提交按钮的 type 属性值为 "submit"。

示例 2：HTML 创建提交按钮

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
    </form>
</body>
</html>

页面效果如下图所示。

HTML提交按钮

分析：

提交按钮与普通按钮从外观上是没有什么不同的，两者的区别在于功能上。对于初学者来说，暂时了解一下就行。

示例 3：设置提交按钮不可点击

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <button type="submit">提交</button>
        <button type="submit" disabled>提交中...</button>
    </form>
</body>
</html>

页面效果如下图所示。

分析：

有些时候，我们不希望用户点击按钮（比如表单没填完，或者正在提交中）。这时就可以使用 disabled 属性来实现。

disabled 属性可以使得按钮为不可点击状态。其中按钮会变成灰色，然后鼠标移上去会显示禁止符号，且无法点击。

HTML 重置按钮

在 HTML 中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。

语法：

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

说明：

重置按钮的 type 属性值为 "reset"，value 的取值就是按钮上的文字。

示例 4：HTML 创建重置按钮

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        账号：<input type="text"><br>
        密码：<input type="password"><br>
        <button type="reset">重置</button>
    </form>
</body>
</html>

页面效果如下图所示。

HTML重置按钮

分析：

当我们在文本框中输入内容，然后单击重置按钮，会发现内容被清空了。这就是重置按钮的功能。

注意: 重置按钮只能清空它 “所在 form 标签” 内表单中的内容，对于当前所在 form 标签之外的表单清除是无效的。

示例 5：重置按钮只能清空当前 form

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        账号：<input type="text"><br>
        密码：<input type="password"><br>
        <button type="reset">重置</button><br>
    </form>
    昵称：<input type="text">
</body>
</html>

页面效果如下图所示。

HTML重置按钮的使用

分析：

当我们在所有文本框中输入内容，然后点击重置按钮，会发现只会清除这个重置按钮所在 form 标签内的表单。这里顺便提一下，提交按钮也是针对当前所在 form 标签而言的。

最后需要提醒一点：在现代网页设计中，是极其不推荐使用重置按钮的。小伙伴想一下，用户辛辛苦苦填了几十条信息的表单，本来想点击 “提交” 按钮，但是手抖不小心点了 “重置” 按钮，心态瞬间崩了，绝对会 “口吐芬芳”。因此除非有特殊需求，否则在实际开发中尽量别用它。

示例 6：HTML 3 种按钮对比

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <button type="button">按钮</button>
        <button type="submit">按钮</button>
        <button type="reset">按钮</button>
    </form>
</body>
</html>

页面效果如下图所示：

HTML 3种按钮对比

分析：

这 3 种按钮虽然从外观上看起来是一样的，但实际功能却是不一样的。最后，我们总结一下普通按钮、提交按钮以及重置按钮的区别。

普通按钮：一般配合 JavaScript 来进行各种操作的。
提交按钮：一般都是用来给服务器提交数据的。
重置按钮：一般用来清除用户在表单中输入的内容。

button 按钮 vs input 按钮

实际上，HTML 创建按钮的方式有2 种，一种是使用 input 标签，另一种是使用 button 标签。

1. input 标签（传统写法）

在传统方式中，我们都是使用 input 标签来创建按钮。其中按钮上的文字只能通过 value 属性设置，样式局限性较大。

语法：

<input type="类型" value="值">

2. button 标签（现代写法）

在现代 Web 标准中，推荐使用 button 标签来创建按钮。button 标签是双标签（即包含 “开始标签” 和 “结束标签”），它的内部可以放置文本、图片等内容，使用起来非常灵活。

语法：

<button type="类型">文字</button>

注意: 在实际开发中，不再推荐使用 input 标签来创建按钮，而是推荐使用 button 标签。