<input>
elements of type
image
are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.
| 值 |
None — the
value
attribute should not be specified.
|
| 事件 | None. |
| Supported common attributes |
alt
,
src
,
width
,
height
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
|
| IDL attributes | None. |
| 方法 | None. |
<input type="image">
elements do not accept
value
attributes. The path to the image to be displayed is specified in the
src
属性。
In addition to the attributes shared by all
<input>
elements,
image
button inputs support the following attributes:
| 属性 | 描述 |
|---|---|
alt
|
Alternate string to display when the image can't be shown |
formaction
|
The URL to which to submit the data |
formenctype
|
The encoding method to use when submitting the form data |
formmethod
|
The HTTP method to use when submitting the form |
formnovalidate
|
A Boolean which, if present, indicates that the form shouldn't be validated before submission |
formtarget
|
A string indicating a browsing context from where to load the results of submitting the form |
height
|
The height, in CSS pixels, at which to draw the image |
src
|
The URL from which to load the image |
width
|
The width, in CSS pixels, at which to draw the image |
alt
alt
attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a
用户代理
that cannot or is configured not to show images, or if the user is using a screen reading device). If provided, it must be a non-empty string appropriate as a label for the button.
For example, if you have a graphical button that shows an image with an icon and/or image text "Login Now", you should also set the
alt
attribute to something like
Login Now
.
重要：
While the
alt
attribute is technically optional, you should always include one to maximize the usability of your content.
Functionally, the
<input type="image">
alt
attribute works just like the
alt
attribute on
<img>
元素。
formaction
A string indicating the URL to which to submit the data. This takes precedence over the
action
属性在
<form>
element that owns the
<input>
.
This attribute is also available on
<input type="submit">
and
<button>
元素。
formenctype
A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:
application/x-www-form-urlencoded
encodeURI()
.
multipart/form-data
FormData
API to manage the data, allowing for files to be submitted to the server. You
must
use this encoding type if your form includes any
<input>
elements of
type
file
(
<input type="file">
).
text/plain
Plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted.
If specified, the value of the
formenctype
attribute overrides the owning form's
action
属性。
This attribute is also available on
<input type="submit">
and
<button>
元素。
formmethod
A string indicating the HTTP method to use when submitting the form's data; this value overrides any
method
attribute given on the owning form. Permitted values are:
get
formaction
or
action
attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by
formenctype
or the form's
enctype
attribute. This URL is then sent to the server using an HTTP
get
request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.
post
formaction
or
action
attribute using an HTTP
post
request. This method supports complex data and file attachments.
dialog
This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.
This attribute is also available on
<input type="submit">
and
<button>
元素。
formnovalidate
A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the
novalidate
attribute on the element's owning form.
This attribute is also available on
<input type="submit">
and
<button>
元素。
formtarget
A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a
浏览上下文
(that is, a tab, window, or
<iframe>
. A value specified here overrides any target given by the
target
属性在
<form>
that owns this input.
In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:
_self
Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.
_blank
_parent
_self
.
_top
_self
.
This attribute is also available on
<input type="submit">
and
<button>
元素。
height
A number specifying the height, in CSS pixels, at which to draw the image specified by the
src
属性。
src
A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.
width
A number indicating the width at which to draw the image, in CSS pixels.
The following attribute was defined by HTML 4 for
image
inputs, but was not implemented by all browsers and has since been deprecated:
| 属性 | 描述 |
|---|---|
usemap
|
The name of an image map (
<map>
) element to use with the image; this is obsolete. Use the
<img>
element to create image maps instead
|
usemap
若
usemap
is specified, it must be the name of an image map element,
<map>
, that defines an image map to use with the image. This usage is obsolete; you should switch to using the
<img>
element when you want to use image maps.
<input type="image">
element is a
replaced element
(an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular
<img>
element, but with the capabilities of a
submit button
.
Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the
<img>
element.):
<input id="image" type="image" width="100" height="30" alt="Login"
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
src
attribute is used to specify the path to the image you want to display in the button.
alt
attribute provides alt text for the image, so screen reader users can get a better idea of what the button is used for. It will also display if the image can't be shown for any reason (for example if the path is misspelled). If possible, use text which matches the label you'd use if you were using a standard submit button.
width
and
height
attributes are used to specify the width and height the image should be shown at, in pixels. The button is the same size as the image; if you need the button's hit area to be bigger than the image, you will need to use CSS (e.g.
padding
). Also, if you specify only one dimension, the other is automatically adjusted so that the image maintains its original aspect ratio.
<input type="image">
elements — like regular
submit buttons
— can accept a number of attributes that override the default form behavior:
formaction
HTML5
action
attribute of the element's form owner.
formenctype
HTML5
application/x-www-form-urlencoded
: The default value if the attribute is not specified.
text/plain
.
If this attribute is specified, it overrides the
enctype
attribute of the element's form owner.
formmethod
HTML5
post
: The data from the form is included in the body of the form and is sent to the server.
get
: The data from the form is appended to the
form
attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
If specified, this attribute overrides the
method
attribute of the element's form owner.
formnovalidate
HTML5
novalidate
attribute of the element's form owner.
formtarget
HTML5
target
attribute of the element's form owner. The following keywords have special meanings:
self
: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
_blank
: Load the response into a new unnamed browsing context.
_parent
: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as
_self
.
_top
: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same as
_self
.
When you submit a form using a button created with
<input type="image">
, two extra data points are submitted to the server automatically by the browser —
x
and
y
. You can see this in action in our
X Y coordinates example
.
When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example
?x=52&y=55
. If the image input has a
name
attribute, then keep in mind that the specified name is prefixed on every attribute, so if the
名称
is
位置
, then the returned coordinates would be formatted in the URL as
?position.x=52&position.y=55
. This, of course, applies to all other attributes as well.
These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.
In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.
可以使用
object-position
property to adjust the positioning of the image within the
<input>
element's frame, and the
object-fit
property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the
width
and
height
attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.
The following example shows the same button as before, but included in the context of a typical login form.
<form>
<p>Login to your account</p>
<div>
<label for="userId">User ID</label>
<input type="text" id="userId" name="userId">
</div>
<div>
<label for="pwd">Password</label>
<input type="password" id="pwd" name="pwd">
</div>
<div>
<input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
</div>
</form>
And now some simple CSS to make the basic elements sit more neatly:
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}
In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using
object-fit
and
object-position
.
<form>
<p>Login to your account</p>
<div>
<label for="userId">User ID</label>
<input type="text" id="userId" name="userId">
</div>
<div>
<label for="pwd">Password</label>
<input type="password" id="pwd" name="pwd">
</div>
<div>
<input id="image" type="image"
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
alt="Login" width="200" height="100">
</div>
</form>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}
#image {
object-position: right top;
object-fit: contain;
background-color: #ddd;
}
这里，
object-position
is configured to draw the image at the top-right corner of the element, while
object-fit
被设为
contain
, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<input type="image">' in that specification. |
实时标准 | |
|
HTML5
The definition of '<input type="image">' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
type="image"
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android ? | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android ? |
完整支持
兼容性未知
<input>
和
HTMLInputElement
interface which implements it.
<input>
element's frame:
object-position
and
object-fit
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
<input>
类型
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">