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
支持 支持 支持 支持 支持