HTML <button> 标签
更多“自己尝试”的例子见下文。
定义和用法
<button> 标签定义了一个可点击的按钮。
在 <button> 元素内，你可以放置文本（以及 <i>、<b>、<strong>、<br>、<img> 等标签）。而使用 <input> 元素创建的按钮则无法做到这一点！
提示：始终为 <button> 元素指定 type 属性，以告知浏览器按钮的类型。
提示：你可以轻松地使用 CSS 来样式化按钮！查看下面的示例，或访问我们的 CSS 按钮 教程。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <button> | 是 | 是 | 是 | 是 | 是 |
属性
| Attribute | 值 | 描述 |
|---|---|---|
| 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 framename |
指定提交表单后在哪里显示响应。仅适用于 type="submit" |
| popovertarget | element_id | 指定要调用的弹出框元素 |
| popovertargetaction | hide show toggle |
指定点击按钮时弹出框元素会发生什么 |
| name | name | 为按钮指定名称 |
| type | button reset submit |
指定按钮的类型 |
| value | text | 指定按钮的初始值 |
全局属性
<button> 标签还支持 HTML 中的全局属性。
事件属性
<button> 标签还支持 HTML 中的事件属性。
更多示例
示例
使用 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: #04AA6D;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
</style>
</head>
<body>
<button class="button button1">绿色</button>
<button class="button button2">蓝色</button>
</body>
</html>
自己动手试一试 »
示例
使用 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 #04AA6D;
}
.button1:hover {
background-color: #04AA6D;
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>
自己动手试一试 »
相关页面
HTML DOM 参考：Button 对象
CSS 教程：样式化按钮
默认 CSS 设置
无。
