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 設定
無。
