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

注意:当然,上面关于访问键的示例存在一个问题,即用户不知道访问键是什么!在实际站点中,您必须以不干扰站点设计的方式提供此信息(例如,提供一个易于访问的链接,该链接指向有关站点访问键的信息)。

禁用和启用按钮

要禁用按钮,请在其上指定disabled全局属性,如下所示。

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

设置disabled属性

您可以通过将disabled设置为truefalse在运行时启用和禁用按钮。在此示例中,我们的按钮最初处于启用状态,但如果您按下它,它将使用button.disabled = true禁用。然后使用setTimeout()函数在两秒后将按钮重置回启用状态。

html
<input type="button" value="Enabled" />
js
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>
js
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>
js
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
支持的通用属性 typevalue
IDL属性 value
DOM接口

HTMLInputElement

方法
隐式ARIA角色 button

规范

规范
HTML标准
# button-state-(type=button)

浏览器兼容性

BCD表格仅在浏览器中加载

另请参阅