How do I attach a controller action to an html input

Question

I have this HTML - its a button placed at the end of a search box:

<input type="image" name="submit" id="searchSubmit" src="images/searchGif.gif" border="0" />

How do I attach a Controller action to it and what is the VF equivalent of this html?

Answer 1

So if you want to work with a "plain" HTML (for example to reduce the page view state size) you can use JavaScript Remoting controls or just attach an action function to your button:

<input type="button" name="submit" id="searchSubmit" onclick="doSomething();"/>

<apex:actionFunction name="doSomething" action="{!myApexMethod}" reRender="somePanel"/>

Answer 2

Use an apex:commandButton with the image attribute set to the URL of the image that you want to display.

    <apex:page controller = "CustomControllerClass" >
......
        <apex:commandButton action="{!search}" image="images/searchGif.gif" id="theButton"/>

You may have to specify the full url to the image, depending on where you're holding the image.

You will then need to create a controller class (or extension, as the case may be), which your page is associated with and declare an action method (return type PageReference), which can then be bound to this button

public class CustomControllerClass{

public PageReference search(){
//execute logic here
    }
}