HTML中<button>与<input type="button">的区别及正确使用方法

你提到的两类可互换的按钮，通常是指input类型按钮（<input type="button">/<input type="submit">/<input type="reset">）和原生<button>元素，二者确实存在功能重叠，选择时可参考以下差异和适用场景：

核心差异 #

• 内容灵活性不同
  <button>是双闭合标签，内部可以嵌入任意HTML内容，包括图标、格式化文本、甚至其他DOM节点，比如：

  <button type="submit">
    <span class="icon">✔</span>
    确认提交
  </button>
  

  而input类按钮的展示内容只能通过value属性设置纯文本，无法做自定义内容排版。
• 默认行为有差异
  input类按钮的行为完全由type属性决定：type="submit"默认触发表单提交、type="reset"默认触发表单重置、type="button"无默认行为。
  <button>如果不主动设置type属性，在表单内默认就是type="submit"，很多开发者踩过这个坑：在表单内加了未设置type的普通按钮，点击时意外触发了表单提交。
• 旧版兼容性差异
  早期IE6/7存在<button>提交值异常的问题：表单提交时会把<button>的内部内容当做value值提交，而非显式设置的value属性值，不过目前这些极低版本浏览器基本已经退出市场，该问题可以忽略。

选择原则 #

• 只要按钮需要自定义展示内容（加图标、多行文、特殊排版），直接选<button>
• 表单场景下：
  • 提交/重置按钮两种都可用，优先选<button type="submit">/<button type="reset">，后续改样式更灵活
  • 表单内的普通功能按钮（比如新增表单项、预校验字段），必须显式声明<button type="button"，避免触发默认提交行为
• 仅需要纯文本功能按钮、不需要自定义内容的场景，二者都可用，input类按钮写法更简洁。

注意事项 #

不要用<div>、<span>等非交互元素模拟按钮，原生按钮天生支持无障碍访问特性：支持Tab键聚焦、回车/空格触发点击，不需要额外写兼容代码。

内容的提问来源于stack exchange，提问作者Qiyuan Liu