Button text different than value submitted in query string

Question

Short version:

How can I have my form's button label text differ from the value submitted to the server without using the <button> tag?

Long version:

I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach...

<button name="method" type="submit" value="repackage">Update Config</button>

...and that worked on IE9 on one of my laptops and I was happy. The user saw "Update Config" and the server received method=repackage in the query string.

Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw "Update Config", but the server now received method=Update%20Config in the query string.

So I investigated some more. I found that www.w3schools.com recommmended not using a <button> tag in a form. They say: "If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form" in this article. This seems to be what I am experiencing.

So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.

Answer 1

For newcomers: With some CSS this works like a charm as of September 2017:

<form>
    <label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
    	<input style="display:none" type="submit" name="method" value="repackage">
    	<span>Update Config</span>
    </label>
</form>