I want to use the buttons with icons, but the catch is that I am trying to use them with an input tag instead of a button tag. here's what I have in my script tag:

2. <script>
3. $(function() {
4. $( "button:first" ).button({
5. icons: {
6. primary: "ui-icon-home"
7. }
8. }).next().button({
9. icons: {
10. primary: "ui-icon-locked"
11. }
12. }).next().button({
13. icons: {
14. primary: "ui-icon-gear",
15. secondary: "ui-icon-triangle-1-s"
16. }
17. });
18. });
19. </script>

But I want to use them with <input> tags. What do I need to change in the script above for it to work? And to see what input tags I am working with, this is what I have in my body tag below:

1. <input type="reset" value="Clear"/>
2. <input type="submit" value="Login"/>
3. <input type="button" value="Home"/>

Yes, I know I can use a <button> tag, but for my special case, I can't do what I want to do with that tag.