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

【问题标题】：Button text different than value submitted in query string按钮文本与查询字符串中提交的值不同
【发布时间】：2012-10-30 07:43:02
【问题描述】：

短版：

我怎样才能让表单的按钮标签文本与提交给服务器的值不同没有使用<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> 标签。根据经验和研究，我可以说这不是一种可靠的方法。

【问题讨论】：

@Daedalus：谢谢你的链接。在这种情况下，您认为 w3schools.com 可能是错误的吗？

标签： html

【解决方案1】：

对于新手：使用一些 CSS，截至 2017 年 9 月，这就像一个魅力：

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

【讨论】：

【解决方案2】：

如果没有其他办法，试试这个：

使用图片按钮，而不是按钮。图像按钮将作为普通提交按钮工作，但您创建所需按钮文本的图像（那时没有人可以更改您的文本）。

 <input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">

【讨论】：

谢谢，我开始认为这是必要的。但这感觉有点费力，尤其是如果我经常这样做的话。

【解决方案3】：

这也有效。使用引导按钮类操作外观。

<label class="btn btn-primary">
 <input class="d-none" type="submit" name="method" value="repackage">
 Update Config
</label>

【讨论】：