HTML <button> 标签

定义和用法

<button> 标签定义可点击的按钮。

在 <button> 元素内部，您可以放置文本（以及像 <i>、<b>、<strong>、<br>、<img> 等标签）。这是用 <input> 元素创建的按钮所不能做到的！

提示：请始终为 <button> 元素指定 type 属性，以告知浏览器它是什么类型的按钮。

提示：您可以使用 CSS 轻松地为按钮添加样式！请查看下面的例子或访问我们的 CSS 按钮教程。

详细说明

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

另请参阅：

HTML DOM 参考手册：Button 对象

CSS 教程：设置按钮的样式

实例

像这样标记可点击的按钮：

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

亲自试一试

提示：页面底部提供更多实例。

属性

属性 值 描述
autofocus autofocus 规定按钮应在页面加载时自动获得焦点。
disabled disabled 规定应禁用按钮。
form form_id 规定按钮属于哪个表单。
formaction URL

规定提交表单时将表单数据发送到哪里。

仅适用于 type="submit"。
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

规定在将表单数据发送到服务器之前应如何对其进行编码。

仅适用于 type="submit"。
formmethod
  • get
  • post

规定如何发送表单数据（使用哪种 HTTP 方法）。

仅适用于 type="submit"。
formnovalidate formnovalidate

规定不应在提交时验证表单数据。

仅适用于 type="submit"。
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • 框架名称

规定在提交表单后响应应该显示在哪里。

仅适用于 type="submit"。
name 名称 规定按钮的名称。
popovertarget element_id 规定要调用的弹出窗口元素。
popovertargetaction
  • hide
  • show
  • toggle
 规定按钮被点击时对弹出窗口元素的操作。
type
  • button
  • reset
  • submit
 规定按钮的类型。
value 文本 规定按钮的初始值。

全局属性

<button> 标签还支持 HTML 中的全局属性。

事件属性

<button> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

无。

更多实例

例子 2

使用 CSS 设置按钮样式：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
</style>
</head>
<body>

<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>

</body>
</html>

亲自试一试

例子 2

使用 CSS 设置按钮样式（带有悬停效果）：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

</style>
</head>
<body>

<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>

</body>
</html>

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持