<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属性的兼容性