学习目标

• 理解 <button> 和 <input type="button"> 的核心区别

• 掌握各自适用的场景与优缺点

• 能根据需求选择更合适的按钮实现方式

• 提升表单语义性、可访问性与设计灵活性

基本概念

核心区别

内容灵活性

支持富内容

<button type="button">
  <strong>登录</strong>
  <img src="login-icon.png" alt="登录图标">
</button>

仅支持纯文本

<input type="button" value="登录"> <!-- value 必须是纯字符串 -->

无法在 <input> 按钮中插入图标、换行、加粗等 HTML 结构。

语义与默认行为

• 在 <form> 中：

  • <button> 默认为 type="submit"，点击会提交表单（除非显式设置 type="button"）。

  • <input type="button"> 永远不会提交表单，必须配合 JavaScript 使用。

用法示例：

<!-- 提交按钮 -->
<button type="submit">提交</button>

<!-- 普通操作按钮 -->
<button type="button" onclick="cancel()">取消</button>

<!-- 等效但功能受限 -->
<input type="button" value="取消" onclick="cancel()">

常见错误：忘记给 <button> 加 type="button"，导致意外提交表单！

样式与设计自由度

• <button> 可以像普通容器一样使用 CSS 布局（flex、grid、padding、伪元素等）。

• <input type="button"> 在某些浏览器中难以完全重置默认样式（如 macOS Safari 的圆角、阴影）。

设计友好示例：

<button class="fancy-btn">
  <span>🛒</span> 加入购物车
</button>

.fancy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

可访问性

• <button> 更容易满足无障碍标准：

  • 可嵌入 aria-label、图标替代文本等。

  • 屏幕阅读器能正确识别其角色（role="button"）。

• <input type="button"> 依赖 value，若值为空或不明确，会影响无障碍体验。

示例对比

示例 1

<input type="button">

<input type="button" value="Click Me" onclick="alert('Hello!')">

• 简单、轻量

• 仅适合纯文本按钮

• 无法添加图标或格式化文字

示例 2

<button>

<button type="button" onclick="alert('Hello!')">
  <img src="icon.png" alt=""> 点击我！
</button>

• 支持图文混合

• 更易国际化（可通过内部元素动态切换语言）

• 更符合现代 UI 设计需求

总结

结论：在现代 Web 开发中，<button> 是创建按钮的首选方式，它提供了更好的语义、灵活性和用户体验。