Question

简短版本：

如何使用<button>代码>将表单的按钮标签文本与提交给服务器的值不同？

长版：

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

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

...那在我的一台笔记本电脑上使用IE9，我很高兴。用户看到＆＃34;更新配置＆＃34;并且服务器在查询字符串中收到method=repackage。

然后我带着这个应用程序工作，并在工作站上运行它，也使用IE9。但出了点问题。用户仍然看到＆＃34;更新配置＆＃34;，但服务器现在在查询字符串中收到method=Update%20Config。

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

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

Answer 1

如果没有其他方法可以试试这个：

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

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

Answer 2

对于新来者：对于一些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>

Answer 3

这也可以。使用引导按钮类处理外观。

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

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

3 个答案: