<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>元素。