Specific HTML tag into button - html

Question

i am working on my html php game and i have a button design what do not contain button HTML tag. But i want to give it a button functionality.
Here is HTML code of button what works and do a function to reset time for specific amount of game gold.
<form action="game.php?page=buildings" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast">
<button type="submit" class="build_submit onlist tooltip" data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}" style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="" width="16" height="16">
</button>
</form>
And here is my new button style witch i need to apply the same function as i have set for the button before this.
<tr class="data">
<td colspan="2">
<a class="build-faster dark_highlight building disabled">
<div class="build-faster-img" alt="Reset time"></div>
<span class="build-txt">Reset time</span>
<span class="dm_cost overmark">{if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if} AM</span>
<span class="order_dm">Purchase with gold</span>
</a>
</td>
</tr>
Can someone please tell me what should i do in my case and is it even possible ?
Or i need to use only button tag ?

Answer 1

For semantic reasons (which help a lot of users who rely on screen readers and other assitive technologies), you really should use a <button>, but you can do what you want by simply applying a click event handler to the "fake button" and in that handler, you manually call the submit event of the form.
As a side note, you should definitely not be using a table for this. Tables are for tabular data rendering, not for layout.
var form = document.querySelector("form");
var fakeSubmit = document.getElementById("fakeSubmit");
fakeSubmit.addEventListener("click", function(){
form.submit();
});
#fakeSubmit {
border:1px solid #a0a0a0;
border-radius:1px;
padding:2px 5px;
background-color:#f0f0f0;
cursor:pointer;
box-shadow:1px 1px 1px rgba(0,0,0,.5);
}
#fakeSubmit:hover, #fakeSubmit:active {
box-shadow:-1px -1px 1px rgba(255,255,255,.5);
}
<form action="game.php?page=buildings" method="post" class="build_form">
<input type="hidden" name="queuetype" value="1">
<input type="hidden" name="cmd" value="fast">
<button type="submit" class="build_submit onlist tooltip"
data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}"
style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="some image" width="16" height="16">
</button>
<div id="fakeSubmit" class="build_submit onlist tooltip"
data-tooltip-content="Price : {if $need_dm<10}{10}{else}{pretty_number($need_dm)}{/if}"
style="float: right; line-height: 18px; margin-right: 13px;">
<img src="./styles/images/arrowTG.png" alt="some image" width="16" height="16">
</div>
</form>