编辑“︁HTML按钮”︁

= HTML按钮 =

HTML按钮（'''HTML Button'''）是网页表单中的核心交互元素，允许用户通过点击触发特定操作。按钮可以提交表单、重置输入或执行自定义JavaScript功能。本文将详细介绍按钮的类型、属性、样式及实际应用。

== 基本语法 ==
HTML按钮使用'''<button>'''标签或'''<input>'''标签创建，两者功能相似但灵活性不同。

=== <button>标签 ===
<button>标签提供更丰富的结构（可包含文本、图像或其他HTML元素），语法如下：
<syntaxhighlight lang="html">
<button type="button">点击我</button>
</syntaxhighlight>

=== <input>标签 ===
<input>标签通过`type`属性定义按钮类型，语法更简洁：
<syntaxhighlight lang="html">
<input type="button" value="点击我">
</syntaxhighlight>

== 按钮类型 ==
HTML按钮分为三种主要类型，通过`type`属性指定：

{| class="wikitable"
|+ 按钮类型对比
! 类型 !! 描述 !! 示例
|-
| <code>type="submit"</code> || 提交表单数据到服务器 || <button type="submit">提交</button>
|-
| <code>type="reset"</code> || 重置表单所有字段为初始值 || <button type="reset">清空</button>
|-
| <code>type="button"</code> || 普通按钮，需配合JavaScript使用 || <button type="button">普通按钮</button>
|}

== 关键属性 ==
以下属性可增强按钮功能：

* '''disabled'''：禁用按钮
  <syntaxhighlight lang="html">
  <button disabled>不可点击</button>
  </syntaxhighlight>

* '''form'''：关联指定表单（即使按钮在表单外部）
  <syntaxhighlight lang="html">
  <button form="myForm">提交表单</button>
  </syntaxhighlight>

* '''autofocus'''：页面加载时自动聚焦
  <syntaxhighlight lang="html">
  <button autofocus>自动聚焦</button>
  </syntaxhighlight>

== 样式与交互 ==
=== CSS基础样式 ===
通过CSS自定义按钮外观：
<syntaxhighlight lang="html">
<style>
  .custom-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .custom-btn:hover {
    background-color: #45a049;
  }
</style>
<button class="custom-btn">绿色按钮</button>
</syntaxhighlight>

=== 状态变化 ===
<mermaid>
stateDiagram-v2
    [*] --> Normal
    Normal --> Hover: 鼠标悬停
    Hover --> Active: 鼠标按下
    Active --> Normal: 鼠标释放
    Normal --> Disabled: 禁用状态
</mermaid>

== 实际案例 ==
=== 表单提交 ===
<syntaxhighlight lang="html">
<form id="loginForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">登录</button>
  <button type="reset">重置</button>
</form>
</syntaxhighlight>

=== JavaScript交互 ===
<syntaxhighlight lang="html">
<button onclick="alert('按钮被点击!')">显示弹窗</button>
<script>
  document.querySelector('button').addEventListener('click', function() {
    console.log('控制台日志记录');
  });
</script>
</syntaxhighlight>

== 高级技巧 ==
=== 无障碍访问 ===
为屏幕阅读器添加ARIA标签：
<syntaxhighlight lang="html">
<button aria-label="关闭弹窗">X</button>
</syntaxhighlight>

=== 数学公式按钮 ===
创建计算按钮显示公式结果：
<math>E=mc^2</math>
<syntaxhighlight lang="html">
<button onclick="alert('E=mc²')">显示质能方程</button>
</syntaxhighlight>

== 常见问题 ==
'''Q: <button>和<input type="button">有何区别？'''<br>
A: <button>允许嵌套HTML内容，而<input>只能显示纯文本。现代开发推荐使用<button>。

'''Q: 如何阻止表单提交？'''<br>
A: 在submit事件中调用`event.preventDefault()`：
<syntaxhighlight lang="javascript">
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  // 自定义处理逻辑
});
</syntaxhighlight>

== 总结 ==
HTML按钮是实现用户交互的关键组件。掌握其类型、属性和事件处理能显著提升网页功能性和用户体验。建议结合CSS和JavaScript创建动态响应式按钮。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]