如何在 HTML 按钮中嵌入图像

若要在 HTML 按钮中放入图像，请在 <button> 内嵌套一个 <img>。这是打开菜单或保存更改等操作的常用做法。当图像应该提交表单时，请使用 <input type="image">。这两个控件的用途不同：type="image" 不是 <button> 的有效 type。

这些示例展示了标记和 CSS。所提供的运行时不会呈现浏览器页面，因此第一个示例会输出供你放入页面的标记；它并不声称任何视觉结果。

在原生 HTML 按钮中添加图像

对于一般操作，请使用包含 <img> 的原生 <button>。下面这个小型 JavaScript 示例会输出一个按钮元素，其中带有随附的图像资源。由于按钮本身具有可访问的名称，因此该图像是装饰性的。

const button = '<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>';
console.log(button);

<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>

src 的值是本文包中某张图像的相对路径。调整示例时，请将其替换为你自己的图像路径。type="button" 在表单中很重要：如果没有明确的 type，按钮通常会提交其关联的表单。如果图像本身就能传达该操作，且没有其他标签，请为它提供有意义的替代文本，例如 <img src="button-image.webp" alt="Save">，并省略 aria-label。如果可见文本已经指明该操作，空的 alt 可以避免多余的图像重复该名称。避免为图像和按钮赋予相同的可访问标签。

原生按钮提供键盘激活和焦点行为。应用自定义样式时，请保留可见的焦点指示器，让键盘用户能分辨哪个控件处于活动状态。

使用 image input 提交表单

当激活图像应该提交其关联表单时，请选择 <input type="image">。与嵌套图像的原生按钮不同，它本身就是一个提交控件，且没有嵌套的 <img>。它的 src 指向图像，其 alt 值为该控件命名。例如，内嵌表单 <form action="/search" method="get"><label for="query">Search</label><input id="query" name="q"><input type="image" src="button-image.webp" alt="Search"></form> 在图像控件被激活时会发送搜索请求。请将表单目的地和图像路径调整为适合你的页面。

image input 会参与表单提交和约束验证。激活时，浏览器还会以控件名称后接 .x 和 .y 的形式提交点击坐标；当服务器需要这些值时，请添加 name。表单的 action 和 method 设置了默认的目的地和请求方法。image input 上的 formaction 和 formmethod 可以覆写该次提交的这些默认值。image input 应用于表单操作，而不是作为通用界面按钮的替代品。

为图像按钮设置样式和大小

先为原生按钮应用一个类，然后设置其嵌套图像的大小。无边框的图标按钮可以使用 padding: 0; border: 0; background: transparent;，而图像可以使用 display: block; width: 2rem; height: 2rem; object-fit: contain;。这些 CSS 声明是内联语法示例；请将它们添加到页面的样式表或 <style> 元素中。请选择与周围控件相配的尺寸。object-fit: contain 能让整张图像在其框内完整可见。对于弹性图像，请使用 max-width: 100%; height: auto;，让它在保持比例的同时缩小。

请提供悬停反馈并保留键盘焦点样式，例如使用 button:hover 和 button:focus-visible。背景、边框或内边距可以让文本加图像的控件更容易被识别为可交互元素。除非你提供了同样清晰的焦点处理方式，否则不要移除浏览器的轮廓。image input 也可以通过 CSS 设置大小，但该规则适用于该 input 元素本身，而不是嵌套的图像。

选择图像和表单属性

图像文件使用 src，其可访问名称使用 alt；当图像除了可见文本或其他可访问标签之外没有增加信息时，将 alt 设为空白值。在已知预期图像尺寸时，将 width 和 height 设为该尺寸；它们会预留布局空间，而 CSS 可以为较窄的布局调整呈现大小。对于操作未在其他地方说明的有用图标，请选择能准确描述该操作或用途的替代文本。

对于 <input type="image">，form 属性可以通过表单的 ID，将控件与文档中其他位置的表单建立关联。formaction、formmethod、formenctype、formnovalidate 和 formtarget 会覆写此提交控件对应的表单设置。仅当此 image input 需要不同的提交行为时，才使用覆写。这些表单属性不会把原生 <button> 变成 image input，也不适用于按钮中嵌套的 <img>。