如何在 HTML 中添加按鈕

編程獅（w3cschool.cn） 2025-05-23 17:14:32 瀏覽數(shù) (322)

反饋

在網(wǎng)頁開發(fā)中，按鈕是用戶界面中不可或缺的元素之一。無論是用于提交表單、觸發(fā)動作還是導(dǎo)航，按鈕都能提供直觀的交互方式。本文將詳細(xì)介紹如何在 HTML 中添加按鈕，并通過實際示例幫助你快速掌握這一技能。

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

（一）使用 `<button>` 標(biāo)簽

<button> 標(biāo)簽是 HTML 中專門用于創(chuàng)建按鈕的元素。它提供了豐富的屬性，使我們能夠創(chuàng)建功能多樣的按鈕。

1. 基本語法

<button>點擊我</button>

2. 常用屬性

屬性名	取值	描述
`autofocus`	`autofocus`	指定按鈕在頁面加載時自動獲得焦點。
`disabled`	`disabled`	指定按鈕是否禁用。
`form`	`form_id`	指定按鈕所屬的表單。
`formaction`	URL	指定表單提交的目標(biāo) URL。
`formenctype`	`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`	指定表單數(shù)據(jù)提交時的編碼類型。
`formmethod`	`get`、`post`	指定表單提交的方法。
`formnovalidate`	`formnovalidate`	指定表單提交時不進行驗證。
`formtarget`	`_blank`、`_self`、`_parent`、`_top`	指定表單提交結(jié)果的顯示目標(biāo)。
`name`	文本	指定按鈕的名稱。
`type`	`button`、`reset`、`submit`	指定按鈕的類型。
`value`	文本	指定按鈕的初始值。

（二）使用 `<input>` 標(biāo)簽

除了 <button> 標(biāo)簽，我們還可以使用 <input> 標(biāo)簽創(chuàng)建按鈕。<input> 標(biāo)簽的 type 屬性指定按鈕的類型。

1. 基本語法

<input type="button" value="點擊我">

2. 常用類型

type="button"：普通按鈕
type="reset"：重置按鈕，用于重置表單中的輸入字段
type="submit"：提交按鈕，用于提交表單數(shù)據(jù)

二、按鈕的樣式定制

（一）使用內(nèi)聯(lián)樣式

我們可以在按鈕標(biāo)簽中直接使用 style 屬性來設(shè)置樣式。

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

（二）使用內(nèi)部樣式表

在文檔的 <head> 部分定義樣式，然后通過類選擇器應(yīng)用到按鈕上。

<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> 標(biāo)簽引入。

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 為按鈕添加點擊事件，實現(xiàn)交互效果。

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

四、完整示例：創(chuàng)建一個功能按鈕

以下是一個完整的示例，展示如何創(chuàng)建一個帶有樣式和交互效果的按鈕。

<!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">默認(rèn)按鈕</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>

五、總結(jié)

本文詳細(xì)介紹了如何在 HTML 中添加按鈕，并通過多種方式實現(xiàn)樣式定制和交互效果。希望這個教程能幫助你更好地理解和使用 HTML 按鈕元素。如果你還想學(xué)習(xí)更多前端開發(fā)技能，歡迎訪問編程獅 - W3Cschool，那里有豐富的教程和實戰(zhàn)項目等你來探索！

HTML CSS JavaScript 前端

1 人點贊