尝试一下

.styled {

border: 0;

line-height: 2.5;

padding: 0 20px;

font-size: 1rem;

text-align: center;

color: #fff;

text-shadow: 1px 1px 1px #000;

border-radius: 10px;

background-color: rgb(220 0 0 / 100%);

background-image: linear-gradient(

to top left,

rgb(0 0 0 / 20%),

rgb(0 0 0 / 20%) 30%,

rgb(0 0 0 / 0%)

);

box-shadow:

inset 2px 2px 3px rgb(255 255 255 / 60%),

inset -2px -2px 3px rgb(0 0 0 / 60%);

}

.styled:hover {

background-color: rgb(255 0 0 / 100%);

}

.styled:active {

box-shadow:

inset -2px -2px 3px rgb(255 255 255 / 60%),

inset 2px 2px 3px rgb(0 0 0 / 60%);

}

备注：button 类型的 元素仍然是合法的 HTML 代码，但是新的 元素是创建按钮的更好的方式。鉴于 的标签文字可以插入至开闭标签之间，你可以在标签中包含 HTML 代码，甚至是图像。

值

含有值的按钮

的 value 属性包含用作按钮标签的字符串。

html

不含有值的按钮

如果没有指定 value，会得到一个空的按钮：

html

使用按钮

元素没有默认行为（与之类似的 和 分别用于提交和重置表单）。要让按钮做任何事情，你必须编写 JavaScript 代码。

简单的按钮

我们从创建一个具有 click 事件处理器的按钮开始，它启动了我们的机器（同时，也切换了按钮的 value 和下列段落的文字）：

html

机器已经停下了。

jsconst button = document.querySelector("input");

const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {

if (button.value === "开动机器") {

button.value = "停止机器";

paragraph.textContent = "机器启动了！";

} else {

button.value = "开动机器";

paragraph.textContent = "机器已经停下了。";

}

}

脚本获得了对 DOM 中代表 的 HTMLInputElement 对象的引用，并将此引用保存在变量 button 中。然后，addEventListener() 被用来建立一个函数，当按钮上发生 click 事件时，该函数将被运行。

为按钮添加键盘快捷方式

键盘快捷键可以让用户使用键盘上的某个键或组合键来触发一个按钮。要为一个按钮添加键盘快捷键——就像对任何 都有意义的那样——你可以使用 accesskey 全局属性。

在这个例子中，s 被指定成为访问键，你需要按住浏览器或操作系统所指定的组合键加上 s 键来触发按钮，参见 accesskey 以获取一些有用的列表。

html

机器已经停下了。

const button = document.querySelector("input");

const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {

if (button.value === "开动机器") {

button.value = "停止机器";

paragraph.textContent = "机器启动了！";

} else {

button.value = "开动机器";

paragraph.textContent = "机器已经停下了。";

}

}

备注：当然，上述例子的问题是，用户将不知道访问键是什么！在一个真实的网站中，你必须以一种不影响网站设计的方式来提供这些信息（例如，提供一个容易访问的链接，指向关于网站访问键是什么的信息）。

禁用和启用按钮

要禁用按钮，在其上指定 disabled 全局属性，就像这样：

html

设置禁用属性

你可以在运行时通过设置 disabled 为 true 或 false 来启用和禁用按钮。在这个例子中，我们的按钮一开始是启用的，但如果你按下它，就会用 button.disabled = true 将其禁用。然后，一个 setTimeout() 函数被用来在两秒后将按钮重置为启用状态。

html

jsconst button = document.querySelector("input");

button.addEventListener("click", disableButton);

function disableButton() {

button.disabled = true;

button.value = "已禁用";

setTimeout(() => {

button.disabled = false;

button.value = "已启用";

}, 2000);

}

继承禁用状态

如果没有指定 disabled 属性，按钮将从其父元素继承其 disabled 状态。这使得一次启用和禁用一组元素成为可能，方法是将它们包围在一个容器中，如

元素，然后在容器中设置 disabled。

下面的例子显示了这个动作。这与前面的例子非常相似，只是当第一个按钮被按下时，disabled 属性被设置在

上——这导致所有三个按钮被禁用，直到两秒的超时时间过去。

html

按钮组

jsconst button = document.querySelector("input");

const fieldset = document.querySelector("fieldset");

button.addEventListener("click", disableButton);

function disableButton() {

fieldset.disabled = true;

setTimeout(() => {

fieldset.disabled = false;

}, 2000);

}

备注：Firefox 不像其他浏览器那样，它会在不同页面之间保持

的动态禁用的状态。请使用 autocomplete 属性来控制这个特性。

验证

按钮不参与到约束验证中；它们没有用于约束的真值。

示例

下面的例子显示了一个非常简单的绘画应用，它是用 元素和一些简单的 CSS 和 JavaScript 创建的（为了简洁，我们将隐藏 CSS）。上面的两个控件允许你选择画笔的颜色和大小。按钮，当点击时，调用一个函数来清除画布。

html

type="range"

min="2"

max="50"

value="30"

aria-label="选择画笔大小" />30

Add suitable fallback here.

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;

}

jsconst 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

方法

无

规范

Specification

HTML# button-state-(type=button)

浏览器兼容性

参见

和实现它的 HTMLInputElement 接口。

更现代的

元素。

表单控件 CSS 兼容性表格

Help improve MDN

Was this page helpful to you?

Yes

No

Learn how to contribute

This page was last modified on 2025年8月6日 by MDN contributors.

View this page on GitHub • Report a problem with this content