How do I make an icon POST/PUT?

Question

<input type=image ...> is not the way to go because it submits the x,y coordinates.

When I click on an icon, I want to submit as POST or PUT , so there should be some form, input actions.

<form action="" method="PUT" name="abc_table_form">
   display icons

</form>

What is the right way to do it?

Thanks.

---

<table>
  <row1> <form action="http://google.com/123/"> <button> icon1 </button></form> </row1>
  <row2> <form action="http://google.com/456/"> <button> icon1 </button></form> </row2>
</table>

The form adds extra space to the table. It looks ugly. The action in the form is different, and I believe <button> here is based on the action of form . What is the right way to deal with this?

Answer 1

Forms only support POST and GET .

An image input will submit a POST form (although since they are designed to be used as a server side image map, they aren't really appropriate unless you want to submit the coordinates on the image).

<button type="submit"> <img src="..." alt="Submit"> </button> is the more semantic way to submit the form using an image (although some versions of Internet Explorer will submit an odd value in response to this).

If you want to make HTTP requests using other methods (ie PUT) from a browser then you need to use XMLHttpRequest and construct it using JavaScript. Browser support for this is a bit variable.

Answer 2

<table>
 <tr><td> <form action="..." method=POST><button><img src=test.png alt=Test></button>
    <input type=hidden name=foo value=bar></form> 
 <tr> ...
</table>

That is, wrap each image in a button and wrap the button in a form of its own. Even if the forms all have the same action attribute, you need separate forms to pass different data (different values for the parameter foo in the example) in a robust pure-HTML way. The reason is that you do this using hidden fields, and they relate to the enclosing form.

For styling, consider these:

form { display: inline; } button { border: none; padding: 0; }

They will make the images appear as such, with no hint of their being clickable, so you should probably explain in prose on the page what they do.

You cannot make a form wrap a table row (except of course if it's a one-row table). You would just have to include the various parameters separately inside each form (there's no problem in having identical input type=hidden elements inside different forms). It's dull, but you're probably generating the page programmatically anyway, and programs love to do dull things.