<input type="button">

型別為button的<input>元素呈現為簡單的按鈕，可以根據需要透過分配事件處理程式函式（通常是<a href="/en-US/docs/Web/API/Element/click_event" title="click">click</a>事件）來對其進行程式設計以控制網頁上任何位置的自定義功能。

試試看

注意：雖然型別為button的<input>元素仍然是完全有效的 HTML，但現在使用較新的<a href="/en-US/docs/Web/HTML/Element/button"><button></a>元素來建立按鈕更為常見。鑑於<a href="/en-US/docs/Web/HTML/Element/button"><button></a>的標籤文字插入到開始和結束標記之間，因此您甚至可以在標籤中包含 HTML，包括影像。

值

帶值的按鈕

一個<input type="button">元素的value屬性包含一個用作按鈕標籤的字串。value為按鈕提供可訪問描述。

html

<input type="button" value="Click Me" />

無值的按鈕

如果您未指定value，則會得到一個空按鈕。

html

<input type="button" />

使用按鈕

<input type="button">元素沒有預設行為（它們的同類，<input type="submit">和<input type="reset">分別用於提交和重置表單）。要使按鈕執行任何操作，您必須編寫JavaScript程式碼來完成工作。

一個簡單的按鈕

我們將首先建立一個簡單的按鈕，並帶有一個click事件處理程式，該處理程式啟動我們的機器（實際上，它切換按鈕的value和後續段落的文字內容）。

html

<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以獲取這些鍵的有用列表）。

html

<form>
  <input type="button" value="Start machine" accesskey="s" />
</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.";
  }
}

注意：當然，上面關於訪問鍵的示例存在一個問題，即使用者不知道訪問鍵是什麼！在實際站點中，您必須以不干擾站點設計的方式提供此資訊（例如，提供一個易於訪問的連結，該連結指向有關站點訪問鍵的資訊）。

停用和啟用按鈕

要停用按鈕，請在其上指定disabled全域性屬性，如下所示。

html

<input type="button" value="Disable me" disabled />

設定disabled屬性

您可以透過將disabled設定為true或false在執行時啟用和停用按鈕。在此示例中，我們的按鈕最初處於啟用狀態，但如果您按下它，它將使用button.disabled = true停用。然後使用setTimeout()函式在兩秒後將按鈕重置回啟用狀態。

html

<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屬性，則按鈕將從其父元素繼承其disabled狀態。這使得可以透過將元素包含在一個容器（例如<fieldset>元素）中，然後在容器上設定disabled來一次啟用或停用一組元素。

下面的示例展示了它的實際應用。這與前面的示例非常相似，只是當按下第一個按鈕時，在<fieldset>上設定了disabled屬性——這會導致所有三個按鈕都被停用，直到兩秒超時過去。

html

<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）。前兩個控制元件允許您選擇繪圖筆的顏色和大小。單擊按鈕時，將呼叫一個清除畫布的函式。

html

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

body {
  background: #ccc;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  background: #ccc;
  width: 150px;
  height: 75px;
  padding: 5px;
}

input[type="color"],
input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
  position: relative;
  bottom: 5px;
}

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 sizepicker 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();

技術摘要

值	用作按鈕標籤的字串
事件	`click`
支援的通用屬性	`type`和`value`
IDL屬性	`value`
DOM介面	`HTMLInputElement`
方法	無
隱式ARIA角色	`button`

規範

規範
HTML標準 # button-state-(type=button)

瀏覽器相容性

BCD表格僅在瀏覽器中載入

另請參閱

<input>和實現它的HTMLInputElement介面。
更現代的<button>元素。
CSS屬性的相容性