HTML <button> 标签
下面还有更多“亲自试一下”的示例。
定义和用法
该 <button> 标签定义一个可点击按钮。
在 <button> 元素中，您可以放置文本（和标签，例如 <i>、<b>、<strong>、<br>、<img> 等）。使用 <input> 元素创建的按钮无法做到这一点！
提示：始终为 <button> 元素指定 type 属性，以告知浏览器按钮的类型。
提示：您可以轻松地使用 CSS 样式按钮！查看下面的示例，或访问我们的 CSS 按钮 教程。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <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 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 参考：按钮对象
CSS 教程：样式按钮
默认 CSS 设置
无。
