码农教程 - 一技在手,衣食无忧! tools

HTML <button> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

可点击的按钮标记如下：

<button type="button">Click Me!</button>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<button>标签定义了一个可点击的按钮。

里面一个<button>您可以放置​​文本的元素（以及诸如<i>,<b>,<strong>,<br>,<img>， ETC。）。使用创建的按钮是不可能的<input>元素！

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

提示：您可以使用 CSS 轻松设置按钮样式！查看下面的示例或访问我们的CSS 按钮教程。

浏览器支持

Element
<button> Yes Yes Yes Yes Yes

属性

Attribute Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
formmethod get
post		 Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type="submit"
formtarget _blank
_self
_parent
_top
framename		 Specifies where to display the response after submitting the form. Only for type="submit"
popovertarget element_id Specifies a which popover element to invoke
popovertargetaction hide
show
toggle		 Specifies what happens to the popover element when the button is clicked
name name Specifies a name for the button
type button
reset
submit		 Specifies the type of button
value text Specifies an initial value for the button

全局属性

这个<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;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>

<button class="button button1">Green</button>
<button class="button button2">Blue</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">Green</button>
<button class="button button2">Blue</button>

</body>
</html>
亲自试一试 »

相关页面

HTML DOM 参考：按钮对象

CSS 教程：CSS 按钮

默认 CSS 设置

没有任何。


❮上一节 完整的 HTML参考 下一节❯