html input image,input type="image"-CSDN博客

本文详细介绍了HTML中`<input type='image'>`类型的元素，这种元素用于创建图形提交按钮，允许用户通过点击图像来提交表单。内容涵盖了`src`、`alt`、`width`、`height`等属性的使用，以及如何通过`formaction`、`formenctype`、`formmethod`等属性重写表单的默认行为。还提到了提交时附带的`x`和`y`坐标数据，可用于实现特定交互，如地图点击定位等。示例代码展示了图像提交按钮在登录表单中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类型的元素"image"用于创建图形提交按钮，即提交采取图像而不是文本形式的按钮。

值无 - 不应该指定值属性。活动没有。

支持的通用属性所有，src，宽度，高度，形式，表单类型，表单方法，formnovalidate，格式

IDL属性没有。

方法没有。

值

元素不接受value属性。要显示的图像的路径在src属性中指定。

使用图像输入

所述元件是一个替换元件(元件，其内容也不会产生或受到CSS层直接管理)，在大致相同的方式作为常规行为元件，但具有提交按钮的功能。

基本的图像输入功能

让我们来看一个基本的例子，其中包含了您需要使用的所有基本功能(这些功能与元素上的功能完全相同)。

src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">

该src属性用于指定要在按钮中显示的图像的路径。

该alt属性为图像提供替代文本，因此屏幕阅读器用户可以更好地了解该按钮的用途。如果由于任何原因无法显示图像(例如路径拼写错误)，也会显示该图像。如果可能的话，使用与使用标准提交按钮时所用标签相匹配的文本。

width和height属性用来指定的宽度和高度的图像应在被示出，以像素为单位。该按钮与图像大小相同; 如果你需要按钮的点击区域大于图像，你将需要使用CSS(例如padding)。另外，如果只指定一个尺寸，则另一个尺寸会自动调整，以便图像保持其原始高宽比。

覆盖默认的表单行为

元素 - 像常规的提交按钮 - 可以接受一些重写默认表单行为的属性：

formactionHTML5处理由input元素提交的信息的程序的URI，在这里如果指定了image，它将覆盖action元素的表单所有者的属性。formenctypeHTML5如果输入元素是图像，则此属性指定用于将表单提交给服务器的内容的类型。可能的值是：

application/x-www-form-urlencoded：如果未指定属性，则为默认值。

text/plain.

如果指定了该属性，则将覆盖enctype该元素的表单所有者的属性。

formmethodHTML5在图像输入元素中，该属性指定浏览器用于提交表单的HTTP方法。可能的值是：

post：表单中的数据包含在表单的主体中，并发送到服务器。

get：来自表单的数据被附加到表单属性URI，并带有'？' 作为分隔符，并将生成的URI发送到服务器。当表单没有副作用并且只包含ASCII字符时使用此方法。

如果指定，则此属性将覆盖method该元素的表单所有者的属性。

formnovalidateHTML5这个布尔属性指定表单在提交时不被验证。如果指定了该属性，则将覆盖novalidate该元素的表单所有者的属性。

formtargetHTML5此属性是一个名称或关键字，指示在提交表单后显示收到的响应的位置。这是浏览上下文的名称或关键字(例如，选项卡，窗口或内联框架)。如果指定了该属性，则将覆盖target该元素的表单所有者的属性。以下关键字具有特殊含义：

_self：将响应加载到与当前浏览环境相同的浏览环境中。如果未指定属性，则此值为默认值。

_blank：将响应加载到新的未命名浏览上下文中。

_parent：将响应加载到当前父浏览上下文中。如果没有父项，则此选项的行为方式与_self。

_top：将响应加载到顶级浏览上下文(即，作为当前祖先的浏览上下文，并且没有父级)。如果没有父项，则此选项的行为方式与_self。

使用x和y数据点

当您使用与创建按钮提交表单，两个额外的数据点通过浏览器自动提交到服务器- x和y。您可以在我们的XY坐标示例中看到这一点。

例如，当您单击图像提交表单时，您将看到作为参数附加到URL的数据"?x=52&y=55"。如果图像输入具有name属性，那么请记住，指定的名称是以每个属性为前缀的，所以如果name是"position"，那么返回的坐标将被格式化为URL "?position.x=52&position.y=55"。当然，这也适用于所有其他属性。

这些是鼠标点击提交表单的图像的X和Y坐标，其中(0,0)是图像的左上角。当点击图像的位置非常重要时，可以使用这些元素，例如，您可能会有一个地图，单击时会将点击的坐标发送到服务器。服务器端代码然后找出被点击的位置，并返回附近的地方的信息。

在我们上面的例子中，我们可以编写服务器端代码来确定提交的坐标点击了什么颜色，并保留了人们所喜欢的颜色。

例子

以下示例显示了与以前相同的按钮，但包含在典型登录表单的上下文中。

HTML看起来像这样：

User ID

Password

现在一些简单的CSS让基本元素更加整齐：

div {

margin-bottom: 10px;}label {

display: inline-block;

width: 70px;