- HTML: HyperText Markup Language | MDN"> - HTML: HyperText Markup Language | MDN"> - HTML: HyperText Markup Language | MDN

Trang chủ » Html Button Alt Text » - HTML: HyperText Markup Language | MDN

Có thể bạn quan tâm

  1. References
  2. HTML
  3. Elements
  4. <input>
  5. <input type="image">
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Français
    • 日本語
    • Русский
    • 中文 (简体)
  • Try it
  • Value
  • Additional attributes
  • Obsolete attributes
  • Using image inputs
  • Examples
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also
  1. HTML
  2. Tutorials
  3. HTML basics
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. References
  8. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym> Deprecated
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big> Deprecated
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center> Deprecated
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir> Deprecated
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe> Experimental
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font> Deprecated
    43. <footer>
    44. <form>
    45. <frame> Deprecated
    46. <frameset> Deprecated
    47. <h1>
    48. <head>
    49. <header>
    50. <hgroup>
    51. <hr>
    52. <html>
    53. <i>
    54. <iframe>
    55. <img>
    56. <input>
    57. <ins>
    58. <kbd>
    59. <label>
    60. <legend>
    61. <li>
    62. <link>
    63. <main>
    64. <map>
    65. <mark>
    66. <marquee> Deprecated
    67. <menu>
    68. <meta>
    69. <meter>
    70. <nav>
    71. <nobr> Deprecated
    72. <noembed> Deprecated
    73. <noframes> Deprecated
    74. <noscript>
    75. <object>
    76. <ol>
    77. <optgroup>
    78. <option>
    79. <output>
    80. <p>
    81. <param> Deprecated
    82. <picture>
    83. <plaintext> Deprecated
    84. <portal> Experimental
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb> Deprecated
    89. <rp>
    90. <rt>
    91. <rtc> Deprecated
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <slot>
    100. <small>
    101. <source>
    102. <span>
    103. <strike> Deprecated
    104. <strong>
    105. <style>
    106. <sub>
    107. <summary>
    108. <sup>
    109. <table>
    110. <tbody>
    111. <td>
    112. <template>
    113. <textarea>
    114. <tfoot>
    115. <th>
    116. <thead>
    117. <time>
    118. <title>
    119. <tr>
    120. <track>
    121. <tt> Deprecated
    122. <u>
    123. <ul>
    124. <var>
    125. <video>
    126. <wbr>
    127. <xmp> Deprecated
  9. Global attributes
    1. accesskey
    2. anchor Experimental Non-standard
    3. autocapitalize
    4. autocorrect Experimental
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. spellcheck
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy Experimental
    34. writingsuggestions
  10. Attributes
    1. accept
    2. autocomplete
    3. capture
    4. crossorigin
    5. dirname
    6. disabled
    7. elementtiming
    8. for
    9. max
    10. maxlength
    11. min
    12. minlength
    13. multiple
    14. pattern
    15. placeholder
    16. readonly
    17. rel
    18. required
    19. size
    20. step
  11. <input> types
    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime-local">
    6. <input type="email">
    7. <input type="file">
    8. <input type="hidden">
    9. <input type="image">
    10. <input type="month">
    11. <input type="number">
    12. <input type="password">
    13. <input type="radio">
    14. <input type="range">
    15. <input type="reset">
    16. <input type="search">
    17. <input type="submit">
    18. <input type="tel">
    19. <input type="text">
    20. <input type="time">
    21. <input type="url">
    22. <input type="week">
  12. Guides
    1. Content categories
    2. Block-level elements
    3. Inline elements
    4. Quirks Mode and Standards Mode
    5. Date and time formats used in HTML
    6. Constraint validation
    7. Microdata
    8. Microformats
    9. Viewport meta tag
    10. Allowing cross-origin use of images and canvas
  • Try it
  • Value
  • Additional attributes
  • Obsolete attributes
  • Using image inputs
  • Examples
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also

<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.

Try it

Value

<input type="image"> elements do not accept value attributes. The path to the image to be displayed is specified in the src attribute.

Additional attributes

In addition to the attributes shared by all <input> elements, image button inputs support the following attributes.

alt

The alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent 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.

Note: While the alt attribute is technically optional, you should always include one to maximize the usability of your content.

Functionally, the alt attribute of the <input type="image"> element works just like the alt attribute on <img> elements.

formaction

A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input>.

This attribute is also available on <input type="submit"> and <button> elements.

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

This, the default value, sends the form data as a string after percent-encoding the text using an algorithm such as encodeURI().

multipart/form-data

Uses the 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 attribute.

This attribute is also available on <input type="submit"> and <button> elements.

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

A URL is constructed by starting with the URL given by the 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

The form's data is included in the body of the request that is sent to the URL given by the 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 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> elements.

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> elements.

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 browsing context (that is, a tab, window, or <iframe>. A value specified here overrides any target given by the target attribute on the <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

Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent.

_parent

Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self.

_top

Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self.

This attribute is also available on <input type="submit"> and <button> elements.

height

A number specifying the height, in CSS pixels, at which to draw the image specified by the src attribute.

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.

Obsolete attributes

The following attribute was defined by HTML 4 for image inputs, but was not implemented by all browsers and has since been deprecated.

usemap

If 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.

Using image inputs

The <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.

Essential image input features

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.):

html<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" />
  • The src attribute is used to specify the path to the image you want to display in the button.
  • The 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.
  • The 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.

Overriding default form behaviors

<input type="image"> elements — like regular submit buttons — can accept a number of attributes that override the default form behavior:

formaction

The URI of a program that processes the information submitted by the input element; overrides the action attribute of the element's form owner.

formenctype

Specifies the type of content that is used to submit the form to the server. Possible values are:

  • 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

Specifies the HTTP method that the browser uses to submit the form. Possible values are:

  • 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

A Boolean attribute specifying that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element's form owner.

formtarget

A name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the 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.

Using the x and y data points

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 name is position, 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 and the default in case submission happens without a click on 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.

Adjusting the image's position and scaling algorithm

You can use the 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.

Examples

A login form

The following example shows the same button as before, but included in the context of a typical login form.

HTML

html<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>

CSS

And now some CSS to make the basic elements sit more neatly:

cssdiv { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; }

Adjusting the image position and scaling

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.

HTML

html<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>

CSS

cssdiv { 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; }

Here, object-position is configured to draw the image in the top-right corner of the element, while object-fit is set to 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.

Technical summary

Value None — the value attribute should not be specified.
Events None.
Supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
IDL attributes None.
DOM interface

HTMLInputElement
Methods None.
Implicit ARIA Role button

Specifications

Specification
HTML Standard # image-button-state-(type=image)

Browser compatibility

BCD tables only load in the browser

See also

  • <input> and the HTMLInputElement interface which implements it.
  • The HTML <img> element
  • Positioning and sizing the image within the <input> element's frame: object-position and object-fit
  • Compatibility of CSS properties

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Nov 21, 2024 by MDN contributors.

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

Từ khóa » Html Button Alt Text