HTML 按钮 - <button>

什么是 <button> 标签？

<button> 是HTML中的按钮元素，用于创建可点击的按钮，常用于表单提交、重置或触发JavaScript事件。

基本语法

html 
<button type="button">点击我</button>

核心属性

type 属性

type 属性指定按钮的类型，主要有三种：

  • button：普通按钮，用于触发JavaScript事件（默认）
  • submit：提交按钮，用于提交表单
  • reset：重置按钮，用于重置表单到初始状态

示例：

html 
<!-- 普通按钮 -->
<button type="button" onclick="alert('Hello!')">点击我</button>

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

<!-- 重置按钮 -->
<button type="reset">重置表单</button>

name 属性

name 属性为按钮指定名称，用于表单提交时标识按钮。

示例：

html 
<button type="submit" name="action" value="save">保存</button>
<button type="submit" name="action" value="delete">删除</button>

value 属性

value 属性为按钮指定值，当表单提交时，这个值会被发送到服务器。

示例：

html 
<form action="/process" method="POST">
  <input type="text" name="username">
  <button type="submit" name="action" value="create">创建用户</button>
  <button type="submit" name="action" value="update">更新用户</button>
</form>

disabled 属性

disabled 属性禁用按钮，用户无法与之交互，且禁用的按钮不会被提交。

示例：

html 
<button type="button" disabled>不可点击</button>

autofocus 属性

autofocus 属性指定页面加载时按钮自动获得焦点。

示例：

html 
<button type="submit" autofocus>立即提交</button>

form 属性

form 属性指定按钮属于哪个表单，值为表单的 id。

示例：

html 
<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username">
</form>

<button type="submit" form="myForm">提交表单</button>

按钮内容

与 <input type="button"> 不同，<button> 标签可以包含文本、图片或其他HTML元素作为按钮内容。

示例：

html 
<!-- 文本按钮 -->
<button type="button">点击我</button>

<!-- 图片按钮 -->
<button type="button">
  <img src="icon.png" alt="图标"> 带图标的按钮
</button>

<!-- 样式化按钮 -->
<button type="button">
  <strong>重要操作</strong>
</button>

与 <input type="button"> 的区别

特性 <button> <input type="button">
内容 可以包含文本、图片等HTML元素 只能包含文本（通过value属性）
样式 更容易通过CSS进行样式化 样式化相对有限
浏览器兼容性 所有现代浏览器都支持 所有浏览器都支持

最佳实践

  1. 始终指定 type 属性：明确按钮的类型，避免默认行为可能导致的问题

  2. 使用语义化内容：按钮内容应该清晰地描述按钮的功能

  3. 添加适当的样式：通过CSS使按钮在视觉上突出，提高用户体验

  4. 考虑可访问性：为按钮添加适当的 alt 文本（如果包含图片）和 title 属性

  5. 使用 form 属性：对于不在表单内部的按钮，可以使用 form 属性关联到相应的表单

示例：

html 
<form id="contact-form" action="/contact" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="message">留言：</label>
  <textarea id="message" name="message" required></textarea>
</form>

<div class="form-actions">
  <button type="submit" form="contact-form">发送留言</button>
  <button type="reset" form="contact-form">重置</button>
  <button type="button" onclick="cancelForm()">取消</button>
</div>

CSS样式化

可以使用CSS对按钮进行样式化，例如：

css 
button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

button:active {
  background-color: #004085;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

浏览器兼容性

所有现代浏览器都支持 <button> 标签及其常用属性。

总结

<button> 标签是创建交互式按钮的灵活选择，它可以包含丰富的内容并支持各种属性和事件。正确使用 <button> 标签，可以创建功能完善、用户友好的按钮界面。

最后更新：2026-02-07