如何在 HTML 中添加按钮

news2025/7/28 6:42:43

原文：如何在 HTML 中添加按钮 | w3cschool笔记

（请勿将文章标记为付费！！！！）

在网页开发中，按钮是用户界面中不可或缺的元素之一。无论是用于提交表单、触发动作还是导航，按钮都能提供直观的交互方式。本文将详细介绍如何在 HTML 中添加按钮，并通过实际示例帮助你快速掌握这一技能。

一、HTML 中添加按钮的基本方法

（一）使用 `<button>` 标签

<button> 标签是 HTML 中专门用于创建按钮的元素。它提供了丰富的属性，使我们能够创建功能多样的按钮。

1. 基本语法

<button>点击我</button>

2. 常用属性

属性名	取值	描述
`autofocus`	`autofocus`	指定按钮在页面加载时自动获得焦点。
`disabled`	`disabled`	指定按钮是否禁用。
`form`	`form_id`	指定按钮所属的表单。
`formaction`	URL	指定表单提交的目标 URL。
`formenctype`	`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`	指定表单数据提交时的编码类型。
`formmethod`	`get`、`post`	指定表单提交的方法。
`formnovalidate`	`formnovalidate`	指定表单提交时不进行验证。
`formtarget`	`_blank`、`_self`、`_parent`、`_top`	指定表单提交结果的显示目标。
`name`	文本	指定按钮的名称。
`type`	`button`、`reset`、`submit`	指定按钮的类型。
`value`	文本	指定按钮的初始值。

（二）使用 `<input>` 标签

除了 <button> 标签，我们还可以使用 <input> 标签创建按钮。<input> 标签的 type 属性指定按钮的类型。

1. 基本语法

<input type="button" value="点击我">

2. 常用类型

type="button"：普通按钮
type="reset"：重置按钮，用于重置表单中的输入字段
type="submit"：提交按钮，用于提交表单数据

二、按钮的样式定制

（一）使用内联样式

我们可以在按钮标签中直接使用 style 属性来设置样式。

<button style="background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">点击我</button>

（二）使用内部样式表

在文档的 <head> 部分定义样式，然后通过类选择器应用到按钮上。

<head>
    <style>
        .custom-button {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="custom-button">点击我</button>
</body>

（三）使用外部样式表

将样式定义在一个单独的 CSS 文件中，然后通过 <link> 标签引入。

styles.css

.custom-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

HTML 文件

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="custom-button">点击我</button>
</body>

三、按钮的交互效果

（一）使用 JavaScript 添加点击事件

我们可以通过 JavaScript 为按钮添加点击事件，实现交互效果。

<button id="myButton">点击我</button>
<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('按钮被点击了！');
    });
</script>

（二）使用表单提交

如果按钮用于提交表单，可以使用 type="submit"。

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="请输入用户名">
    <button type="submit">提交</button>
</form>

四、完整示例：创建一个功能按钮

以下是一个完整的示例，展示如何创建一个带有样式和交互效果的按钮。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Button Tag - 编程狮教程</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .demo-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px;
        }
        .default-btn {
            background-color: #4CAF50;
            color: white;
        }
        .primary-btn {
            background-color: #2196F3;
            color: white;
        }
        .danger-btn {
            background-color: #f44336;
            color: white;
        }
        .disabled-btn {
            background-color: #cccccc;
            color: #666666;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <h1>HTML 按钮示例 - 编程狮教程</h1>
    <div class="demo-container">
        <h2>基本按钮</h2>
        <button type="button" class="default-btn">默认按钮</button>

        
        <h2>不同类型的按钮</h2>
        <button type="button" class="primary-btn">普通按钮</button>
        <button type="submit" class="primary-btn">提交按钮</button>
        <button type="reset" class="primary-btn">重置按钮</button>

        
        <h2>禁用按钮</h2>
        <button type="button" class="disabled-btn" disabled>禁用按钮</button>

        
        <h2>按钮事件</h2>
        <button type="button" class="default-btn" onclick="showAlert()">点击显示提示</button>
    </div>


    <script>
        function showAlert() {
            alert('按钮被点击了！');
        }
    </script>
</body>
</html>