<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 (19)
I hope you enjoy this discussion. In any case, I ask you to join it.
bmlzdHJhdGl2b3MKCg0KSU5UUk9EVUNDSU9OClRhIHByZXNlbnRlIG1vbm9ncmFmaWEgYWJvcmRh
IGRlIG1hbmVyYSBleHRlbnNhIGxvcyBjb25jZXB0b3MgZXNzZW5jaWFsZXMgcmVsYWNpb25hZG9z
IGNvbiBsYSBldmFsdWFjaW9uIHkgbG8gbWVqb3JhIGNvbnRpbnVhIGVuIGxvcyBwcm9jZXNvcyBh
ZG1pbmlzdHJhdGl2b3MuIEluY2x1eWUgZWwgdXNvIGRlIGhlcnJhbWllbnRhcyBjb21vIHkgZWwg
Y2ljbG8gUEhWQSwgYXNpIGNvbW8gZGl2ZXJzYXMgY2FyYWN0ZXJpc3RpY2FzIGRlbCBtZWpvciBv
cGVyYXRpdm8uCgoKQ09OQ0VQVE8gMS4gRVZBTFVBQ0lPTgBFcyB1biBwcm9jZXNvIHNpc3RlbWF0
aWNvIHF1ZSBjb25zaXN0ZSBlbiByZWNvcGlsYXIgaW5mb3JtYWNpw7NuLCBhbmFsaXphcmxhIHkg
Y29tcGFyYXJsYSBjb24gbG9zIG9iamV0aXZvcyB5IGVzdGFuZGFyZXMuIFBlcm1pdGUgaWRlbnRp
ZmljYXIgZGVzaXZpYWNpb25lcyB5IG1lam9yYXMgZW4gbG9zIHByb2Nlc29zLgoKQ09OQ0VQVE8g
Mi4gTUVKT1JBIENPTlRJTFVBCUVuZm9xdWUgZ2VyZW5jaWFsIGRlIG1lam9yYSBwZXJtYW5lbnRl
LCBlbWJhc2FkbyBlbiBsYSBpbm5vdmFjacOzbiBjb250aW51YSwgZW4gdW5hIGN1bHR1cmEgcHJv
YWN0aXZhIGRlIG1lam9yYSB5IGVuIGxhIHBhcnRpY2lwYWNpw7NuIGRlbCBwZXJzb25hbC4KCk9C
SkVUSVZPUyBFUyBFU1BFQ0lGSUNPUwpJbmNyZW1lbnRhciBsYSBlZmljaWVuY2lhLCBtZWpvcmFy
IGxhIGNhbGlkYWQgc2VydmljaW9zLCByZWR1Y2lyIGNvc3RvcyB5IG9wdGltYXIgcmVzdWx0YWRv
cy4KCgpFTCBDSUNMTyBQSFZBCkVzIGxhIG1ldG9k b2xvZ8OzbWEgcG9yIGV4Y2VsZW5jaWEgcGFy
YSBsYSBtZWpvcmEgY29udGludWE6CgotIFBsYW5pZmljYXI6IGRlZmluacOzbiBkZSBvYmpldGl2
b3MsIGFuYWxpc2lzIGRlIGNhdXNhcyB5IGRpc2Vuw7Mgc3RyYXRlZ2ljYXMuCi0gSGFjZXI6IGVq
ZWN1Y2nDs24gZGUgcGxhbmVzLg otIFZlcmlmaWNhcjogcmV2aXNp824gZGUgcmVzdWx0YWRvcy4K
LSBBY3R1YXI6IGFkanVzdGVzIGZpbmFsZXMgeSBub3JtYWxpemFjacOzbiBk ZWwg Y2FtYmlvLgoK
UFJPQ0VT T0QgR FVM TyBDSUNM TyBQ SFZBCi0gUGxhbmZpY2FyCi0gSGFjZXIKLSBWZXJpZmlj
YXI KLSBBY3R1YXI KCgpBQ0NJ T05F UyBDT1JS RUNUSVZBUwoKMi4xIEFjY2 lvbmVzIGNvcnJl
Y3Rp dmFzIGRl c3RyYWRhcyBwYXJhIGVs aW1pbmFy IGxhIGNhd XNhIHJhaX kgZGVs IHByb2 Js
ZW1h LgoKM i4yIEFjY2 lvbmVzIHBy ZXZlbnRp dmFz IGRpcmlnaWR hcyBhIG1pdG lnYXI gbyBl
bGlta mFy IHJpZX Nnb3M gcG90 ZW5ja WF sZXMg YW50 ZXMgZGU gcXVl IHnDsyBvY3Vycm Fu
LgoKClBST0NFU09TIEFETUlOSVNU UkFUSVZPUwpMdXMgZnVuY2lvbmVzIHNvbiBsYSBwbGFuZWFj
acOzbiwgbGE gb3JnYW5p emFjacOzbi wgbGE gZGlyZWNjacOzbiB 5IGVs IGNvbnRyb2wu CgoK
TUVUT0R PUyBE RSBFVkFM VUFDSU9OCgoxLi B Jbm RpY2Fkb3JlcyBk ZSBkZXNlbXBlw7NuIGtQ
SX MKMi4gQXVka XRvcmlh cyBpbnRlcm5h cwp LMy4gTWF wYXM gZGU gcHJ vY2Vz b3MKNC4 gQW7h
bGlza X MgY2F1c2Eg cmFpw7MKNS4 g QmVu Y2ht YXJr aW5 nCjYu IEV2 YWx1YWN pw7 NuIGR lb
CBkZXN lbXBlw7Nu bw o3LiBFbmN1 ZXN0YXMg eSBlbnRsd Xh pcwoKQ09OU0 xVU0lPTlMKTGEg
ZXZhbHVhY2nDs24 g eSBsYS BtZWpvcm EgY29ud Glud WEgc29u IGZ1 bmRhbWVudGFsZXMg cGFy
YSB1 bmEg YWRtaW5pc3Ry YWNpw7Nu IGVmZWxp ZmllbnRl LCBhcHVl cnRhICBlb GVjd Gl2 yW1h
LCB5 IG1hbnRp ZW5lIGVs IGNvbnR yb2wg c29icmUg bG9z IHByb2Nlc29z IGFk bWluaXN0
cmF0aXZvcy4KCgpCSU9HUkF GSUEgQU5BIFBBIDcKCkRlbWlu Zywg RS4gKDE5 ODkpLi BDYW xp
ZGFkLC Bwcm9kdWN0 aXZp ZGFkIG kgY29tcGV0 aXRpdmlkYWQu IE1jR3Jh dy1IaWxs LgoKSGFy
cmluZ3Rvbiwg Si4gKDE5 OT MpLi BCdXNpb mVzcyBQcm9 jZXNz IEl tcHJ vdmVt ZW50Li BN
Y0dyYXct S GlsbC4KClJvYmJpbn MsIFMu LC AmIENvdWx0 ZXIsIE0u IC (2018KS kgQWRtaW5p
c3RyYWNpw7Nu LiBQZWFyc29u LgoKU2No ZXJtZXJob3Ju LCBKLiAo MjAx OSku IEFkbWlu
aXN0cmFjacOzbi4g V2lsZXkuCgo=