如何在 HTML 中添加按钮 - 实践
原文：如何在 HTML 中添加按钮 | w3cschool笔记
（请勿将文章标记为付费！！！！）
在网页开发中，按钮是用户界面中不可或缺的元素之一。无论是用于提交表单、触发动作还是导航，按钮都能提供直观的交互方式。本文将详细介绍如何在 HTML 中添加按钮，并通过实际示例帮助你快速掌握这一技能。
一、HTML 中添加按钮的基本方法
（一）使用
1. 基本语法
点击我
2. 常用属性属性名取值描述autofocusautofocus指定按钮在页面加载时自动获得焦点。disableddisabled指定按钮是否禁用。formform_id指定按钮所属的表单。formactionURL指定表单提交的目标 URL。formenctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain指定表单数据提交时的编码类型。formmethodget、post指定表单提交的方法。formnovalidateformnovalidate指定表单提交时不进行验证。formtarget_blank、_self、_parent、_top指定表单提交结果的显示目标。name文本指定按钮的名称。typebutton、reset、submit指定按钮的类型。value文本指定按钮的初始值。
（二）使用 标签除了
1. 基本语法
2. 常用类型
type="button"：普通按钮type="reset"：重置按钮，用于重置表单中的输入字段type="submit"：提交按钮，用于提交表单数据
二、按钮的样式定制
（一）使用内联样式我们可以在按钮标签中直接使用 style 属性来设置样式。
点击我
（二）使用内部样式表在文档的
部分定义样式，然后通过类选择器应用到按钮上。.custom-button { background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
（三）使用外部样式表将样式定义在一个单独的 CSS 文件中，然后通过 标签引入。
styles.css
.custom-button { background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;}
HTML 文件
点击我
三、按钮的交互效果
（一）使用 JavaScript 添加点击事件我们可以通过 JavaScript 为按钮添加点击事件，实现交互效果。
document.getElementById('myButton').addEventListener('click', function() { alert('按钮被点击了！'); });
（二）使用表单提交如果按钮用于提交表单，可以使用 type="submit"。
提交
四、完整示例：创建一个功能按钮以下是一个完整的示例，展示如何创建一个带有样式和交互效果的按钮。
HTML Button Tag - 编程狮教程 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; } HTML 按钮示例 - 编程狮教程 基本按钮 不同类型的按钮 禁用按钮 按钮事件 function showAlert() { alert('按钮被点击了！'); }
五、总结本文详细介绍了如何在 HTML 中添加按钮，并通过多种方式实现样式定制和交互效果。希望这个教程能帮助你更好地理解和使用 HTML 按钮元素。