<input> 元素的 type 属性为 image 时,会创建一个图像按钮,用户可以点击它来提交表单。这个按钮在用户点击时会提交表单,并发送鼠标点击的坐标作为表单数据。在这个章节,我们将讨论如何使用 <input> 元素的 image 类型。
属性
alt: 指定图像按钮的替代文本。src: 指定要显示在图像按钮上的图像的 URL。width和height: 指定图像按钮的宽度和高度。name和value: 用于提交表单时发送的名称和值。
示例代码
<form action="/submit" method="post"> <input type="image" src="submit.png" alt="Submit" width="100" height="50"> </form>
在上面的示例中,我们创建了一个提交按钮,当用户点击该按钮时,表单将被提交到 /submit 地址,并发送鼠标点击的坐标作为表单数据。
注意事项
- 图像按钮通常用于提交表单,但也可以用 JavaScript 来处理点击事件,以实现其他功能。
- 在设计图像按钮时,应当考虑按钮的样式、大小和替代文本,以确保用户体验良好。
这就是关于 HTML 对象 <input> - image 的介绍,希望能帮助你更好地理解和使用这个元素。
| 属性 | 描述 | W3C |
|---|---|---|
| align | 设置或返回与内联内容的对齐方式。 | Yes |
| alt | 设置或返回无法显示图像时的替代文本。 | Yes |
| border | 设置或返回图像周围的边框。 | Yes |
| complete | 返回浏览器是否已完成对图像的加载。 | No |
| height | 设置或返回图像的高度。 | Yes |
| hspace | 设置或返回图像左侧和右侧的空白。 | Yes |
| longDesc | 设置或返回指向包含图像描述的文档的 URL。 | Yes |
| lowsrc | 设置或返回指向图像的低分辨率版本的 URL。 | No |
| name | 设置或返回图像的名称。 | Yes |
| src | 设置或返回图像的 URL。 | Yes |
| useMap | 设置或返回客户端图像映射的 usemap 属性的值。 | Yes |
| vspace | 设置或返回图像的顶部和底部的空白。 | Yes |
| width | 设置或返回图像的宽度。 | Yes |
| 事件 | 描述 | W3C |
|---|---|---|
| onabort | 当用户放弃图像的装载时调用的事件句柄。 | Yes |
| onerror | 在装载图像的过程中发生错误时调用的事件句柄。 | Yes |
| onload | 当图像装载完毕时调用的事件句柄。 | Yes |