How to add a html image input to a form? - html

Question

I would like users to submit images that are hosted on websites like imgur rather than uploading them onto my server.
How would I achieve this in html?
This is what my form looks like now:
response.write "<form action="""" method=""post"">" &_
"<input type=""hidden"" name=""stage"" value=""2"">" &_
"Title: " &_
"<input type=""text"" name=""title""><br>" &_
"Post: " &_
"<textarea id=""post"" name=""post""></textarea><br>" &_
"<select name=""category"">"
do until info.eof
response.write "<option value=""" & info(0) & """>" & info(1) & "</option>"
info.movenext
loop
response.write "</select>" &_
"Category <i>(pick one)</i><br>" &_
"<br>" &_
"<input type=""submit"" value="" add post "">" &_
"</form>"
What would I need to add to make this possible?

Answer 1

Just use ordinary text field and ask the user to put the image URL in there. Store this as raw string in the database and display it using ordinary <img> tag.
Form would have this:
response.write "<form action="""" method=""post"">" &_
"<input type=""hidden"" name=""stage"" value=""2"">" &_
"Title: " &_
"<input type=""text"" name=""title"" /><br />" &_
"Image: " &_
"<input type=""text"" name=""image"" /><br />" &_
...
And to display:
<img src="<%=rs("imageUrl")%>" />

Answer 2

If you absolutely must use input, try this:
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
It's usually a little easier to use a button with an img inside:
Text
However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.