html - 按钮文本与查询字符串中提交的值不同

Question

简短版:

如果不使用 <button>，我如何才能让表单的按钮标签文本与提交给服务器的值不同标签？

长版:

我想让表单中按钮中出现的文本与查询字符串中提交的值不同。所以，我环顾四周，发现了这种方法......

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

...这在我的一台笔记本电脑上的 IE9 上运行，我很高兴。用户看到“更新配置”，服务器收到 method=repackage在查询字符串中。

然后我让这个应用程序开始工作，并在工作站上运行它，同样使用 IE9。但是出了点问题。用户仍然看到“更新配置”，但服务器现在收到 method=Update%20Config在查询字符串中。

所以我又调查了一些。我发现 www.w3schools.com 建议不要使用 <button>在表单中标记。他们说:“如果您在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的值。使用 <input> 在 HTML 表单中创建按钮”在 this article 中.这似乎是我正在经历的。

所以我又看了一些，发现很多关于正确方法的相互矛盾的信息。例如here is a Stack Overflow post这正是问这个问题，但公认的答案是使用 <button>标签。根据经验和研究，我可以说这不是一种可靠的方法。

Answer 1

对于新手:从 2017 年 9 月开始，使用一些 CSS 这就像一个魅力:

<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>