<input type="button">
type 屬性值為 button 的 <input> 元素會被渲染成一個按鈕。當為一個按鈕設定事件處理函式（通常是 click 事件）後，可以根據需要對它進行程式設計，以控制網頁上任意位置的自定義功能。
試一試
<input class="styled" type="button" value="Add to favorites" />
.styled {
border: 0;
line-height: 2.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: white;
text-shadow: 1px 1px 1px black;
border-radius: 10px;
background-color: tomato;
background-image: linear-gradient(
to top left,
rgb(0 0 0 / 20%),
rgb(0 0 0 / 20%) 30%,
transparent
);
box-shadow:
inset 2px 2px 3px rgb(255 255 255 / 60%),
inset -2px -2px 3px rgb(0 0 0 / 60%);
}
.styled:hover {
background-color: red;
}
.styled:active {
box-shadow:
inset -2px -2px 3px rgb(255 255 255 / 60%),
inset 2px 2px 3px rgb(0 0 0 / 60%);
}
值
帶值的按鈕
<input type="button"> 元素的 value 屬性包含一個用作按鈕標籤的字串。value 屬性為按鈕提供了無障礙描述。
<input type="button" value="Click Me" />
不帶值的按鈕
如果你不指定 value，你會得到一個空按鈕。
<input type="button" />
使用按鈕
<input type="button"> 元素沒有預設行為（它的“同類” <input type="submit"> 和 <input type="reset"> 分別用於提交和重置表單）。要讓按鈕做任何事，你必須編寫 JavaScript 程式碼來實現。
一個基本的按鈕
我們首先建立一個帶有 click 事件處理器的基本按鈕，它能啟動我們的機器（好吧，其實它只是切換了按鈕的 value 和下面段落的文字內容）。
<form>
<input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
const button = document.querySelector("input");
const paragraph = document.querySelector("p");
button.addEventListener("click", updateButton);
function updateButton() {
if (button.value === "Start machine") {
button.value = "Stop machine";
paragraph.textContent = "The machine has started!";
} else {
button.value = "Start machine";
paragraph.textContent = "The machine is stopped.";
}
}
該指令碼獲取了代表 DOM 中 <input> 的 HTMLInputElement 物件的引用，並將此引用儲存在變數 button 中。然後使用 addEventListener() 建立一個函式，當按鈕上發生 click 事件時，該函式就會執行。
為按鈕新增鍵盤快捷鍵
鍵盤快捷鍵（也稱為訪問鍵或等效鍵盤操作）允許使用者使用鍵盤上的一個鍵或組合鍵來觸發按鈕。要為按鈕新增鍵盤快捷鍵——就像為任何適用的 <input> 元素新增一樣——你需要使用 accesskey 全域性屬性。
在這個例子中，s 被指定為訪問鍵（你需要按下 s 加上適用於你的瀏覽器/作業系統的特定修飾鍵；請參閱 accesskey 以獲取這些組合鍵的有用列表）。
<form>
<input type="button" value="Start machine" accesskey="s" />
</form>
<p>The machine is stopped.</p>
備註： 上述示例的問題當然是使用者不知道訪問鍵是什麼！在一個真實的網站中，你必須以不干擾網站設計的方式提供此資訊（例如，提供一個易於訪問的連結，指向關於網站訪問鍵的資訊）。
停用和啟用按鈕
要停用一個按鈕，可以在其上指定 disabled 全域性屬性，如下所示：
<input type="button" value="Disable me" disabled />
設定 disabled 屬性
你可以在執行時透過將 disabled 設定為 true 或 false 來啟用和停用按鈕。在這個例子中，我們的按鈕開始時是啟用的，但如果你按下它，它會透過 button.disabled = true 被停用。然後使用 setTimeout() 函式在兩秒後將按鈕重置回其啟用狀態。
<input type="button" value="Enabled" />
const button = document.querySelector("input");
button.addEventListener("click", disableButton);
function disableButton() {
button.disabled = true;
button.value = "Disabled";
setTimeout(() => {
button.disabled = false;
button.value = "Enabled";
}, 2000);
}
繼承停用狀態
如果未指定 disabled 屬性，按鈕會從其父元素繼承其 disabled 狀態。這使得可以透過將一組元素包裹在一個容器中（例如 <fieldset> 元素），然後在容器上設定 disabled，從而一次性啟用和停用這組元素。
下面的例子展示了這一點。這與前一個例子非常相似，只是當第一個按鈕被按下時，disabled 屬性被設定在 <fieldset> 上——這會導致所有三個按鈕都被停用，直到兩秒的超時結束。
<fieldset>
<legend>Button group</legend>
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
</fieldset>
const button = document.querySelector("input");
const fieldset = document.querySelector("fieldset");
button.addEventListener("click", disableButton);
function disableButton() {
fieldset.disabled = true;
setTimeout(() => {
fieldset.disabled = false;
}, 2000);
}
備註： 與其他瀏覽器不同，Firefox 即使在頁面重新載入後也會持久化 <input> 元素的 disabled 狀態。作為一種變通方法，可以將 <input> 元素的 autocomplete 屬性設定為 off。（詳情請見 Firefox bug 654072。）
驗證
按鈕不參與約束驗證；它們沒有實際值可以被約束。
示例
下面的例子展示了一個非常基礎的繪圖應用，它是用 <canvas> 元素和一些 CSS 和 JavaScript 建立的（為簡潔起見，我們隱藏了 CSS）。頂部的兩個控制元件允許你選擇畫筆的顏色和大小。該按鈕在被點選時，會呼叫一個清除畫布的函式。
<div class="toolbar">
<input type="color" aria-label="select pen color" />
<input
type="range"
min="2"
max="50"
value="30"
aria-label="select pen size" /><span class="output">30</span>
<input type="button" value="Clear canvas" />
</div>
<canvas class="myCanvas">
<p>Add suitable fallback here.</p>
</canvas>
const canvas = document.querySelector(".myCanvas");
const width = (canvas.width = window.innerWidth);
const height = (canvas.height = window.innerHeight - 85);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0 0 0)";
ctx.fillRect(0, 0, width, height);
const colorPicker = document.querySelector('input[type="color"]');
const sizePicker = document.querySelector('input[type="range"]');
const output = document.querySelector(".output");
const clearBtn = document.querySelector('input[type="button"]');
// covert degrees to radians
function degToRad(degrees) {
return (degrees * Math.PI) / 180;
}
// update size picker output value
sizePicker.oninput = () => {
output.textContent = sizePicker.value;
};
// store mouse pointer coordinates, and whether the button is pressed
let curX;
let curY;
let pressed = false;
// update mouse pointer coordinates
document.onmousemove = (e) => {
curX = e.pageX;
curY = e.pageY;
};
canvas.onmousedown = () => {
pressed = true;
};
canvas.onmouseup = () => {
pressed = false;
};
clearBtn.onclick = () => {
ctx.fillStyle = "rgb(0 0 0)";
ctx.fillRect(0, 0, width, height);
};
function draw() {
if (pressed) {
ctx.fillStyle = colorPicker.value;
ctx.beginPath();
ctx.arc(
curX,
curY - 85,
sizePicker.value,
degToRad(0),
degToRad(360),
false,
);
ctx.fill();
}
requestAnimationFrame(draw);
}
draw();
技術摘要
規範
| 規範 |
|---|
| HTML # button-state-(type=button) |
瀏覽器相容性
載入中…
另見
<input>及其實現的HTMLInputElement介面。- 更現代的
<button>元素。