<input>
The <input> tag is one of the most common form elements. The main reason for its high popularity is that it allows you to create various field types, such as button, checkbox, password, file, time, email, hidden, and many others. One of these types is image, which transforms the <input> into an <img> and acts as a submit form button. When a form is submitted via such a button, the value of the <input> becomes the XY coordinates of the image that the user clicked on.
As well as <img>, the <input type="image" /> requires the src attribute. Typically, it contains the path to the image, but like the <img> tag, it supports the data URI.
For example, you can create a one-pixel red dot button as follows:
<input type="image" src="//static.base64.guru/uploads/images/1x1.gif" />The same can be achieved by encoding image to Base64 and embedding it using data URI:
<input type="image" src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs" />Both behaviors are identical — when you open the page, your browser displays the same image specified within <input> tag. The difference is that in the first case the browser sends one HTTP request to fetch the external image, when in the second case the image is already loaded in the browser’s memory and it does not need to send any HTTP requests.
Please note that Base64 Data URIs have some limitations. In addition, like almost any unconventional solutions, it has both advantages and disadvantages. Therefore, if you plan to use it, first of all, read about Base64 Data URI.
What is "aaaaigz0...my4xmda="?
Validate Base64 using Notepad++
Base64 encryption is a lie
Comments (17)
I hope you enjoy this discussion. In any case, I ask you to join it.