原文：如何在 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>
五、總結
本文詳細介紹了如何在 HTML 中添加按鈕，并通過多種方式實現樣式定制和交互效果。希望這個教程能幫助你更好地理解和使用 HTML 按鈕元素。
